一. 一些废话
一直做的是后台编码，前端设计还停留在JavaScript的post、get阶段。之前不止一次想系统的看一下jQuery，结果不是因为工作打断，就是因为没找到合适的教程而无心看下去。倒不是说没有好教材，只怪自己看到太过详细或者篇幅太多的教材，就有点发憷。玻璃心啊，玻璃心。。
这次无意间搜到的教程是w3School的，每一篇都不多，还有在线案例供大家调试，很适合初学者学习使用。
花了几天的时间把jQuery这块的看完了，做个小结吧。
二. jQuery导入
jQuery是一个javaScript库，它将一些前端常用效果的实现语法，用比较简单、直观、语法通用的方式整合起来，这样，我们就可以不用为了一个简单的前端效果，编写很多前端代码了。jQuery的引入也比较简单，可以在 http://jquery.com/download/ 中下载所需版本的jQuery，然后放到自己的工程里，再在前端页面代码中使用<script type=”text/javascript” src=”jquery.js”></script>语句引入，这样就可以调用jQuery函数了。type=”text/javascript” 这个属性在目前大部分浏览器中可以不加（已验证火狐、谷歌、ie9可以不加）。
不愿意在自己的计算机上存放 jQuery 库，也可以用 <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js”>
三. 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函数（教程里称它们为“事件”，感觉还是挺妥当的，我土人就用函数了）有很多，教程里有详细的说明是案例，就不做搬运工了：http://www.w3school.com.cn/jquery/jquery_ref_events.asp
其中，最常用的稍微说下，大家可以着重看看：
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> 元素；
六. Ajax
之前单独学过两句ajax，被那种浏览器类型判断的语句吓到了，现在看了jQuery的ajax实现，感觉容易多了。
语法：$(selector).load(URL,data,callback);
url (String) : 请求的HTML页的URL地址。
data (Map) : (可选参数) 发送至服务器的 key/value 数据。
callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。
一个load就搞定了。回调函数callback有三个参数：
responseTxt – 包含调用成功时的结果内容
statusTXT – 包含调用的状态
xhr – 包含 XMLHttpRequest 对象
有了这三个参数，对ajax的后续操作就与传统方式统一了：
function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功！");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
} xhr参数有三个属性：status是http返回码，成功时为200；statusText在成功时为OK，失败时可能为空；responseText属性与回调函数的responseTxt入参一致。
除了load，还有get和post两个方法实现异步请求。语法：
$.get(URL,callback);例如：
$("button").click(function(){
$.get("demo_test.asp",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
$.post(URL,data,callback);
$.post(URL,data,callback);例如：
$("button").click(function(){
$.post("demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
这几个都是异步请求，load是将内容加载到选定元素的位置处；get是发送get请求；post是发送post请求（有点像废话）。它们底层都是由$.ajax([settings])实现的。
七. 入门结束
至此，jQuery的入门就差不多了，剩下的就是各种练习+实战了。等成了“熟练工”，再去钻研下jQuery的高级用法，应该不会“发憷”啦！
今天的文章jQuery学习笔记「建议收藏」分享到此就结束了，感谢您的阅读。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：http://bianchenghao.cn/78133.html
