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的并集结果(不重复)