1 基本选择器
-
id选择器
根据id来匹配元素，示例：$(id)或者$(“#id")。 -
类选择器
根据class来匹配元素数组，示例：$(“.class")。 -
属性选择器
根据属性来匹配选择器：
$(“[attr]")：匹配所有有attr属性的选择器
$(“[attr=val]")：匹配所有attr属性=val的选择器
$(“[attr!=val]")：匹配所有attr属性不=val的选择器
$(“[attr^=val]")：匹配所有attr属性的值以val开头的选择器
$(“[attr$=val]")：匹配所有attr属性的值以val结尾的选择器
$(“[attr*=val]")：匹配所有attr属性的值含有val的选择器
$(“[attr~=val]")：匹配所有attr属性（此时该属性解析为单词数组）的值有val完整单词的选择器 -
type选择器
匹配所有input的type值的情况，如$(":text")。 -
DOM节点选择器
:empty：没有任何子节点（包括元素和文本节点）的元素
:eq(n)/:gt(n)/:lt(n)/:nth(n)：匹配选中列表中，等于/大于/小于/等于 序号n的元素
:even/:odd：匹配偶数/奇数序号的元素
:first/:last：匹配选中列表 第一个/最后一个 元素
:first-child/:last-child：匹配其父元素和所有兄弟元素的第一个/最后一个 同类型元素
:nth-child(n)：匹配选中列表中，第n个元素（其中n可以是数值，even，odd,形如an+b的表达式。此时的n从1开始）
:only-child：匹配只有一个子节点的元素
:parent：匹配是父节点的元素 -
其他扩展选择器
:animated：匹配由jQuery产生的正在动画的元素
:enabled/:disabled：匹配（未）被禁用的元素
:selected：匹配下拉选中的元素
:visible/:hidden：匹配所有占位置/不占位置的元素
:has(sel)/:not(sel)：匹配有/没有 选择器sel元素 的元素。
:header：匹配所有 < h1> < h2>等等的h标签。
:input：匹配所有的input。
说明：
1、在DOM节点选择器中，除nth-child(n)所有的n都是从0开始计数的。
2、:hidden只匹配type=hidden或者display:none的元素。不匹配visibility:hidden的元素。
3、:visible匹配所有非:hidden的元素
4、<font color=red>同一选择器多次过滤，注意不要加空格，否则就变成在子孙节点中过滤。</font>
//匹配type=text且class以x开头的元素
console.log($("input[type=text][class^=x]"));
5、选择器的扩展：
$.expr[":"].x = function (e) {
return e.type === 'button’;//函数要求返回布尔值，只记录函数计算为true的元素
};
//使用
console.log($(“:x”));
2 组合选择器
将基本选择器进行组合构建的选择器。
| 组合方式 | 说明 |
|---|---|
| A B | 在A的子孙元素中选取匹配B选择器的元素。注意AB间有空格。 |
| A>B | 在A的子元素中选取匹配B选择器的元素。 |
| A+B | 匹配A的下一个元素（忽略文本、注释节点）,选取匹配B的元素，若下一个元素不匹配，则没有。 |
| A~B | 匹配A后面的所有兄弟元素，选取匹配B的元素 |
选择器组
用逗号将选择器隔开，返回组合的结果（并集），并按照文档顺序排序。
console.log($(".x00,.x04,:button"));//返回所有含有class=x00或者class=x04或者type=button的文档元素
DOM选取方法
| 方法名 | 示例 | 说明 |
|---|---|---|
| .first()/.last() |
$("input").first()$("input").last()
|
当前选中列表的第一个/最后一个元素 |
| .eq(n) | $("input").eq(1) |
当前选中列表的第n个元素（n从0开始） |
| .slice() |
$("input").slice(1,3)$("input").slice(1)
|
类似数组的slice方法。从下表a开始到下表b的区间元素。[a,b) |
| .fliter() |
$("input").filter($(".x01"))$("input").filter(".x01")$("input").filter(function (i) {return i==1;})
|
在当前所选区间的过滤。 传入jQ对象或者选择器效果一样。 传入函数时，过滤的结果为true的元素。 |
| .not() | $("input").not(".x01") |
在当前所选列表中不包含选择器的所有元素 |
| .has() | $("div").has(".x01") |
在当前所选列表中，其子孙元素包含选择器的所有元素。该方法只针对当前所选列表的子孙元素过滤，但返回当前所选元素。 |
| .add() |
$("input").add("#ss")$("input").add($("#ss"))
|
在当前所选列表中，添加元素。并按照文档顺序排列。 |
| .find() | $("div").find(".x00") |
在当前所选列表的子孙元素中，查找选择器对应的元素，并返回该子孙元素。等价于($”div .x00”)。 |
| .children()/.content() |
$("#ss").children()$("#ss").contents()
|
返回当前所选列表的所有子元素节点/子节点（包含文本）。 |
| .parent()/.closest(“”) |
$("#span12").parent()$("#span12").closest(".test")
|
返回当前所选元素的直接父节点返回当前所选元素的匹配选择器（必填）的最近的父节点 |
| .next()/.prev() |
$("#ssss").prev()$("#ssss").next()
|
返回当前节点的前一个/后一个兄弟节点 |
| .nextAll()/.prevAll() |
$(".x04").prevAll()$(".x04").nextAll()
|
返回当前节点的前面所有/后面所有的兄弟节点 |
| .parents()/.parentsUntil() |
$(".x04").parents("div")$(".x04").parentsUntil("div")等价于 $(".x04").closest("div").children().first()
|
在当前节点的父节点中，所有的匹配选择器元素 在当前节点的父节点中，向上主机匹配，直到匹配到选择器，但不包含最近的元素的父元素。 |
补充：
1、$(“XXX").end()：（不接受参数）
jQuery的链式调用，实际创建了一个jQuery的链式表或者栈。而每次调用end()，则弹出一次栈。end()只针对改变了jQuery最终选中元素的链式调用，其他链式方法（如css等）全部忽视。
$(".x04").closest("div").children().first().end();//返回children的结果
$(".x04").closest("div").children().first().end().end();//返回closest的结果
2、andSelf()：（jQuery1.8以后改名为addBack()）（不接受参数）
在jQuery的链式堆栈中加入最后一次改变结果的调用对象。
$(".x04").closest("div").children().first().addBack();//返回first和children的并集结果（不重复）
网友评论