了解 jQuery
+ 是一个前端类库（方法库，工具库）
=> jQuery 里面 95% 以上都是方法
+ 有人把 js 里面各种 DOM 操作都给你封装好了
jQuery 的中文网站
+ http://jquery.cuishifeng.cn/
jQuery 的使用
+ 分成下载和使用 下载后，在页面里引入一个 jquery.js或jqery.min.js 即可
当 jQuery 文件被引入以后
+ 我们的全局就会多了两个变量
+ jQuery 向全局添加了两个名字
=> $
=> jQuery
+ 这两个名字无任何区别
jQuery 的优点
+无所不能的选择器
+无处不在的隐式迭代
+无与伦比的链式编程
+jQuery 号称全兼容
jQuery 的选择器
+ 选择器就是用来帮我们获取 DOM 元素的方法
$('div') 通过标签名获取元素
$('.box') 通过类名获取元素
$('#box') 通过id名获取元素
还有 $('ul li'), $('ul>li:nth-child(n)')、等等 n可以为数字、odd、even
注：不管使用哪一种选择器，获取到的都是一个元素集合，只有id选择器里面可能有一个元素
特殊选择器
1. :first 获取第一个
2. :last 获取最后一个
3. :eq(n) 获取索引为n的元素
4. :odd 获取所有索引为 奇数 的
5. :even 获取索引为 偶数 的
jQuery 的筛选器
+ 用在 jQuery 选择的元素集合的后面
+ 都是方法，为了对已经选择的元素进行二次筛选
筛选器：
1. first() 筛选出来一个元素集合里面的第一个
2. last() 筛选出来一个元素集合里面的最后一个
3. eq(n) 筛选出来一个元素集合里面索引为 n 的那一个
4. next() 筛选出元素的下一个兄弟元素
5. nextAll()筛选出元素后面的所有兄弟元素
6. nextUntil(选择器)
-如果后无参数，筛选出元素后面的所有兄弟元素
-如果有参数，筛选出元素后面所有的兄弟元素直到选择器元素为止,不包含选择器元素
7. prev() 筛选出元素的上一个兄弟元素
8. prevAll(选择器)筛选出元素的上面的所有兄弟元素
9. prevUntil(选择器)
-如果后无参数，筛选出元素上面的所有兄弟元素
-如果后有参数，筛选出元素上面所有的兄弟元素直到选择器元素为止，不包含选择器元素
10. parent() 拿到元素的父元素
11. parents()拿到所有祖先元素，直到 html 元素
12. parentsUntil(选择器)
-如果后无参数，拿到元素所有祖先元素
-如果后有参数，筛选出元素所有祖先元素直到选择器元素为止，不包含选择器元素
13. children(选择器)
-如果后无参数，筛选出所有子级元素
-如果后有参数，筛选出所有子元素里面符合条件选择器条件的元素
14. siblings(选择器)
-如果后无参数，筛选出所有兄弟元素
-如果后有参数，筛选出所有兄弟元素里面符合条件选择器条件的元素
15. find(选择器)
-在元素集合里面的每一个元素中，查找后代元素
-在一个元素的后代元素中查找对应的选择器的元素
16. index()
-获取到元素的索引位置
-不是元素集合里面的第几个
-找到他是该父元素下的第几个元素
-拿到的是一个数字
jQuery 操作文本内容
+ html()
-一个读写的方法
-不传参数的时候，就是获取元素内部的超文本内容
-获取的时候只能获取元素集合里面的第一个元素的超文本内容
-传一个参数的时候，就是设置元素集合里所有元素内的超文本内容
+ text()
-一个读写的方法
-不传参数的时候，就是获取元素集合内所有内部的文本内容
-传一个参数的时候，就是设置元素集合里所有元素内的文本内容
+ val()
-一个读写的方法，操作 Input 标签
-不传参数的时候就是获取元素集合里面第一个标签的 value 值
-传一个参数的时候就是设置所有元素集合里面的标签的 value 值
jQuery 操作元素类名
+ addClass() 添加类名
+ removeClass() 移除类名
+ toggleClass() 切换类名（有就删，无就加）
+ hasClass() 判断有没有某一个类名
jQuery 操作元素属性
+ attr()
-是一个读写的方法
-attr(要读取得属性名)：传递一个参数得时候是读取
-attr(属性名，属性值)：传递两个参数得时候就是设置
-只获取元素集合内第一个元素的属性
+ removeAttr()
-专门用来移除属性的，针对元素集合内所有元素
注：所有属性都会显示在标签上（原生属性和自定义属性），不管属性值是什么类型，都会变为字符串
+ prop() 和 removeProp() 同 attr 的一套方法，使用方式一样
注：设置的时候，原生属性会显示在标签上，非原生属性，不会显示在标签上，会存储在DOM对象身上。
存储的是什么数据类型，获取到就是什么数据类型
无法删除原生属性,如:(id，class，style)
+ data()
- 一个读写的方法
- 创建的是自定义属性
-传一个参数是读取，两参数是设置
+ removeData()
- 删除 data 设置的属性
注： 和元素的元素属性没有关系，就是在元素身上开辟一个地方，存储一些数据，不会显示在标签上
存储的是什么类型，拿到的就是什么类型
jQuery 操作元素样式
+ css()
- 一个读写的属性
- 不同的操作需要不同的参数
- css(要获取的样式名)
=> 获取元素样式，行内和非行内都能获取
- css(样式名，样式值)
=> 设置元素的样式
=> 值得位置如果不带单位，默认为 px
- css({
样式名：样式值，
样式名：样式值，
...
})
=> 批量设置元素的样式
jQuery 绑定事件
+ 给元素绑定一个事件
+ on() 方法是专门用来绑定事件的
=> jQuery 里面通用的事件绑定方式
=> 通过传递不同的参数来达到不同的效果
on 方法的各种参数描述
1. on('事件类型'，事件处理函数)
=> 给元素集合内所有元素绑定一个事件
2. on('事件类型'，'事件委托'，事件处理函数)
=> 把 事件委托 位置的元素的事件 委托给了前面的元素集合
3. on('事件类型'，'复杂数据类型'，事件处理函数)
=> 给每一个元素绑定一个事件，复杂数据类型是触发事件的时候传递的参数，在事件对象里面获取（e）
4. on('事件类型'，'事件委托','任意数据类型'，事件处理函数)
=> 做一个事件委托的形式，第三个参数位置的数据，是触发事件的时候，可以传递进去的数据
5. on(对象)
=> 给一个函数绑定多个事件的方式
+ one() 方法是专门通过绑定一个只能执行一次的方法
=> 传递的参数个数和意义和 on 方法一模一样
=> 绑定上的事件只能执行一次
+ off() 方法是专门用来解绑一个元素事件的
=> 有两种使用方式
=> off('事件类型') 给该事件类型所有事件处理函数解绑
=> off('事件类型',事件处理函数名) 解绑指定事件处理函数
=> on 和 one 绑定的事件都可以移除
+ trigger() 方法是专门用来触发事件的方法
=> 不通过点击，通过代码就能把事件触发了
=> trigger('事件类型') 把该元素的事件给触发了
+ 常用事件
=> jQuery 把一些常用的事件直接做成了函数，如：click,mouseover,... ,直接使用就可以了
=> 使用click举一个例子
- click(事件处理函数)
- click(参数，事件处理函数) 参数：触发事件时传入事件对象里面的数据
+ hover()
=> jQuery 里面唯一一个很特殊的事件，表示一个鼠标悬停的动作
=> hover(鼠标移入的时候触发，鼠标移出的时候触发) 如果只写一个函数参数，那么这两次都会触发这个函数
jQuery 的节点操作
+ 创建节点 对应原生js中createElement()
+ 只有一个方法
+ $() 或 jQuery()
-() 里面传递一个 html 格式文本的时候就是创建节点（DOM 元素）
-() 里面传递一个选择器的时候，就是获取页面中的 DOM 元素
+ 插入节点 对应原生js中appendChild()
+ 内部插入(父子关系)
1. append()
=> 页面元素.append(要插入的元素)
=> 放在页面元素的子元素位置，放在末尾
2. appendTo()
=> 要插入元素.append(页面元素)
=> 跟上面append()用法相同，只是主语不同
3. prepend()
=> 页面元素.prepend(要插入的元素)
=> 放在页面元素的子元素位置，放在最前
4. perpendTo()
=> 要插入元素.prepend(页面元素)
=> 跟上面prepend()用法相同，只是主语不同
+ 外部插入(兄弟关系)
1. after()
=> 页面元素.after(要插入的元素)
=> 放在页面元素的下一个兄弟元素位置
2. insertAfter()
=> 要插入元素.insertAfter(页面元素)
=> 跟上面after()用法相同，只是主语不同
3. before()
=> 页面元素.before(要插入的元素)
=> 放在页面元素的上一个兄弟元素位置
4. insertBefore()
=> 要插入元素.insertBefore(页面元素)
=> 跟上面before()用法相同，只是主语不同
+ 删除节点 对应原生js中removeChild()
1. empty() 空
=> 页面元素.empty()
=> 把页面元素变成一个空标签
2. remove() 移除
=> 删除自己
+ 替换节点 对应原生js中replaceChild()
- 把页面中某一个节点替换成其他节点
1. replaceWith()
=> 页面元素.replaceWith(替换元素)
=> 用替换元素把页面元素替换掉
2. replaceAll()
=> 替换元素.replaceAll(页面元素)
=> 和replaceWith()用法一样，只是换了主语
+ 克隆节点 对应原生js中cloneNode()
- 复制一份一模一样的元素
1.clone()
=> 专门用来克隆节点的
=> 页面元素.clone()
=> 返回值：就是克隆出来的元素结合，集合里面有一个元素，就是克隆好的节点
=> 会克隆子节点
=> 接收两个参数
- clone(布尔值，布尔值)
- 第一个参数：默认值是 false，表示是否克隆元素的事件
- 第二个参数：默认值是 false，表示是否克隆子节点的事件
-注：当第一个参数为false时，第二个参数没有意义
jQuery 获取元素尺寸
+ 尺寸：元素占地面积
1. width() 和 height()
=> 获取元素的 content 区域的尺寸，不管盒模型如何
2. innerWidth() 和 innerHeight()
=> 获取元素的 content + padding 区域的尺寸
3. outerWidth() 和 outerHeight()
=> 获取元素 content + padding + border 区域的尺寸
4. outerWidth(true) 和 outerHeight(true)
=> 获取元素 content + padding + border + margin 区域的尺寸
jQuery 获取元素位置
- 获取元素相对于谁的位置关系
1. offset() 偏移量
=> 是一个读写得属性
=> 读取
-> 不传递参数就是读取
-> 读到的元素相对于页面的位置关系
-> 返回值是一个对象 {left:xxx,top:xxx}
=> 写入
-> 传递一个对象就是写入 {left:xxx,top:xxx}
-> 绝对写入（不管原来位置如何，以修改后的为标准）
2. position() 定位
=> 只读的方法
-元素相对于定位父级的位置关系
-得到的也是一个对象 {left:xxx,top:xxx}
jQuery 获取卷去的尺寸
+ scrollTop()
=> 原生 js 里面 document.documentElement.scrollTop
=> 读写的方法
=> 不传递参数的时候就是设置卷去的高度
=> 传递一个参数的时候就是设置卷去的高度
+ scrollLeft()
=> 原生 js 里面 document.documentElement.scrollLeft
=> 读写的方法
=> 不传递参数的时候就是设置卷去的宽度
=> 传递一个参数的时候就是设置卷去的宽度
注：设置的时候不会滚动回去而是直接跳回到设置的高度（宽度）
jQuery 的方法
+ ready 的方法
-类似于 window.onload 事件
-> 会在页面所有资源加载完毕后执行
-ready()
-> 会在页面 html 结构加载完毕后执行
-也叫做jQuery 的入口函数
-有一个简写函数
-> $(function(){})
+ each() 方法
-类似于 forEach() 方法
-jQuery 的元素集合，是一个 jQuery 数组，不是 数组，不能用数组的各种方法
jQuery 里面的动画 -> (都为元素集合的方法)
+ 让元素出现不同的移动，改变
=> transition 过渡动画
=> animation 帧动画
+ 标准动画
- 参数全都是选填
1. show() 显示
=> 语法：show(时间，运动曲线，运动结束的函数)
2. hide() 隐藏
=> 语法：hide(时间，运动曲线，运动结束的函数)
2. toggle() 切换（如果是显示就隐藏，如果是隐藏就显示）
=> 语法：toggle(时间，运动曲线，运动结束的函数)
+ 折叠动画
- 参数全都是选填
1. slideDown() 下滑显示
=> 语法：slideDown(时间，运动曲线，运动结束的函数)
2. slideUp() 上滑隐藏
=> 语法：slideUp(时间，运动曲线，运动结束的函数)
3. slideToggle() 切换滑动显示和隐藏
=> 语法：slideToggle(时间，运动曲线，运动结束的函数)
+ 渐隐渐显动画
- 前三个语法同上，参数都有默认值
1. fadeIn() 渐渐的显示
2. fadeOut() 渐渐的消失
3. fadeToggle() 渐渐的切换显示和消失
4. fadeTo()
=> 语法：slideToggle(时间，指定透明度（eg:0.6)，运动曲线，运动结束的函数)
+ 综合动画
1. animate()
=> 基本上大部分的css样式都可以动画
=> transform 不行，颜色不行
=> 语法：animate({},时间，运动曲线，运动结束函数)
- {}里面就是你要运动的css样式，例如 height,left,borderRadius
+ 停止动画
-让当前的动画结束
-因为jQuery的动画你一直点，他就一直触发，如果你点击10次，它就会执行10次，直至10次全部完毕才结束
1. stop() 运动到哪里，停止到哪里
2. finish() 运动到哪里，停止到动画完成的位置