一 jQuery介绍
1.1 什么是jQuery
jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库
jQuery极大的简化了 JavaScript编程
1.2 什么是JS类库
它就是一些函数的集合，就是把特定效果的代码写好，你只需要在用的时候要用很少的代码去调用。
起主导作用的是你的代码，由你来决定何时使用类库
1.3 常见JS类库
jQuery
ExtJS
prototype.js
zepto.js
1.4 jQuery的优势
开源 免费
便捷的选择器
方便的DOM操作
方便的动画特效
易用的ajax操作
丰富的插件扩展
解决浏览器兼容性效果
1.5 jQuery版本
1.x.x的版本是可以 支持 IE6~IE8的
2.x.x到3.x.x 的版本，不在兼容IE8以及以下浏览器
二 jQuery的基本使用
2.1 安装
下载到本地，再引入
下载地址：https://jquery.com/download/
<script src="jquery-3.3.1.min.js"></script> <script> //注意，一定在引入jQuery之后，再使用jQuery提供的各种操作 </script>
2.2 文档就绪事件
$(document).ready(function(){
code...
})
//简写
$(function(){
})
2.3 jQueryDOM和原生DOM
jQuery 通过 $(选择器) 获取元素，该元素对象是jqueryDOM。 与原生DOM不同
jQueryDOM是在原生DOM基础上进行的的封装，本质上是由原生DOM组成的类数组对象，可以 [索引] 得到原生DOM
$(原生DOM) 转为 jQuery DOM
2.4 连贯操作
//对象可以连贯调用
$(dom).find('img').css('border','1px solid #ccc').css('color', 'red').prop('src', '1.jpg').toggle()
三 jQuery 选择器
3.1 基本选择器
同CSS3 基本选择器
#id 根据给定的ID匹配一个元素
element 根据给定的元素标签名匹配所有元素
.class 根据给定的css类名匹配元素。
* 匹配所有元素
selector1,selector2,selectorN 将每一个选择器匹配到的元素合并后一起返回
3.2 层级选择器
同CSS3 层级选择器
ancestor descendant 在给定的祖先元素下匹配所有的后代元素
parent>child 在给定的父元素下匹配所有的子元素
prev+next 匹配所有紧接在 prev 元素后的 next 元素
prev~siblings 匹配 prev 元素之后的所有 siblings 元素
3.3 基本筛选器
:first 获取第一个元素
:not(selector) 去除所有与给定选择器匹配的元素
:even 匹配所有索引值为偶数的元素，从 0 开始计数
:odd 匹配所有索引值为奇数的元素，从 0 开始计数
:eq(index) 匹配一个给定索引值的元素
:gt(index) 匹配所有大于给定索引值的元素
:lang 选择指定语言的所有元素。1.9+
:last 获取最后个元素
:lt(index) 匹配所有小于给定索引值的元素
:header 匹配如 h1, h2, h3之类的标题元素
:animated 匹配所有正在执行动画效果的元素
:focus 匹配当前获取焦点的元素
:root 选择该文档的根元素 1.9+
:target 选择由文档URI的格式化识别码表示的目标元素 1.9
3.4 内容选择器
:contains(text) 包含指定文字的元素
:has(选择器) 包含指定子元素的 元素
:empty 没有子元素也没有内容的 元素
:parent 有子元素或者有内容 的 元素
3.5 可见性选择器
:hidden 匹配所有不可见元素，或者type为hidden的元素
:visible 匹配所有的可见元素
3.6 属性选择器
[attribute] 匹配包含给定属性的元素
[attribute=value] 匹配给定的属性是某个特定值的元素
[attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
[attribute^=value] 匹配给定的属性是以某些值开始的元素
[attribute$=value] 匹配给定的属性是以某些值结尾的元素
[attribute*=value] 匹配给定的属性是以包含某些值的元素
[attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件时使用
3.7 子元素选择器
:first-child 匹配所给选择器( :之前的选择器)的第一个子元素
:first-of-type 结构化伪类，匹配E的父元素的第一个E类型的孩子 1.9+
:last-child 匹配最后一个子元素
:last-of-type 结构化伪类，匹配E的父元素的最后一个E类型的孩子 1.9+
:nth-child() 匹配其父元素下的第N个子或奇偶元素
:nth-last-child() 选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个 1.9+
:nth-last-of-type() 选择的所有他们的父级元素的第n个子元素，计数从最后一个元素到第一个 1.9+
:nth-of-type() 选择同属于一个父元素之下，并且标签名相同的子元素中的第n个 1.9+
:only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配
:only-of-type 选择所有没有兄弟元素，且具有相同的元素名称的元素 1.9+
3.8 表单选择器
:input 匹配所有 input, textarea, select 和 button 元素
:text 匹配所有的单行文本框
:password 匹配所有密码框
:radio 匹配所有单选按钮
:checkbox 匹配所有复选框
:submit 匹配所有提交按钮，匹配 type="submit" 的input或者button
:image 匹配所有图像域
:reset 匹配所有重置按钮
:button 匹配所有按钮
:file 匹配所有文件域
3.9 表单对象选择器
:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配所有选中的被选中元素(复选框、单选框等，select中的option)
:selected 匹配所有选中的option元素
四 jQuery 筛选器
4.1 过滤
eq(index|-index) 获取当前链式操作中第N个jQuery对象，返回jQuery对象
first() 获取第一个元素
last() 获取最后个元素
filter(expr|obj|ele|fn) 筛选出与指定表达式匹配的元素集合。
not(expr|ele|fn) 从匹配元素的集合中删除与指定表达式匹配的元素
has(expr|ele) 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
slice(start,[end]) 选取一个匹配的子集
4.2 查找
查找 子元素
children([selector]) 子元素
find(selector) 后代元素
查找 父元素
parent([selector])
parents([selector])
parentsUntil([selector])
offsetParent()
#兄弟元素
next([selector]) 后面紧邻的兄弟元素
nextAll([selector]) 后面所有的兄弟元素
nextUntil([selector]) 后面兄弟元素 指定结束条件
prev([selector]) 前面紧邻的兄弟元素
prevAll([selector])
prevUntil([selector])
siblings([selector]) 所有的兄弟元素（除了自己）
4.3 串联
add(e|e|h|o[,c]) 1.9* 把与表达式匹配的元素添加到jQuery对象中
andSelf() 1.8- 加入先前所选的加入当前元素中
addBack() 1.9+ 添加堆栈中元素集合到当前集合，一个选择性的过滤选择器。
contents() 查找匹配元素内部所有的子节点（包括文本节点）
end() 回到最近的一个"破坏性"操作之前
五 jQuery DOM操作
5.1 内部插入
append(content|fn) 向每个匹配的元素内部追加内容
appendTo(content) 把所有匹配的元素追加到另一个指定的元素元素集合中
prepend(content|fn) 向每个匹配的元素内部前置内容
prependTo(content) 把所有匹配的元素前置到另一个、指定的元素元素集合中
5.2 外部插入
after(content|fn) 在每个匹配的元素之后插入内容
before(content|fn) 在每个匹配的元素之前插入内容
insertAfter(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的后面
insertBefore(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的前面
5.3 包裹
wrap(html|ele|fn) 把所有匹配的元素用其他元素的结构化标记包裹起来
unwrap() 这个方法将移出元素的父元素
wrapAll(html|ele) 移出元素的父元素
wrapInner(html|ele|fn) 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
5.4 替换
replaceWith(content|fn) 将所有匹配的元素替换成指定的HTML或DOM元素
replaceAll(selector) 用匹配的元素替换掉所有 selector匹配到的元素
5.5 删除
empty() 删除匹配的元素集合中所有的子节点
remove([expr]) 从DOM中删除所有匹配的元素
detach([expr]) 从DOM中删除所有匹配的元素 这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来
5.6 克隆
clone([Even[,deepEven]]) 克隆匹配的DOM元素并且选中这些克隆的副本
六 jQuery 属性操作
6.1 属性
attr(attrName[, value]) 获取属性的值 或者 设置属性的值 内置属性和自定义属性
prop(attrName[, value]) 获取属性的值 或者 设置属性的值 只能用于内置属性
removeAttr(attrName) 从每一个匹配的元素中删除一个属性
removeProp(attrName) 用来删除由.prop（）方法设置的属性集
6.2 类
addClass(class|fn) 为每个匹配的元素添加指定的类名
removeClass([class|fn]) 从所有匹配的元素中删除全部或者指定的类
toggleClass(class|fn[,sw]) 如果存在（不存在）就删除（添加）一个类
hasClass(class) 检查当前的元素是否含有某个特定的类，如果有，则返回true
6.3 文本值
html([html]) 等同于innerHTML 没有参数 就是获取， 有参数就是设置
text([text]) 等同于innerText 获取或者设置
val([val]) 用于表单控件 设置或获取
七 jQuery样式操作
7.1 CSS操作
css('属性', '值')
css('属性')
7.2 元素位置
offset() 相对于视口 可以获取可以设置 返回对象{left: ,top:}
position() 相对于第一个定位的祖先元素，margin减掉。 只能获取
scrollLeft() 控制里面内容的滚动 水平
scrollTop() 控制里面内容的滚动 垂直
7.3 元素尺寸
widht() 取得第一个匹配元素当前计算的宽度值（px）
height() 取得匹配元素当前计算的高度值（px)
innerWidth() 匹配元素内部区域宽度（包括补白、不包括边框）
innerHeight() 匹配元素内部区域高度（包括补白、不包括边框）
outerWidth() 匹配元素外部宽度（默认包括补白和边框）
outerHeight() 匹配元素外部高度（默认包括补白和边框）
八 jQuery事件
8.1 事件的绑定和解除绑定
on(事件名，fn)
off() 解除事件绑定
one(事件名，fn） 仅仅绑定一次
8.2 事件委派
$('.list li').on('click', fn)
$('.list').on('click', 'li', fn)
8.3 特殊事件
ready() 事件 类似于onload
hover() 事件 mouseenter 和 mouseleave 相结合的事件
8.4 事件列表
blur([[data],fn])
change([[data],fn])
click([[data],fn])
dblclick([[data],fn])
error([[data],fn])
focus([[data],fn])
focusin([data],fn)
当元素获得焦点时，触发 focusin 事件。 focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况
focusout([data],fn)
当元素失去焦点时触发 focusout 事件。focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。
keydown([[data],fn])
keypress([[data],fn])
keyup([[data],fn])
mousedown([[data],fn])
mouseenter([[data],fn])
当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。
mouseleave([[data],fn])
当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。
mousemove([[data],fn])
mouseout([[data],fn])
mouseover([[data],fn])
mouseup([[data],fn])
resize([[data],fn])
scroll([[data],fn])
select([[data],fn])
submit([[data],fn])
unload([[data],fn])
8.5 事件对象
属性
offsetX, offsetY 鼠标在本元素上的位置
pageX, pageY 鼠标在页面上的位置坐标
clientX, clientY 鼠标在视口上的位置
which 按键的值(ASCII)或鼠标按键的值 （1，2,3）
target
#方法
stopPropagation() 防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数
preventDefault() 阻止默认事件行为的触发
九 jQuery动画
9.1 基本效果
show([s,[e],[fn]]) 显示隐藏的匹配元素
hide([s,[e],[fn]]) 隐藏显示的元素
toggle([s],[e],[fn]) 如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的
参数详解
speed : 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing : (Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn : 在动画完成时执行的函数，每个元素执行一次。
9.2 滑动效果
slideDown([s],[e],[fn]) 通过高度变化（向下增大）来动态地显示所有匹配的元素
slideUp([s,[e],[fn]]) 通过高度变化（向上减小）来动态地隐藏所有匹配的元素
slideToggle([s],[e],[fn]) 通过高度变化来切换所有匹配元素的可见性
9.3 淡入淡出
fadeIn([s],[e],[fn]) 通过不透明度的变化来实现所有匹配元素的淡入效果
fadeOut([s],[e],[fn]) 通过不透明度的变化来实现所有匹配元素的淡出效果
fadeToggle([s,[e],[fn]]) 通过不透明度的变化来开关所有匹配元素的淡入和淡出效果
fadeTo([[s],o,[e],[fn]]) 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度
9.4 自定义动画
animate(p,[s],[e],[fn])
参数详解
params : 一组包含作为动画属性和终值的样式属性和及其值的集合
speed : 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing : 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
fn : 在动画完成时执行的函数，每个元素执行一次。
9.5 动画控制
stop([c],[j]) 停止所有在指定元素上正在运行的动画
delay(d,[q]) 设置一个延时来推迟执行队列中之后的项目
finish([queue]) 停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画
193
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
