一. 一些废话
一直做的是后台编码。前端设计还停留在JavaScript的post、get阶段。
之前不止一次想系统的看一下jQuery。结果不是由于工作打断，就是由于没找到合适的教程而无心看下去。倒不是说没有好教材，仅仅怪自己看到太过具体或者篇幅太多的教材，就有点发憷。玻璃心啊，玻璃心。。
这次无意间搜到的教程是w3School的，每一篇都不多。还有在线案例供大家调试，非常适合刚開始学习的人学习使用。
花了几天的时间把jQuery这块的看完了。做个小结吧。
二. jQuery导入
jQuery是一个javaScript库。它将一些前端经常使用效果的实现语法。用比較简单、直观、语法通用的方式整合起来，这样，我们就能够不用为了一个简单的前端效果，编写非常多前端代码了。jQuery的引入也比較简单，能够在
http://jquery.com/download/ 中下载所需版本号的jQuery，然后放到自己的project里。再在前端页面代码中使用<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"></script> 或者 <script
type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script> ，或 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
第一个是Google的CDN，后两个是微软的CND。
自从“股沟离开了中国”后，Google的CND普通情况下在国内连不上。或者你能有办法连上，可是无法保证用你系统的人连得上，所以建议还是用本地方式或者微软的CDN。至于使用CDN的优点。援引w3school的说明：用户在訪问其它网站时，可能已经从谷歌或微软载入过 jQuery。
当他们訪问您的网站时。会从缓存中载入 jQuery，这样能够降低载入时间。
同一时候。大多数 CDN 都能够确保当用户向其请求文件时。会从离用户近期的server上返回响应，这样也能够提高载入速度。
三. 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','150px'}。动画终于移动到左边距250px，透明度0.5，高度150px。宽度150px；相对值写法：{left:'+=50px',opacity:'-=0.5',height:'+=50px','+=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实现。感觉easy多了。
语法：$(selector).load(URL,data,callback);
url (String) : 请求的HTML页的URL地址。
data (Map) : (可选參数) 发送至server的 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 + "
Status: " + 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 + "
Status: " + status);
});
});
这几个都是异步请求，load是将内容载入到选定元素的位置处。get是发送get请求。post是发送post请求（有点像废话）。它们底层都是由$.ajax([settings])实现的。
七. 入门结束
至此。jQuery的入门就差点儿相同了。剩下的就是各种练习+实战了。等成了“熟练工”，再去钻研下jQuery的高级使用方法。应该不会“发憷”啦！