1、jQuery概述
简单理解：就是一个快速、简洁的JavaScript库，为了快速方便的操作DOM，对原生JavaScript进行封装存放。
2、jQuery基本使用
2.1 DOM对象和jQuery对象
用原生JS获取来的对象就是DOM对象jQuery方法获取的元素就是jQuery对象jQuery对象的本质是：利用$对DOM对象包装后产生的对象（伪数组形式存储）
2.2 DOM与jQuery的转换
DOM对象转换为jQuery对象 $(‘选择器’）jQuery对象转换为DOM对象 $(’选择器‘)[index]——index是索引号 $(‘选择器’).get(index)——index是索引号
3、jQuery常用API
3.1 jQuery选择器
1. jQuery基础选择器
格式：$(“选择器”)
名称用法
ID选择器$("#id")：获取指定ID的元素全选选择器$("*")：匹配所有元素类选择器$(".class")：获取同一类class的元素标签选择器$(“div”)：获取同一类标签的所有元素并集选择器$(“div,p,li”)：选取多个元素交集选择器$(“li.current”)：交集元素
2. jQuery层级选择器
名称用法
子代选择器$(“ul>li”)：使用>号，获取亲儿子层级的元素，并不会获取子孙层级的元素后代选择器$(“ul li”)：使用空格，获取ul下的所有li元素，包括子孙层级等
3. 隐式迭代（重点）
理解：把匹配的所有元素内部进行遍历循环（类似for），给每一个元素执行相应的方法。 例如：$(‘div’).css(‘属性’,‘值’)
4. jQuery筛选选择器
语法用法
:first$(“li:first”)：获取第一个li元素:last$(“li:last”)：获取最后一个li元素:eq(index)$(“li:eq(2)”)：获取到的li元素中，选择索引号为2的元素，索引号index从0开始:odd$(“li:odd”)：获取到的li元素中，选择索引号为奇数的元素:even$(“li:even”)：获取到的li元素中，选择索引号为偶数的元素
5. jQuery筛选方法（重点）
语法用法
parent()$(“li”).parent()：查找父级children(selector)$(“ul”).children(“li”)：相当于 $(“ul>li”)，最近一级find(selector)$(“ul”).find(“li”)：相当于 $(“ul li”)，后代选择器siblings(selector)$(".first").siblings(“li”)：查找兄弟节点，不包括自身本身nextAll([expr])$(".first").nextAll()：查找当前元素元素之后所有的同辈元素prevAll([expr])$(".last").prevAll()：查找当前元素之前所i有的同辈元素hasClass(class)$(“div”).hasClass(“protected”)：检查当前的元素是否含有某个特定的类，如果有，则返回trueeq(index)$(“li”).eq(2)：相当于 $(“li:eq(2)”)，index从0开始
3.2 jQuery样式操作
1. 操作css方法
jQuery可以使用css方法来修改简单元素的样式；也可以操作类，修改多个样式。
参数只写属性名，则是返回属性值 例如： $(this).css(“color”);参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号 例如：$(this).css(“color”,“red”);参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号 例如：$(this).css({“color”:“white”,“font-size”:“20px”});
2. 设置类样式方法
作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点。
添加类 例如：$(“div”).addClass(“current”);移除类 例如：$(“div”).removeClass(“current”);切换类 例如：$(“div”).toggleClass(“current”);
3. 类操作与className区别
原生JS中className会覆盖元素原先里面的类名；jQuery里面类操作只是对指定类进行操作，不影响原先的类名。
3.3 jQuery效果
1. 显示隐藏效果
1.1 语法规范
show([speed,[easing],[fn]])：显示hide([speed,[easing],[fn]])：隐藏toggle([speed,[easing],[fn]])：切换
1.2 参数
参数可以省略，无动画直接显示；speed：slow，normal，fast 或者 表示动画时长的毫秒数值(如：1000)；easing：(Optional)用来指定切换效果，默认是“swing”，可用参数“linear”；fn：回调函数，在动画完成时执行的函数，每个元素执行一次。
2. 滑动效果
2.1 语法规范
slideDown([speed,[easing],[fn]])：向下拉slideUp([speed,[easing],[fn]])：向上拉slideToggle([speed,[easing],[fn]])：切换
2.2 动画队列及其停止排队方法
动画或效果队列 动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。停止排队 stop() stop()写在动画或者效果的前面，相当于停止结束上一次的动画。
3. 淡入淡出效果
3.1 语法规范
fadeIn([speed,[easing],[fn]])：淡入fadeOut([speed,[easing],[fn]])：淡出fadeToggle([speed,[easing],[fn]])：切换fadeTo([speed,opacity,[easing],[fn]])：修改透明度opacity(必须写)，取值0~1之间
4. 自定义动画（重点）
4.1 语法
animate(params,[speed],[easing],[fn])
4.2 参数
params：要修改的样式属性，以对象形式传递，必须写。
3.4 jQuery属性
1. 设置或获取元素固有属性值
元素固有属性就是元素本身自带的属性，比如< a>元素里面的href，< input >元素里面的type。
1.1 获取属性语法
prop(“属性”)
1.2 设置属性语法
prop(“属性”，“属性值”)
2. 设置或获取元素自定义属性值 attr()
2.1 获取属性语法
attr(“属性”)，类似原生 getAttribute()
2.2 设置属性语法
attr(“属性”，“属性值”)，类似原生 setAttribute()
3. 数据缓存 data()
3.1 附加数据语法
data(“属性”,“属性值”)，向被选元素附加数据
3.2 获取数据语法
data(“属性”)，向被选元素获取数据 还可以读取HTML5自定义属性 data-index，得到的是数字型
3.5 jQuery文本属性值
1. 普通元素内容html()（相当于原生innerHTML）
html()：获取元素的内容 html(“内容”)：设置元素的内容
2. 普通元素文本内容text()（相当于原生innerText）
text()：获取元素的文本内容 text(“文本内容”)：设置元素的文本内容
3. 表单的值val()（相当于原生value）
val()：获取表单里的值 val(“内容”)：修改表单里的值
3.6 jQuery元素操作
1. 遍历元素
jQuery隐式迭代是对同一类元素做了同样的操作，如果想要给同一类元素做不同的操作，就需要用到遍历。
1.1 语法1
$(“div”).each(function(index，domEle) { xxx;})
each() 方法遍历匹配的每一个元素。主要用DOM处理index 是每一个元素的索引号，demEle 是每个DOM元素对象，不是jQuery 对象，如果要使用jQuery方法，需要给dom元素转换为jQuery对象：$(domEle)
1.2 语法2
$.each(object,function(index,element) {xxx;} )
$.each() 方法可用于白能力任何对象，主要用于数据处理，比如数组，对象；index 是每个元素的索引号，element 遍历内容
2. 创建元素
语法：$("< li>< /li>") 动态的创建一个< li>
3. 添加元素
3.1 内部添加
element.append(“内部”)：把内容放入匹配元素内部最后面，类似原生 appendChild。element.preend(“内容”)：把内容放入匹配元素内部最前面生成之后，是父子关系。
3.2 外部添加
element.after(“内容”)：把内容放入目标元素后面element.before(“内容”)：把内容放在元素前面生成之后，是兄弟关系。
4. 删除元素
element.remove()——删除匹配的元素（本身）element.empty()——删除匹配的元素集合中所有的子节点element.html(" ")——清空匹配的元素内容
3.7 jQuery尺寸、位置操作
1. jQuery尺寸
语法用法
width()/height()只算width / heightinnerWidth()/innerHieght()包含paddingouterWidth()/outerHeight()包含padding、borderouterWidth(true)/outerHeight(true)包含padding、border、margin
2. jQuery位置
位置主要有三个：offset()、position()、scrollTop()/scrollLeft()
offset() 设置或获取元素偏移
设置或返回被选元素相当于文档的偏移坐标，跟父级没有关系可以设置元素的偏移,例如：offset( { top:10,left:30 } );
position()只设置能获取不能设置
返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧
4、jQuery事件
1. jQuery事件注册
语法：element.事件(function() { })
2. jQuery事件处理
1. 事件处理on() 绑定事件
on() 方法在匹配元素上绑定一个或多个事件的事件处理函数。 语法：element.on(events,[selector],fn)
events：一个或多个用空格分隔的事件类型，如"click"或"keydown"； 例如：$(“div”).on({mouseenter:function(){xxx1},click:function(){xxx2}}); $(“div”).on(“mouseenter mouseleave”,function(){xxx});selector：元素的子元素选择器；如果只想事件触发一次，使用one() 绑定事件。
2. 事件解绑off() 解绑事件
语法：element.off() 例如：
$(“div”).off()：解绑div上所有的事件$(“div”).off(“click”)：解绑div上的点击事件$(“ul”).off(“click”,"li”)：解绑事件委托
3. 自动触发事件trigger()
element.click()element.trigger(“type”)element.triggerHandler(type)：不会触发元素的默认行为
3. jQuery事件对象
事件被触发，就会有事件对象的产生。 element.on(events,[selector],function(event) { }) 阻止默认行为：event.preventDefault() 或者 return false 阻止冒泡：event.stopPropagation()
5、jQuery其他方法
1. jQuery拷贝对象
语法：$.extend([deep],target,object1,[objectN])
deep：如果设为true为深拷贝，默认为false 浅拷贝target：要拷贝的目标对象object1：待拷贝到第一个对象的对象浅拷贝是把被拷贝的对象复杂数据类型的地址拷贝给目标对象，修改目标对象会影响被拷贝对象；深拷贝是完全克隆（拷贝的是对象，而不是地址），修改目标对象不会影响被拷贝对象；深拷贝把里面的数据完全复制一份给目标对象，如果里面有不冲突的属性，会合并到一起。
2. 多库共存
如果 $符号冲突
把里面的$符号统一改为jQuery；jQuery变量规定新的名称：$.noConflict()。
3. jQuery插件
jQuery插件常用网站：
jQuery插件库：http://www.jq22.comjQuery之家：http://www.htmleaf.com/
jQuery插件使用步骤：
引入相关文件复制相关html、css、js
