1. jQuery选择器
分类 | 选择器 | 描述 |
基 本 | * | 选取所有元素 |
| id | 根据给定的ID匹配一个元素 |
| class | 根据给定的类匹配元素 |
| element | 根据给定的元素名匹配所有元素 |
层 级 | selector1,……,selectorN | 将每一个选择器匹配到的元素合并一起返回 |
| Ancestor descendant | 在给定的元素ancestor下匹配所有的后代元素 |
| parent>child | 在给定的元素parent下匹配所有的子元素 |
| prev + next | 匹配所有紧接在prev元素的相邻元素 |
| prev ~ siblings | 匹配prev元素之后的所有兄弟元素 |
| :first | 获取第一个元素 |
| :not() | 去除所有与给定选择器匹配的元素 1.$(“p:not(.intro)”) 选取除了.intro元素以外的所有p元素 |
| :even() | 匹配所有索引值为偶数的元素，从0开始计数 |
| :odd | 匹配所有索引值为奇数的元素，从0开始计数 |
| :eq() | 匹配一个给定索引值的元素 |
| :gt() | 匹配所有大于给定索引值的元素 |
| :lt() | 匹配所有小于给定索引值的元素 |
| :lang | 选择指定语言的所有元素。 |
| :last | 获取最后个元素 |
| :header | 匹配如 h1, h2, h3 之类的标题元素 |
| :animated | 匹配所有正在执行动画效果的元素 |
| :focus | 匹配当前获取焦点的元素。 |
| :root | 选择该文档的根元素 永远是 元素 |
| :target | 选择由文档 URI 的格式化识别码表示的目 标元素。 |
内 容 | :contains() | 匹配包含给定文本的元素 |
| :empty | 匹配所有不包含子元素或者文本的空元素 |
| :has() | 匹配含有选择器所匹配的元素的元素 |
| :parent | 匹配含有子元素或者文本的元素 |
可见性 | :hidden | 匹配所有不可见元素，或者 type 为 hidden 的元素 |
| :visible | 匹配所有的可见元素 |
属 性 | [attribute] | 匹配包含给定属性的元素 |
| [attribute=value] | 匹配给定的属性是某个特定值的元素 |
| [attribute!=value] | 匹配所有不含有指定的属性，或者属性不等 于特定值的元素。 |
| [attribute^=value] | 匹配给定的属性是以某些值开始的元素 |
| [attribute$=value] | 匹配给定的属性是以某些值结尾的元素 |
| [attribute*=value] | 匹配给定的属性是以包含某些值的元素 |
| [attrSel1][ attrSel2][ attrSelN] | 复合属性选择器，需要同时满足多个条件时 使用。 |
子元素 | :first-child | 匹配第一个子元素 |
| :last-child | 匹配最后一个子元素 |
| :first-of-type | 选择所有相同的元素名称的第一个兄弟元 素。 |
| :last-of-type | 选择的所有元素之间具有相同元素名称的 最后一个兄弟元素。 |
| :nth-child() | 匹配某个元素，该元素必须是某个父元素下 的第 n 个子元素。序号从 1 开始 |
| :nth-last-child() | 选中某个元素，该元素必须是某个父元素下 的倒数第 n 个子元素。序号从 1 开始 |
| :nth-of-type() | 选中某个元素，该元素必须是某个父元素下 的指定类型第 n 个子元素。序号从 1 开始 |
| :nth-last-of-type() | 选中某个元素，该元素必须是某个父元素下 的指定类型倒数第 n 个子元素。序号从 1 开 始 |
| :only-child | 如果某个元素是父元素中唯一的子元素，那 将会被匹配 |
| :only-of-type | 选择所有没有兄弟元素和自己相同类型的 元素 |
表 单 | :input | 匹配所有 input, textarea, select 和 button 元素 |
| :text | 匹配所有的单行文本框 |
| :password | 匹配所有密码框 |
| :radio | 匹配所有单选按钮 |
| :checkbox | 匹配所有复选框 |
| :submit | 匹配所有提交按钮 |
| :image | 匹配所有图像域 |
| :reset | 匹配所有重置按钮 |
| :button | 匹配所有按钮 |
| :file | 匹配所有文件域 |
表 单 属 性 | :enabled | 匹配所有可用元素 |
| :disabled | 匹配所有禁用元素 |
| :checked | 匹配具有 checked 属 性 的 radio 和 checkbox，和有 selected 属性的 option 标签 |
| :selected | 只匹配有 selected 属性的 option 标签 |
2 jQuery 遍历-祖先
通过 jQuery，您能够向下遍历 DOM 树，以查找元素的后代。
parent() | 方法返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历 |
parents() | 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。 |
parentsUntil() | 方法返回介于两个给定元素之间的所有祖先元素。 |
3. jQuery 遍历-后代
通过 jQuery，您能够向下遍历 DOM 树，以查找元素的后代。
children() | 方法返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历 |
find() | 方法返回被选元素的后代元素，一路向下直到最后一个后代。 |
4 jQuery 遍历-同胞
通过 jQuery，您能够在 DOM 树中遍历元素的同胞元素。
siblings() | 方法返回被选元素的所有同胞元素。 |
next() | 方法返回被选元素的下一个同胞元素。该方法只返回一个元素。 |
nextAll() | 方法返回被选元素的所有跟随的同胞元素。 |
nextUntil() | 方法返回介于两个给定参数之间的所有跟随的同胞元素。 |
prev(),prevAll()以及 prevUntil() | 方法的工作方式与上面的方法类似，只不过方向相 反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞之前元素遍历，而不是之 后元素遍历） |
5. jQuery 遍历-过滤
三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置 来选择一个特定的元素。
其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
方法 | 描述 |
first() | 返回被选元素的首个元素。 1. //选取首个<div>元素内部的第一个<p>元素 2. $("div p").first(); |
last() | 返回被选元素的最后一个元素。 1. //选取首个<div>元素内部的第一个<p>元素 2. $("div p").last(); |
eq() | 返回被选元素中带有指定索引号的元素。 1.//选取第二个<p>元素 2.$(“p”).eq(1); |
filter() | 筛选出与指定表达式匹配的元素集合。 1.//返回带有类名”url”的所有<p>元素 2.$(“p”).filter(“.url”); |
not() | 筛选出与指定表达式不匹配的元素集合。与filter()相反 3.//返回不带有类名”url”的所有<p>元素 4.$(“p”).not(“.url”); |
has() | 保留包含特定后代的元素，去掉那些不包含有指定后代的元素。 |
6. jQuery DOM操作
1、内容&属性操作
(1.) 内容
方法 | 描述 |
text() | 设置或返回所选元素的文本内容 |
html() | 设置或返回所选元素的内容（包括 HTML 标记） |
var() | 设置或返回表单字段的值 |
(2.) 属性
方法 | 描述 |
attr() | 设置或返回被选元素的属性值。 |
removeAttr() | 从每一个匹配的元素中删除一个属性。 |
prop() | 获取在匹配的元素集中的第一个元素的属性值。 |
removeProp() | 删除由.prop()方法设置的属性集 |
attr()和 prop()区别：
（1.）对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法。
（2.）对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法。
（3.）具有 true 和 false 两个值的属性，如 checked, selected 或者 disabled,使用 prop() prop() 函数的结果:有相应的属性，返回指定的属性值；否则返回空字符串；
attr() 函数的结果：有相应的属性，返回指定的属性值；否则返回 undefined。
(3.) CSS类
方法 | 描述 |
addClass() | 向被选元素添加一个或多个类。 |
removeClass() | 从被选元素删除一个或多个类。 |
toggleClass() | 对被选元素进行添加/删除类的切换操作。 |
2、添加/删除/替换元素
(1.) 添加元素
方法 | 描述 |
append() | 在被选元素的结尾插入内容（结束标签之前插入） |
appendTo() | 把所有匹配的元素追加到另一个指定的元素元素集合中。 |
prepend() | 在被选元素的开头插入内容（开始标签之后插入） |
prependTo() | 把所有匹配的元素前置到另一个、指定的元素元素集合中。 |
after() | 在被选元素之后插入内容 |
insertAfter() | 在被选元素后插入 HTML 元素 |
before() | 在被选元素之前插入内容 |
insertBefore() | 在被选元素前插入 HTML 元素 |
(2.) 删除元素
方法 | 描述 |
empty() | 从被选元素中删除子元素。 |
remove() | 从DOM中从删除所有匹配的元素，绑定的事件，附加的数据等都会被移除。 |
detach() | 从DOM中删除所有匹配的元素，所有绑定的事件、附加的数据等都会保留下来。 |
(3.) 替换元素
方法 | 描述 |
replaceWith() | 将所有匹配的元素替换成指定的HTML或DOM元素。 1.$(selector).replacewith(content) |
replaceAll() | 用匹配的元素替换掉所有selector匹配到的元素 1.$(content).replaceAll(selector) |
- CSS()方法
css() 方法设置或返回被选元素的一个或多个样式属性。
返回 CSS 属性值：
1.$(selector).css("propertyname")
设置 CSS 属性值：（注意属性和值之间是 ， ）
1.$(selector).css("propertyname","value")
设置多个 CSS 属性值：（注意属性与属性之间用 ，隔开，属性和值之间是 ： ）
- $(selector).css({"propertyname":"value","propertyname":"value",...}
更多CSS方法：
方法 | 描述 |
offset() | 设置/获取匹配元素在当前视口的相对偏移。 |
position() | 获取匹配元素相对父元素的偏移。 |
scrollTop() | 设置/获取匹配元素相对滚动条顶部的偏移 |
scrollLeft() | 设置/获取匹配元素相对滚动条左侧的偏移。 |
heigh() | 设置/取得匹配元素当前计算的高度值（px）。 |
width() | 设置/取得第一个匹配元素当前计算的宽度值（px）。 |
innerHeight() | 设置/获取第一个匹配元素内部区域高度（包括内边距 padding、不包 括边框 border）。 |
innerWidth() | 设置/获取第一个匹配元素内部区域宽度（包括内边距 padding、不包 括边框 border）。 |
outerHeight() | 设置/获取第一个匹配元素外部高度（默认包括内边距 padding 和边框 border）。 |
outerWidth() | 设置/获取第一个匹配元素外部宽度（默认包括内边距 padding 和边框 border）。 |
7. jQuery 事件
页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调 用的方法。
分类 | 事件 | 描述 |
页面载入 | ready() | 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。 |
事件处理 | on() | 向元素添加事件处理程序 1.//为按钮绑定点击事件 2.$(“.btn”).on(“click”,function(){ alert(“被点击了。”); }); |
| off() | 移除通过on()方法添加的事件处理程序 1.//移除按钮上的点击事件 2.$(“.btn”).off(“click”); |
| bind() | 向元素添加事件处理程序 |
| unbind() | bind()的反向操作，从每一个匹配的元素中删除绑定的事件。自jQuery版本1.7起，on()和off()方法是在元素上添加和移除事件处理程序的首选方法。 |
| one() | 向被选元素添加一个或多个事件处理程序。该处理程序只能被每个元素触发一次。 |
| trigger() | 触发绑定到被选元素的所有事件 1.// 按钮点击事件触发文本框焦点事件，文本框获得焦点并执行函数 2.$(“#btn1”).click(function(){ $(“#ipt”).trgger(“focus”); }); |
| triggerHandler() | 触发绑定到被选元素的指定事件上的所有函数 1.//按钮点击事件触发文本框焦点事件，文本框获得焦点并执行函数 2.$(“#btn1”).click(function(){ $(“#ipt”). triggerHandler(“focus”); }); |
事件委派 | delegate() | 向匹配元素的当前或未来的子元素添加处理程序 1.//为div的子元素p绑定点击事件 2.$(“div”). delegate(“p”,”click”,function(){ $(“p”).css(“background-color“,”pink”); }); |
| undelegated() | 从现在或未来的被选元素上移除事件处理程序 |
事件切换 | hover() | 规定当鼠标指针悬停以及离开在被选元素上时要运行的两个函数。如果只指定一个函数，则mouseenter和mouseleave都执行它 |
| toggle() | 在版本1.9中被移除。 添加click事件之间要切换的两个或多个函数 |
常见事件 | click() | 添加/触发click事件 |
| dblclick() | 添加/触发双击事件 |
| mouseenter() | 添加/触发鼠标移入事件 |
| mouseleave() | 添加/触发鼠标离开事件 事件只有在离开被选元素的时候才会触发，该事件大多数时 候会与 mouseenter 事件一起使用。 |
| mousemove() | 添加/触发移动事件 |
| mouseout() | 添加/触发鼠标离开事件 事件在鼠标离开被选元素的子元素时也会触发 |
| mouseover() | 当鼠标指针位于元素上方时触发的事件 事件在鼠标指针进入被选元素或任意子元素时都会被触发 |
| mousedown() | 添加/触发鼠标按下事件 |
| mouseup() | 添加/触发鼠标松开事件 |
| keydown() | 当键盘或按钮被按下时，发生 keydown 事件。（过程） |
| keypress() | 当键盘或按钮被按下时，发生 keypress 事件。 |
| keyup() | 当按钮被松开时，发生 keyup 事件。 它发生在当前获得焦点的元素上。 |
| submit() | 当提交表单时，会发生 submit 事件。 |
| change() | 当元素的值发生改变时，会发生 change 事件。 |
| focus() | 当元素获得焦点时，触发 focus 事件。 |
| blur() | 当元素失去焦点时触发 blur 事件。 |
| select() | 当 textarea 或文本类型的 input 元素中的文本被选择时，会 发生 select 事件。 |
| load() | 在版本 1.8 中被废弃。添加事件处理程序到加载页面事件 |
| unload() | 在版本 1.8 中被废弃。添加事件处理程序到离开页面事件 |
| resize() | 当调整浏览器窗口的大小时，发生 resize 事件。 |
| scroll() | 当用户滚动指定的元素时，会发生 scroll 事件。 |
8. jQuery 效果
1、jQuery 效果 - 隐藏和显示
1.1、hide() & show()
jQuery使用hide() 和show() 方法来隐藏和显示HTML元素。
语法：
(1)、$(selector).hide(speed,callback);
(2)、$(selector).show(speed,callback);
参数：
speed：可选，规定隐藏/显示的速度，可以取值：“slow”、“fast”或毫秒。
callback：可选，是隐藏或显示完成后所执行的函数名称。
1.2、toggle()
jQuery使用toggle()方法来切换hide() 和 show() 方法。
语法：
$(selector).toggle(speed,callback);
2.jQuery效果 – 淡入淡出
通过jQuery，可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法：
fadeIn() | fadeOut() | fadeToggle() | fadeTo() |
2.1、fadeIn()
fadeIn() 用于淡入已隐藏的元素。
语法：
- $(selector).fadeIn(speed,callback);
参数：
speed：可选，规定效果的时长，可以取值："slow"、"fast" 或毫秒。
callback：可选，是 fading 完成后所执行的函数名称。
2.2、fadeOut()
用法与 fadeIn()基本一样。
2.3、fadeToggle()
fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
2.4、fadeTo ()
fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
语法：
- $(selector).fadeTo(speed,opacity,callback);
参数：
speed：必填，规定效果的时长，可以取值："slow"、"fast" 或毫秒。
opacity：必填，将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
callback：可选，是 fading 完成后所执行的函数名称。
3、jQuery 效果 - 滑动
jQuery 滑动方法可使元素上下滑动，使元素有展开收起的效果。
3.1、slideDown() & slideUp()
（1）slideDown() 方法用于向下滑动元素;
（2）slideUp() 方法用于向上滑动元素。
语法：
- $(selector).slideDown / slideUp(speed,callback);
参数：
1、speed：可选，规定效果的时长，可以取值："slow"、"fast" 或毫秒。
2、callback：可选，是滑动完成后所执行的函数名称。
3.2、slideToggle()
slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换
语法：
$(selector).slideToggle(speed,callback);
4、jQuery 效果 – 动画
animate() 方法用于创建自定义动画。
语法：
- $(selector).animate({params},speed,callback);
参数：
params：必填，定义形成动画的 CSS 属性。
speed：可选，规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
callback：可选，动画完成后所执行的函数名称。
4.2、animate()使用相对值
也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=
4.3、animate()使用预定义的值
可以把属性的动画值设置为 "show"、"hide" 或 "toggle“
4.4、animate()使用队列功能
可以编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一 运行这些 animate 调用。
5、jQuery 效果 – 停止动画 stop()
stop() 方法用于停止动画或效果，在它们完成之前
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
语法：
$(selector).stop(stopAll,goToEnd);
参数：
stopAll：可选，规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许 任何排入队列的动画向后执行。
goToEnd：可选，规定是否立即完成当前动画。默认是 false。
6、jQuery – 链
（1.）通过 jQuery，可以把动作/方法链接在一起。链允许我们在一条语句中运行多个jQuery 方法（在相同的元素上）。
（2.）在这之前，我们都是一次写一条 jQuery 语句（一条接着另一条）。
（3.）不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。这样的话，浏览器就不必多次查找相同的元素。如需链接一个动作， 您只需简单地把该动作追加到之前的动作上。
