jQuery
jQuery是一个优秀的JavaScript框架,轻量级的JS库，封装了JS、CSS、DOM。
方便处理HTML、Event、实现动画效果，方便为网站提供AJAX交互。
使用户的HTML页面保持代码和HTML页面分离。
轻量级：侵入性低 耦合度低
重量级：侵入性高 耦合度高
jQuery使用步骤：
1.引用jQuery
2.使用jQuery选择器定位节点
3.调用jQuery方法操作节点
jQuery对象： 即：jQuery选择器选择的对象
本质是一个DOM对象数组;所以可以使用数组方法：jQuery对象.length .get(index) [index]
jQuery方法都是针对jQuery对象特有的，大部分方法的返回值类型也是jQuery对象，所有方法可以连缀调用方法
如：jQuery对象.f1().f2().f3()......
要使用jQuery中的API方法，必须先将DOM对象转换成jQuery对象：$(DOM对象);
jQuery选择器：定位元素，选择方法
基本选择器：$("标签名"/".class属性名"/"#id"/"#id,improtant"（选择器组）);
层次选择器:
$("select1 select2") 1下所有满足2的 子孙 元素
$("select1 > select2") 1下所有满足2的 子 元素
$("select1 + select2") 1下所有满足2的 下一个弟弟 元素
$("select1 ~ select2") 1下所有满足2的 所有弟弟 元素
过滤选择器:
first 选择第一个 last 选择最后一个 （如 $("table tr:first); ）
not(selector) 把selector排除外
even 挑选偶数行 odd挑选奇数行（按元素索引确定奇偶，从0开始）
eq(index) 下标等于index的元素 gt(index) 下标大于index的元素 lt(index) 下标小于index的元素 （如选中第二行 $("table tr:eq(2));）
contains(text) 匹配包含给定文本的元素 （如 $("p:contains('月饼')") 文字内容要用单引号包括！！）
可见元素过滤器：
empty 匹配所有不包含子元素或文本的空元素
hidden 匹配所有不可见元素
visible 匹配所有可见元素
属性元素过滤器：
[attribute] 匹配所有具有attribute属性的元素 （如获取带id的div $("div[id]") ）
[attribute=value] 匹配所有属性值等于value的元素
[attribute！=value] 匹配所有属性值不等于value的元素
状态过滤选择器
enabled 匹配可用的元素
disabled 匹配不可用的元素
checked 匹配选中的checkbox （如： $("input:checked") ）
selected 匹配选中的option （如： $("option:selected"); ）
表单选择器
:text文本框 :password密码框 :radio单选框 :checkbox多选框 :submit提交按钮
:reset重置按钮 :button普通按钮 :file文件框 :hidden隐藏框
jQuery操作DOM
读写节点：
obj.html() 读写节点的HTML内容（带标签格式）
obj.text()/obj.text("") 读写节点的文本内容
obj.val()/obj.val("")读写节点的value属性值
obj.attr("属性名")/obj.val("属性名","属性值")读写节点的任意属性值
创建节点：$("元素内容");
添加节点：
$("a").prepend("b") b添加到a元素中最前
$("a").append("b") b添加到a元素中最后
$("a").before("b") b添加到a元素之前
$("a").after("b") b添加到a元素之后
删除节点：
obj.remove() 删除节点
obj.remove(selector) 只删除满足selector的节点
obj.empty() 清空节点
jQuery样式操作
addClass(" "); 追加样式
removeClass(" "); 移除指定样式 ,若不指定则移除所有样式
toggleClass(" "); 切换样式 ，没有就加上，有就移除
hasClass(" "); 判断是否有指定样式，返回布尔值
遍历节点
children() 直接子节点
next() 下一个兄弟节点
prev() 上一个兄弟节点
siblings() 所有兄弟节点
find(selector) 查满足选择器的所有后代
parent() 父节点
jQuery事件处理
$obj.bind('click',fn);/$obj.click(fn); （click代表单机事件，fn代表函数）
获得事件event对象只需传递一个参数：$obj.click(function(e){....)); e就是event对象,已经过封装适合各浏览器
获取事件源：e.target 获取事件对象坐标：e.pageX e.pageY （此处若要使用e.target调用方法，需$(e.target)）
jQuery处理时间机制：冒泡机制
子节点产生的时间会一次向上抛给父节点。
e.stopPropagation() 取消事件冒泡机制
jQuery合成事件
hover（mouseenter,mouseleave) 光标悬停事件 （进入特效,离开特效）
toggle() 在多个事件响应切换 （显示与隐藏）
电脑模拟操作事件
$obj.trigger(事件类型)
如：$obj.triger("focus")/$obj.focus();
jQuery动画
1.隐藏/显示 show()/hide()
如：$obj.show(执行时间,动画完毕后执行的函数)
2.上下滑动 slideDown()/slideUp
用法同上
3.淡入淡出式动画 fadeIn()/fadeOut()
用法同上
4.自定义动画
移动位置：
animate(偏移起始位置，执行时间，回调函数）（回调函数选择写）
（若移动图片则需预先将图片定位，改变流定位默认模式， 在样式中将图片设置为相对定位：position：relative）
如：$("div").click(function(){
$(this).animate({'left':500px'},4000);
$(this).animate({'top':300px'},2000);
});
元素变形：
如：$("div").animate({"height":"300px"},2000).animate({"width":"300px"},2000);
//each()是jQuery封装的遍历方法
//含义是每次循环都执行each（）里的function（）
$(emps).each(function(){});
jQuery是一个优秀的JavaScript框架,轻量级的JS库，封装了JS、CSS、DOM。
方便处理HTML、Event、实现动画效果，方便为网站提供AJAX交互。
使用户的HTML页面保持代码和HTML页面分离。
轻量级：侵入性低 耦合度低
重量级：侵入性高 耦合度高
jQuery使用步骤：
1.引用jQuery
2.使用jQuery选择器定位节点
3.调用jQuery方法操作节点
jQuery对象： 即：jQuery选择器选择的对象
本质是一个DOM对象数组;所以可以使用数组方法：jQuery对象.length .get(index) [index]
jQuery方法都是针对jQuery对象特有的，大部分方法的返回值类型也是jQuery对象，所有方法可以连缀调用方法
如：jQuery对象.f1().f2().f3()......
要使用jQuery中的API方法，必须先将DOM对象转换成jQuery对象：$(DOM对象);
jQuery选择器：定位元素，选择方法
基本选择器：$("标签名"/".class属性名"/"#id"/"#id,improtant"（选择器组）);
层次选择器:
$("select1 select2") 1下所有满足2的 子孙 元素
$("select1 > select2") 1下所有满足2的 子 元素
$("select1 + select2") 1下所有满足2的 下一个弟弟 元素
$("select1 ~ select2") 1下所有满足2的 所有弟弟 元素
过滤选择器:
first 选择第一个 last 选择最后一个 （如 $("table tr:first); ）
not(selector) 把selector排除外
even 挑选偶数行 odd挑选奇数行（按元素索引确定奇偶，从0开始）
eq(index) 下标等于index的元素 gt(index) 下标大于index的元素 lt(index) 下标小于index的元素 （如选中第二行 $("table tr:eq(2));）
contains(text) 匹配包含给定文本的元素 （如 $("p:contains('月饼')") 文字内容要用单引号包括！！）
可见元素过滤器：
empty 匹配所有不包含子元素或文本的空元素
hidden 匹配所有不可见元素
visible 匹配所有可见元素
属性元素过滤器：
[attribute] 匹配所有具有attribute属性的元素 （如获取带id的div $("div[id]") ）
[attribute=value] 匹配所有属性值等于value的元素
[attribute！=value] 匹配所有属性值不等于value的元素
状态过滤选择器
enabled 匹配可用的元素
disabled 匹配不可用的元素
checked 匹配选中的checkbox （如： $("input:checked") ）
selected 匹配选中的option （如： $("option:selected"); ）
表单选择器
:text文本框 :password密码框 :radio单选框 :checkbox多选框 :submit提交按钮
:reset重置按钮 :button普通按钮 :file文件框 :hidden隐藏框
jQuery操作DOM
读写节点：
obj.html() 读写节点的HTML内容（带标签格式）
obj.text()/obj.text("") 读写节点的文本内容
obj.val()/obj.val("")读写节点的value属性值
obj.attr("属性名")/obj.val("属性名","属性值")读写节点的任意属性值
创建节点：$("元素内容");
添加节点：
$("a").prepend("b") b添加到a元素中最前
$("a").append("b") b添加到a元素中最后
$("a").before("b") b添加到a元素之前
$("a").after("b") b添加到a元素之后
删除节点：
obj.remove() 删除节点
obj.remove(selector) 只删除满足selector的节点
obj.empty() 清空节点
jQuery样式操作
addClass(" "); 追加样式
removeClass(" "); 移除指定样式 ,若不指定则移除所有样式
toggleClass(" "); 切换样式 ，没有就加上，有就移除
hasClass(" "); 判断是否有指定样式，返回布尔值
遍历节点
children() 直接子节点
next() 下一个兄弟节点
prev() 上一个兄弟节点
siblings() 所有兄弟节点
find(selector) 查满足选择器的所有后代
parent() 父节点
jQuery事件处理
$obj.bind('click',fn);/$obj.click(fn); （click代表单机事件，fn代表函数）
获得事件event对象只需传递一个参数：$obj.click(function(e){....)); e就是event对象,已经过封装适合各浏览器
获取事件源：e.target 获取事件对象坐标：e.pageX e.pageY （此处若要使用e.target调用方法，需$(e.target)）
jQuery处理时间机制：冒泡机制
子节点产生的时间会一次向上抛给父节点。
e.stopPropagation() 取消事件冒泡机制
jQuery合成事件
hover（mouseenter,mouseleave) 光标悬停事件 （进入特效,离开特效）
toggle() 在多个事件响应切换 （显示与隐藏）
电脑模拟操作事件
$obj.trigger(事件类型)
如：$obj.triger("focus")/$obj.focus();
jQuery动画
1.隐藏/显示 show()/hide()
如：$obj.show(执行时间,动画完毕后执行的函数)
2.上下滑动 slideDown()/slideUp
用法同上
3.淡入淡出式动画 fadeIn()/fadeOut()
用法同上
4.自定义动画
移动位置：
animate(偏移起始位置，执行时间，回调函数）（回调函数选择写）
（若移动图片则需预先将图片定位，改变流定位默认模式， 在样式中将图片设置为相对定位：position：relative）
如：$("div").click(function(){
$(this).animate({'left':500px'},4000);
$(this).animate({'top':300px'},2000);
});
元素变形：
如：$("div").animate({"height":"300px"},2000).animate({"width":"300px"},2000);
//each()是jQuery封装的遍历方法
//含义是每次循环都执行each（）里的function（）
$(emps).each(function(){});