您的位置：首页 > Web前端 > JQuery

（WEB.jQuery）jQuery选择器总结

2016-10-13 16:44 211 查看

基本选择器

位置选择器

属性选择器

表单选择器

过滤选择器

结果集中的选择器

方法选择器

（结果集）方法选择器


选择符	匹配元素	示例
*	所有元素	$(‘*’)
id	给定ID的元素	$(‘#:IDName’)
.class	给定类的所有元素	$(‘.:CalssName’)
element	给定类型的所有元素	$(‘:TagName’)
a,b	与a或b匹配的元素	$(‘[ID,Class,TagName],[ID,Class,TagName],”)
a b	a的后代元素中与b匹配的元素
a>b	a的直接子元素中与b匹配的元素
a+b	a的直接同辈元素中与b匹配的元素
a~b	a的同辈元素中与b匹配的元素


选择符	匹配元素
a b:nth-child(index)	a的子元素中，第index个与b匹配的元素（从1开始计数）
a b:nth-child(even)	a的子元素中，第偶数个与b匹配的元素（从1开始计数）
a b:nth-child(odd)	a的子元素中，第奇数个与b匹配的元素（从1开始计数）
a b:nth-child(2n+2)	a的子元素中，第2n+2个与b匹配的元素（从1开始计数）,n为自然数
a b:nth-last-child()	同:nth-child()，从最后一个元素开始计数
a b:first-child	a的子元素中，第1个与b匹配的元素
a b:last-child	a的子元素中，最后一个个与b匹配的元素
:only-child	作为其父元素唯一一个子元素的元素
a b:nth-of-type()	同:nth-child()，只计同类元素
a b:nth-last-of-type()	同:nth-last-child()，只计同类元素
a b:first-of-type()	同:first-child()，只计同类元素
a b:last-of-type()	同:last-child()，只计同类元素
a b:only-of-type()	没有同名元素的元素


选择符	匹配元素
[attr]	带有属性attr的元素
[attr=”value”]	attr属性值为value的元素
[attr!=”value”]	attr属性值不为value的元素）
[attr^=”value”]	attr属性值以value开头的元素
[attr$=”value”]	attr属性值以value结尾的元素
[attr*=”value”]	attr属性值包含value字符串的元素
[attr~=”value”]	attr属性值是空格分隔的字符串，其中一个字符串值是value的元素
[attr\|=”value”]	attr属性值等于value或value后跟一个连字符(-)的元素

Example：

$('[id]') //寻找有ID这个属性的所有元素

（注：attr - Attribute：属性的意思，上文是指有某“属性”）


选择符	匹配元素
:input	所有<input>、<textarea> 、<select> 和 <button> 元素
:text	type=”text”的<input>元素
:password	type=”password”的<input>元素
:file	type=”file”的<input>元素
:radio	type=”radio”的<input>元素
:checkbox	type=”checkbox”的<input>元素
:submit	type=”submit”的<input>元素
:image	type=”image”的<input>元素
:reset	type=”reset”的<input>元素
:button	type=”button”的<input>元素
:enabled	启用的表单元素（注：实验表明，A标签也会被算入之中）
:disabled	禁用的表单元素
:checked	选中的复选框和单选按钮
:selected	选中的<option>元素


选择符	匹配元素
:root	文档根元素
:header	标题元素，h1~h6
:animated	动画正在运行的元素
:contains(text)	包含文本text的元素
a:empty	不包含子节点的a元素
a:has(b)	至少包含一个b元素匹配的a元素(返回父元素a而非子元素b)
:parent	与:empty相反，返回包含子节点的元素
:hidden	隐藏的元素，包括<input type=”hidden”>
:visible	可见元素
:focus	获得焦点的元素
:lang(language)	给定语言代码的元素（元素中有lang属性）
:target	URI标识符指向的目标元素.（描点）


选择符	匹配元素
:first	结果集中的第一个元素，对应方法为first()
:last	结果集中的最后一个元素，对应方法为last()
:not(a)	结果集中不与a匹配的元素，对应方法为not()
:even	结果集中索引是偶数的元素(从0开始),如$(“a b:even”)
:odd	结果集中索引是奇数的元素(从0开始),如$(“a b:odd”)
:eq(index)	结果集中索引是index的元素(从0开始)
:gt(index)	结果集中索引大于index的元素(从0开始)，换句话说：取Index后面的的结果集
:lt(index)	结果集中索引小于index的元素(从0开始)，换句话说：取Index前面的的结果集

4000


方法	描述
$.fn.parent(expr)	找父亲节点，可以传入expr进行过滤，比如$(“span”).parent()或者$(“span”).parent(“.class”)
$.fn.parents(expr)	类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素
$.fn.closest(expr)	找父亲节点，匹配expr，不同parents的是，匹配到就立马返回不再向上
$.fn.children(expr)	返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点
$.fn.contents()	返回下面的所有内容，包括节点和文本。这个方法和children()的区别就在于，包括空白文本，也会被作为一个jQuery对象返回，children()则只会返回节点
$.fn.prev()	返回上一个兄弟节点，不是所有的兄弟节点
$.fn.prevAll()	返回所有之前的兄弟节点
$.fn.next()	返回下一个兄弟节点，不是所有的兄弟节点
$.fn.nextAll()	返回所有之后的兄弟节点
$.fn.siblings()	返回兄弟姐妹节点，不分前后
$.fn.find(expr)	跟$.filter(expr)完全不一样。$.filter()是从初始的jQuery对象集合中筛选出一部分，而$.fn.find()的返回结果，不会有初始集合中的内容，比如$(“p”),find(“span”),是从元素开始找,等同于$(“p span”)

8. （结果集）方法选择器


方法	描述
$.fn.not()	过滤不符合操作符的元素（只要不符合操作符的元素），同直接选择器“:not”效果一样，与”$.fn.filter()”筛选性质相反
$.fn.filter()	过滤不符合操作符的元素（只要符合操作符的元素），与”.not()”筛选性质相反

自己使用和总结，有误请指正。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jQuery选择器 jq选择器选择器

相关文章推荐

新的分享

章节导航