一. 一些废话 一直做的是后台编码，前端设计还停留在JavaScript的post、get阶段。之前不止一次想系统的看一下jQuery，结果不是因为工作打断，就是因为没找到合适的教程而无心看下去。倒不是说没有好教材，只怪自己看到太过详细或者篇幅太多的教材，就有点发憷。玻璃心啊，玻璃心。。 这次无意间搜到的教程是w3School的，每一篇都不多，还有在线案例供大家调试，很适合初学者学习使用。 花了几天的时间把jQuery这块的看完了，做个小结吧。 二. jQuery导入 jQuery是一个javaScript库，它将一些前端常用效果的实现语法，用比较简单、直观、语法通用的方式整合起来，这样，我们就可以不用为了一个简单的前端效果，编写很多前端代码了。jQuery的引入也比较简单，可以在 中下载所需版本的jQuery，然后放到自己的工程里，再在前端页面代码中使用<script type="text/javascript" src="jquery.js"></script>语句引入，这样就可以调用jQuery函数了。type="text/javascript" 这个属性在目前大部分浏览器中可以不加（已验证火狐、谷歌、ie9可以不加）。 不愿意在自己的计算机上存放 jQuery 库，也可以用 <script type="text/javascript" src=""></script> 或者 <script type="text/javascript" src=""></script> ，或 <script src=""> 第一个是Google的CDN，后两个是微软的CND。自从“股沟离开了中国”后，Google的CND一般情况下在国内连不上，或者你能有办法连上，但是无法保证用你系统的人连得上，所以建议还是用本地方式或者微软的CDN。至于使用CDN的好处，援引w3school的说明：用户在访问其他站点时，可能已经从谷歌或微软加载过 jQuery。当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。 三. jQuery的结构 在介绍具体函数前，首先说下我们jQuery在前端代码里的使用格式：
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){$(selector).jqFunc(params);// 这里就是jQuery函数经常出现的地方});</script></head><body><button type="button" class="mClass" id="bt1">Click me</button></body></html>
其中selector是元素选择器，实现选定指定的页面元素： $(this) 选取当前的 HTML 元素；$("p") 选取 <p> 元素；$("p.intro") 选取所有 class="intro" 的 <p> 元素；$("p#demo") 选取所有 id="demo" 的 <p> 元素还有按属性选择的属性选择器：$("[href]") 选取所有带有 href 属性的元素；$("[href=’#’]") 选取所有带有 href 值等于 "#" 的元素；$("[href!=’#’]") 选取所有带有 href 值不等于 "#" 的元素；$("[href$=’.jpg’]") 选取所有 href 值以 ".jpg" 结尾的元素。其它选择器示例：$("ul li:first") 每个 <ul> 的第一个 <li> 元素；$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素；$("[href$=’.jpg’]") 所有带有以 ".jpg" 结尾的属性值的 href 属性。 jqFunc是泛指jQuery的函数，并不存在“jqFunc”这么个函数。params是函数的参数，不同函数对参数的要求不一样。 关于’$’这个符号，它jQuery的简介方式，实际上，所有案例的’$’换成 ‘jQuery’ （注意大小写）也是可以跑得通的。 某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。jQuery 使用名为 noConflict() 的方法来解决该问题。 $.noConflict() 方法会释放会 $ 标识符的控制，这样其他脚本就可以使用$了。例如：var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ （jQuery）符号。 四. jQuery常用函数 jQuery函数（教程里称它们为“事件”，感觉还是挺妥当的，我土人就用函数了）有很多，教程里有详细的说明是案例，就不做搬运工了： 其中，最常用的稍微说下，大家可以着重看看： 1. 隐藏/显示 hide()和show()分别实现选定元素的隐藏和显示功能。这两个函数还可以增加参数，比如hide(2000)，表示在2000毫秒时间里逐渐的隐藏。懒得算时间，，也可以用"slow"/"fast"作为参数，表示慢速或快速的隐藏/显示元素。除了速度，还可以再增加一个参数，比如hide(2000,callback)，这里的callback是一个回调函数，是“在元素隐藏之后，需要调用的函数”。比如隐藏后，想弹出个提示框，或者其它操作，只要合法的函数都可以。 此外，还有一个有趣的函数toggle()，它会让隐藏的元素显示、显示的元素隐藏。参数问题同上。 另外，请大家记住toggle这个单词（单词的翻译是“切换”），后面还有几个函数会包含这个单词。 2. 淡入/淡出 fadeIn()和fadeOut()分别实现选定元素的淡入和淡出功能。这两个和hide/show非常相像，最终结果展现的页面一样，参数处理也一样。不同之处在于hide/show隐藏/显示的效果是从下至上或从右下到左上的慢慢折叠缩小或扩大，而fadeOut/fadeIn的淡出/淡入效果是整体淡化或淡入。 fadeToggle（二次出现），与toggle类似，在淡入、淡出之间切换。参数的处理相同。 此外，淡入淡出还有个方法fadeTo() ，语法：$(selector).fadeTo(speed,opacity,callback);它将一个元素“淡入或淡出到指定的不透明度”，opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间，0-完全透明不可见，1-完全可见），可以简单理解为，为0时相当于fadeOut效果，为1时相当于fadeIn效果。 3. 滑动 slideDown和slideUp： $(selector).slideDown(speed,callback) 用于向下滑动元素，此时会滑动到元素设置的height为止 $(selector).slideUp(speed,callback) 用于向上滑动元素，会将元素收敛起来不显示 参数效果同上面两个。 还有一个slideToggle（三次出现）方法，语法：$(selector).slideToggle(speed,callback);将收敛的元素下滑显示出来，将已显示的元素上滑收敛起来不显示。 这前三类方法的区别大家可以做些demo对比，一目了然。 4. 动画效果 animate函数实现简单的动画效果。语法：$(selector).animate({params},speed,callback); 后两个参数都好理解，一个是空值动画的速度，一个是动画结束后的回调函数。第一个参数是一组CSS属性，就是动画最终要达到的效果。这种效果可以是绝对值，也可以是相对值。 绝对值的写法：{left:’250px’,opacity:’0.5′,height:’150px’,width:’150px’}，动画最终移动到左边距250px，透明度0.5，高度150px，宽度150px；相对值写法：{left:’+=50px’,opacity:’-=0.5′,height:’+=50px’,width:’+=50px’}，动画最终效果，左边距在当前边距值基础上增加50px，透明度在原基础上减0.5，高度在原基础上加50px，宽度增加50px。此外还可以设置参数为toggle（四次出现），实现“从无到有，从有到无”的变化。 五. 节点遍历 这属于选择器相关的一些函数，不多，也很好记： 1. 选择当前元素的祖先节点（向上遍历） $("p").parent();//选中<p>的直接父节点元素；可以带参数，作为过滤条件； $("p").parents();//返回<p>的所有祖先元素，它一路向上直到文档的根元素 (<html>);可以带参数，作为过滤条件； $("p").parentsUntil("ul");//返回<p>的祖先，直到<ul>之前的所有节点，不包括p和ul; 2. 选择当前元素的子孙节点（向下遍历） $("p").children(); 返回<p>元素的所有直接子元素，只会向下一级对 DOM 树进行遍历；children()可以带参数，作为过滤条件； $("div").find("p") 向下查找<div>元素的后代元素，一路向下直到找到<p>元素为止(入参不能为空)；$("div").find("*")表示找div的所有后代元素； 3. 选择当前元素的兄弟节点（同级遍历） siblings() 返回被选元素的所有同胞元素，不包括自己（若自己为另外一个符合条件元素的同胞，则同样会返回）； next() 返回被选元素的下一个同胞元素； nextAll() 返回被选元素的所有跟随的同胞元素； nextUntil(unit) 介于当前选定元素与unit元素之间的所有跟随的同胞元素； prev() 与next效果相反； prevAll() 与nextAll效果相反； prevUntil(unit) 与nextUnitl效果相反； 以上函数都可加入过滤条件对选定的元素进行过滤。 4. 过滤处理 除了通过函数参数的方式进行过滤外，还有一些专门的函数用以判断选中的元素的一些条件。 $("div p").first();// 选取首个 <div> 元素内部的第一个 <p> 元素； $("div p").last(); // 选择最后一个 <div> 元素中的最后一个 <p> 元素； $("p").eq(1); // 选取第二个 <p> 元素（索引号 1）；索引号从 0 开始，因此首个元素的索引号是 0 ； $("p").filter(".intro"); // 返回带有类名 "intro" 的所有 <p> 元素； $("p").not(".intro"); // 返回不带有类名 "intro" 的所有 <p> 元素；
可就是这样，还是有人，期望过多的温暖。
