jQuery选择器集锦(读《锋利的jQuery(第二版)》所摘)

jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。


过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。


$("input:not(.myClass)")选取class不是myClass的<input>元素。


$("input:even")选取索引是偶数的<input> 元素


$(":header")选取网页中所有的<h1>,<h2>,<h3>.


$(":focus")选取当前获取焦点的元素


内容过滤选择器的过滤规则主要体现在他所包含的子元素或文本内容上。


$("div:has(p)")选取含有<p>元素的<div>元素。


$("div:parent")选取拥有子元素(包括文本元素)的<div>元素


$("div:parent").css("background","#bbffaa"); 改变含有子元素(包括文本元素)的<div>元素的背景色。



可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。


:hidden 选取所有不可见的元素。 返回集合元素。


:visible  选取所有可见的元素。。返回集合元素。


属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。

下面是属性过滤选择器的实例:


$("div[id]")选取拥有属性id的元素


$("div[title=test]")选取属性title为"test"的<div>元素。


$("div[title!=test]")选取属性title不等于"test"的<div>元素(注意:没有属性title的<div>元素也会被选取)


$("div[title^=test]")选取属性title以"test"开始的<div>元素。


$("div[title$=test]")选取属性title以"test"结束的<div>元素。


$("div[title*=test]")选取属性title以"test"结束的<div>元素。


$(‘div[title|="en"]‘)选取属性title等于en或以en为前缀(该字符串后跟一个连字符‘-‘)的元素。


$(‘div[title~="uk"]‘)选取属性title用空格分隔的值中包含字符uk的元素。


$("div[id][title$=‘test‘]")选取拥有属性id,并且属性title以"test"结束的<div>元素。


:nth-child()选择器是很常用的子元素过滤选择器,详细功能如下。


(1):nth-child(even)能选取每个父元素下的索引值是偶数的元素。


(2) :nth-child(odd)能选取每个父元素下的索引值是奇数的元素。


(3):nth-child(2)能选取每个父元素下的索引值等于2的元素。


(4):nth-child(3n)能选取每个父元素下的索引值是3的倍数的元素。


(5):nth-child(3n+1)能选取每个父元素下的索引值是(3n+1)的元素。(n从1开始)。


eq(index)只匹配一个元素,而:nth-child将为每一个符合条件的父元素匹配子元素。同时应该注意到 nth-child(index)的

index是从1开始的,而:eq(index)是从0开始的。同理:first和:first-child,:last和:last-child也类似。


表单对象属性过滤选择器,此选择器主要是对所选择的表单元素进行过滤,例如选择被选中的下拉框,多选框等元素。


技术分享


















郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。