1、jQuery概述
1.1、什么是jQuery？
- JavaScript库：封装了很多js代码
- 官方地址：http://jquery.com/
1.2、jQuery的概念
jQuery是一个快速、简介的JavaScript库，把js里的DOM操作做了封装，我们可以快速的查询使用里面的功能。
- 哪些情况下用？
- 中大型网站开发
- 是一些前端框架的基础，比如Easyui，Bootstrap
怎么用？
使用步骤：
1、到官网下载jQuery库
2、引入：将js文件复制到项目中
3、使用：使用script标签中的src属性
2、jQuery选择器
1、基本选择器
ID选择器：
<script>
$("#id")
</script>类选择器：
<script>
$(".class")
</script>元素选择器：
<script>
$("标签名")
</script>通配符：
<script>
$("*")
</script>案例：分别使用基本选择器、改变元素的背景颜色和字体颜色(div、p、span)
2、层次选择器
子代选择器：>
后代选择器：空格
3、过滤选择器
参考jQuery文档：
| 方法 | 作用 |
| first | 获取第一个元素 |
| last | 获取最后一个元素 |
| even | 获取偶数下标的元素 |
| odd | 获取奇数下标的元素 |
| :gt | 获取大于多少下标的元素 |
| :lt | 获取小于多少下标的元素 |
案例：使用过滤选择器，选择li中的元素
案例：表格隔行换色
4、表单选择器
| 方法 | 作用 |
| input | 获取表单中的所有：input、button、select |
| :checked | 获取表单选中的复选框 |
| :checkbox | 获取所有复选框 |
| :select | 获取下拉框的值 |
可以参考jquery的api中文文档
案例：获取表单的中的单选、多选、下拉框的值
3、工具方法
| 方法 | 作用 |
| $.each() | 遍历数组 |
| $.trim() | 去除字符串两边的空格 |
| $.type(obj) | 得到数据类型 |
| $.isArray() | 判断是否是数组 |
| $.isFunction() | 判断是否是函数 |
$.parseJSON(obj) |
解析JSON字符串转换为js对象/数组 |
| JSON.stringify() | 将js对象转换为JSON字符串 |
4、jQuery属性和css
1、属性
| 方法 | 作用 |
| attr() | 获取某个标签属性的值，或设置某个标签属性的值 |
| removeAttr() | 删除某个标签属性 |
| addClass() | 给某个标签添加class属性值 |
| removeClass() | 删除某个标签class属性 |
| prop() | 和attr()类似，区别在于prop用于属性值为Boolean类型的情况，比如多选 |
| html() | 获取某一个标签体内容（注意：该标签中可以包含子标签），相当于js中的innerHTML |
| text() | 获取某一个标签体内容（注意：该标签体不能包含子标签） |
| val() | 主要用户获取/设置输入框的值 |
案例1：演示jQuery属性所有方法
案例2：使用jQuery属性方式优化表格隔行换色
案例3：实现购物车多 选/取消多选操作
2、CSS
1、css()：设置标签css样式
- 获取样式值：css("样式名")
- 设置单个样式：css("样式名","样式值")
- 设置多个样式：css({"样式名":"样式值","样式名","样式值"})
2、位置
- offset()：相当于整个大容器的相对位置
- position：相对于父容器的相对位置
案例：大div中嵌套小div，求两个div相对位置
- scrollTop()：滚动条到顶部距离
案例：滚动条位置
3、尺寸
内容尺寸
width()：容器宽
height()：容器高
内部尺寸
innerWidth()：width+padding
innerHeight()：height+padding
外部尺寸
outerWidth()：width+padding+border
outerHeight()：height+padding+border
5、筛选
1、过滤
| 方法 | 作用 |
| first() | 获取匹配的第一个元素 |
| last() | 获取匹配的最后一个元素 |
| eq(N) | 获取匹配的第N或-N个元素 |
| filter() | 筛选出与指定表达式匹配的元素的集合 |
| has() | 筛选出包含特定特点的元素的集合 |
2、查找
| 方法 | 用法 |
| children() | 子标签中找 |
| find() | 后代标签中找 |
| parent() | 父标签 |
| prevAll() | 前面所有的兄弟标签 |
| nextAll() | 后面所有的兄弟标签 |
| siblings() | 前后所有的兄弟标签 |
6、文档处理
1、增
内部插入
| 方法 | 作用 |
| append() | 将内容添加到指定的元素后面 |
| appendTo() | 和append()颠倒 |
| prepend() | 将内容添加到指定元素前面 |
| prependTo() | 和prepend()颠倒 |
外部插入
| 方法 | 作用 |
| after() | 在匹配元素之后插入内容 |
| before() | 在匹配元素之前插入内容 |
2、删
| 方法 | 作用 |
| empty() | 删除匹配的元素集合中所有的子节点（不包含匹配的元素） |
| remove() | 删除匹配的元素集合中所有的子节点（包含匹配的元素） |
3、改
replaceWith()：将所有匹配的元素替换成指定的内容
7、事件
1、加载Dom两种方式
window.onload方式：执行时间，整个网页中的所有内容（包括图片）加载完成后，才会执行
编写个数：1个
<script>
//加载函数
window.onload = function (){
}
</script>jQuery方式：执行时间，网页结构绘制完成后，执行
编写个数：多个
<script>
//jqery方式
$(function (){
})
</script>两个都有的情况下执行顺序：
jQuery3.0：window.onload比jQuery先执行
jQuery1.0和2.0：jQuery比window.onload先执行
2、绑定事件两种方式
- 元素.on("事件名","function(){}")
- 元素.事件名(function(){})
3、合成事件/事件切换
- hover()：鼠标悬停合成事件（不怎么用）
- toggle()：鼠标点击合成事件，点击元素可以控制元素的显示和隐藏
4、事件传播（事件冒泡）
传播：小——>中——>大
阻止传播：事件后面加上return false
5、事件坐标
| 坐标 | 作用 |
| offsetX | 当前元素左上角 |
| clientX | 窗口左上角 |
| pageX | 网页左上角 |
6、移除事件
元素.unbind("事件名")
注意：一般情况下，不会使用unbind，推荐使用变量控制事件
某个元素只使用一次的事件可以使用one()
8、动画效果
1、基本
显示：show(Time)，Time表示显示时间，毫秒
隐藏：hide(Time)，Time表示显示时间，毫秒
切换：toggle(Time)，相当于上面两个合在一起
2、滑动
| 方法 | 作用 |
| slideUp(Time) | 动画收缩（向上滑动）-->隐藏 |
| slideDown(Time) | 动画展开（向下滑动）-->显示 |
| sildeToggle(Time) | 动画切换 |
3、淡入淡出
| 方法 | 作用 |
| fadeIn(Time) | 淡入（透明度减少） |
| fadeOut(Time) | 淡出（透明度增大） |
| fadeToggle(Time) | 切换 |
4、自定义动画
元素：animate({属性:属性值},Time)
缩放：width，height
移动：Top、left
移动本元素距离：top="+="
left="-="