JQuery学习总结
1. 什么是jQuery?
jQuery是一个优秀的JavaScript框架，一个轻量级的JavaScript库。
特点：1>兼容各种浏览器版本（除了jQuery2以上不再支持IE6,7,8以外）。
2>使用户更方便的处理HTML,Events,实现动画效果，并且方便的为网站提供AJAX交互。
3>使用户的HTML页面保持代码和HTML内容分离。
2. jQuery的编程步骤：
引入文件-->定位节点-->操作节点
1> 引入jQuery的 xx.js文件
2> 利用jQuery选择器定位节点
3> 调用jQuery API操作节点
3. jQuery选择器的分类（四大类）
1> 基本选择器
2> 层次选择器
3> 过滤选择器（重点）
4> 表单选择器
1> 基本选择器（类似于css选择器）
(1) #id （id选择器）（*）
特点：最快，尽量使用id选择器
用法：$("#d1")
(2) .class （类选择器）（*）
特点：根据class元素定位元素
用法：$(".s1")
(3) element （元素选择器）（*）
特点：依据HTML标记来区分
用法：$("div")
(4) selector1, selector2, ......selectorN （合并选择器）
用法：$("div , p , input , .s1")
(5) * （用于选择所有页面元素，很少使用）
用法：$("*")
2> 层次选择器
(1) Select1 空格 Select2 选择子孙
(2) Select1 > Select2 选择儿子
(3) Select1 + Select2 选择下一个弟弟
(4) Select1 ~ Select2 选择所有弟弟
3> 过滤选择器（过滤选择器以：或 [ ] 开始）
(1) 基本过滤选择器(重点,掌握)
<1>： first 选择第一个元素
<2> ：last 选择最后一个元素
<3> ：not(selector) 把selector排除在外
<4> ： even 挑选偶数行
<5> ：odd 挑选奇数行
<6> ：eq(index) 选择下标等于index的元素
<7> ：gt(index) 选择下标大于index的元素
<8> ：lt(index) 选择下标小于index的元素
(2) 内容过滤选择器
<1> ：contains(text) 匹配包含文本的元素
<2> ：empty() 匹配所有不包含子元素或文本的空元素
<3> ：has(selector) 匹配含有选择器所匹配的元素
<4> ：parent 匹配含有子元素或文本的元素
(3) 可见性过滤选择器
<1> ：hidden 匹配所有不可见元素或type为hidden的元素
<2> ：visible 匹配所有可见元素
(4) 属性过滤选择器
<1> [attribute] 匹配具有attribute属性的元素
<2> [attribute=value] 匹配属性等于value的元素
<3> [attribute!=value] 匹配属性不等于value的元素
(5) 子元素过滤选择器
<1>：nth-child(index/even/odd) 将为每一个父元素匹配子元素（index从1开始）
<2>：eq(index) 匹配一个给定索引值得元素（index从0开始）
(6) 表单对象属性选择器
<1>：enabled 选择所有可用的表单对象
<2>：disabled 选择所有不可用的表单对象
<3>：checked 选择所有被checked的表单对象
<4>：selected 选择所有被selected的表单对象
4> 表单选择器
(1) ：input
(2)：text
(3)：password
(4)：radio
(5)：checkbox
(6)：submit
(7)：image
(8)：reset
(9)：button
(10)：file
(11)：hidden
4. jQuery操作DOM(通过jQuery提供的API)
1>查询/修改节点
(1) html()： 读取/修改节点的HTML内容。
示例：1>读：$("#d1").html(); 2>写：$("#d1").html("<p>要写的内容</p>");
(2) text()：读取/修改节点的文本内容。
示例：1>读：$("#d1").text(); 2>写：$("#d1").text("要写的文本内容");
(3) val()：读取/修改节点的value属性值
示例：1>读：$(":textbox").val(); 2>写：$(":textbox").val("要写的值");
(4) attr()：读取/修改节点的属性
示例：1>读：$("#d1").attr("style"); 2>写：$("#d1").attr("style","color:red");
2>遍历节点
(1) children()/children(selector) 只考虑直接子节点
(2) next()/next(selector) 下一个兄弟节点
(3) prev() 上一个兄弟节点
(4) siblings()/sibling(selector) 其它兄弟节点
(5) find(selector) 查找满足选择器的所有后代
(6) parent() 父节点
注：遍历节点的适用场合：
当我们调用别人的方法得到一个节点后，如果还想要对这个节点的亲戚节点做某些操作，这时我们并不能直接去选择那些节点，我们只能通过当前节点的上述方法遍历它的亲戚节点并对它进行操作。
3>创建、插入、删除节点
(1) 创建DOM节点：
语法：$(html);
示例：var $obj=$("<div>hello</div>");
(2) 插入DOM节点
1> append() 作为最后一个子节点添加进来 $("body").append($obj);
2> prepend() 作为第一个子节点添加进来
3> after() 作为下一个兄弟节点添加进来
4> before() 作为上一个兄弟节点添加进来
(3) 删除DOM节点
1> remove() 移除
2> remove(selector) 按选择器定位后删除
3> empty() 清空节点
(4) 复制DOM节点
1> clone() 复制节点没有行为
2> clone(true) 复制的节点也具有行为（将处理代码块一起复制）
4> 样式操作
(1) attr("class","xxx") 获取和设置样式
(2) addClass("xxx") 追加样式
(3) removeClass("xxx") 移除样式
(4) removeClass() 移除所有样式
(5) toggleClass("xxx") 在有和没有之间切换样式
(6) hasClass("xxx") 判断是否有某个样式
(7) css("xxx") 读取css样式
(8) css("xxx","yyy") 设置css样式
5. jQuery事件处理
1> 使用jQuery实现事件绑定
(1)$obj.bind(事件类型，事件处理函数)
示例：$obj.bind("click",function(){.......});
(2)$obj.click(fn); (简写形式)
示例：$obj.click(function(){......});
2> 获得事件对象event(只需要为事件处理函数传递任意一个参数)
$obj.click(function(e){......});
注：e:就是事件对象，但已经经过jquery对底层事件对象的封装，封装后的事件对象可以方便的兼容各浏览器。
3> 事件对象的常用属性
(1) 获得事件源 var obj=e.target; (e.target经过jQuery封装，已经针对不同浏览器做了处理，我们不需要再区分浏览器。)
(2) 获取鼠标点击的坐标 e.pageX, e.pageY
4>事件冒泡
(1) 什么是冒泡？
子节点产生的事件会依次向上抛给父节点
(2) 如何取消事件冒泡？
通过e.stopPropagation() 可以取消事件冒泡 （jQuery已经帮我们做了封装，我们不需要再区分不同的浏览器。）
5>合成事件
(1) hover(mouseenter,mouseleave):模拟光标悬停事件
(2) toggle(): 可以让图片在显示与隐藏之间切换
6> 模拟操作
语法：$obj.trigger(事件类型);
示例：$obj.trigger("focus"); //可以简写为 $obj.focus();
6. jQuery增强操作
1>jQuery动画（实际上动画效果会另起一个支线程来执行，并不影响主线程继续向下执行）
(1) 显示，隐藏的动画效果
show()/hide()
作用：通过同时改变元素的宽度和高度来实现显示或隐藏
用法：$obj.show(执行时间，[回调函数])；
说明：执行时间：slow/normal/fast/毫秒数
回调函数：动画执行完毕之后要执行的函数
(2) 上下滑动的动画效果
slideDown()/slideUp()
作用：通过改变高度来实现显示或隐藏的效果
(3) 淡入淡出的动画效果
fadeIn()/fadeOut()
作用：通过改变不透明读opacity来实现显示或隐藏的效果
(4) 自定义动画效果（设置相对/绝对/固定定位，才能做出动画效果，动画就是连续改变元素的偏移量）
animate(偏移位置，执行时间，回调函数)
说明：偏移位置：描述动画执行后元素的样式
执行时间：毫秒数
回调函数：动画执行结束后要执行的函数
7. jQuery对ajax的支持
1>$.ajax()方法
用法：$.ajax({......})
说明：{ }是一个用来描述请求选项参数的对象。
常用的选项参数有如下几个：
(1) url:请求地址
(2) data:请求参数（有两种格式）
1>请求字符串 "name=Tom&age=10"
2>对象 {"name":"Tom","age":10}
(3) type:请求的类型（get/post）
(4) dataType: 服务器返回的数据类型
1> text: 文本数据
2> json: json字符串
3> html
4> xml
5> JavaScriptJ脚本
(5) success:事件处理函数
当服务器处理正常时，用来处理服务器返回的数据。
(6) error: 事件处理函数
当服务器处理异常时，用来处理服务器返回的数据。
示例：
$.ajax({
"url":"login.form",
"type":"post",
"dataType":"json",
"success": function(arrJson){
......
},
"error": function(){
......
}
});
2>load()
(1) 作用：向服务器发送异步请求，然后将服务器返回的数据直接添加到符合要求的节点之上。
(2) 用法：$obj.load(url,[data]);
注：url:请求地址
data:可选项，表示请求参数（格式和$.ajax()的data参数一样）
