jQuery 选择器
整理了jQuery的选择器,虽然很基础,但还需要随时巩固,灵活运用。
除了较常用的#id、element、.class、*这四种选择器之外还有下列选择器:
- selector1,selector2,selectorN : 将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内;
- ancestor descendant:在给定的祖先元素下匹配所有的后代元素;
- parent > child:在给定的父元素下匹配所有的子元素;
- prev + nev: 匹配所有紧接在 prev 元素后的 next 元素;
- prev + siblings匹配 prev 元素之后的所有 siblings 元素(注意:只检索第一个元素的同辈元素);
- :first:获取第一个元素( 例如:$(‘li:first’) );
- :not(selector):去除所有与给定选择器匹配的元素,在jQuery 1.3中,已经支持复杂选择器了(例如:not(div a) 和 :not(div,a));
- :even:匹配所有索引值为偶数的元素,从 0 开始计数;
- :odd:匹配所有索引值为奇数的元素,从 0 开始计数;
- :eq(indext):匹配一个给定索引值的元素;
- :gt(indext):匹配所有大于给定索引值的元素;
- :lang(language):选择指定语言的所有元素。:lang选择器,匹配有一个语言值等于所提供的语言代码,或以提供的语言代码开始,后面马上跟一个“ - ”的元素。例如,选择器$(“div:lang(en)”)将匹配
and(和他们的后代),但不包括对于HTML元素,语言值由lang属性决定,也可能由来自meta元素或HTTP头信息决定;
- :last():获取最后个元素,例如:$(‘li:last’)
- :It(indext):匹配所有小于给定索引值的元素;
- :header:匹配如 h1, h2, h3之类的标题元素;
- :animated:匹配所有正在执行动画效果的元素;
- :focus:匹配当前获取焦点的元素。如同其他伪类选择器(那些以”:”开始),建议:focus前面用标记名称或其他选择;否则,通用选择(““)是不言而喻的。换句话说, (′:focus′)等同为 ( ′ : f o c u s ′ ) 等 同 为 (‘:focus’)。如果你正在寻找当前的焦点元素,$( document.activeElement )将检索,而不必搜索整个DOM树;
- :root:选择该文档的根元素;
- :target:选择由文档URI的格式化识别码表示的目标元素。如果文档的URI包含一个格式化的标识符,或hash(哈希), 然后:target选择器将匹配ID和标识符相匹配的元素。 例如,给定的URI http://example.com/#foo, $( “p:target” ),将选择
元素;
- :contains:匹配包含给定文本的元素;
- :empty:匹配所有不包含子元素或者文本的空元素;
- :has(selector):匹配含有选择器所匹配的元素的元素;
- :parent:匹配有子元素或者文本的元素;
- :hidden:匹配所有不可见元素,或者type为hidden的元素;
- :visible:匹配所有的可见元素;
- [attribute]:匹配包含给定属性的元素。注意,在jQuery 1.3中,前导的@符号已经被废除!如果想要兼容最新版本,只需要简单去掉@符号即可。
- [attribute = value]:匹配给定的属性是某个特定值的元素;
- [attribute != value ]:匹配所有不含有指定的属性,或者属性不等于特定值的元素;
- [attribute ^= value ]:匹配给定的属性是以某些值开始的元素;
- [attribute $= value ]:匹配给定的属性是以某些值结尾的元素;
- [attribute *= value ]:匹配给定的属性是以包含某些值的元素;
- [attrSel1][attrSel2][attrSelN]:复合属性选择器,需要同时满足多个条件时使用;
- :first-child:匹配所给选择器( :之前的选择器)的第一个子元素类似的:first匹配第一个元素,但是:first-child选择器可以匹配多个:即为每个父级元素匹配第一个子元素。这相当于:nth-child(1);
- :first-of-type:结构化伪类,匹配E的父元素的第一个E类型的孩子。等价于:nth-of-type(1) 选择器。
- :last-child: 匹配最后一个子元素:last 只匹配最后一个元素,而此选择符将为每个父元素匹配最后一个子元素;
- :last-of-type:大体的意思跟 :first-of-type差不多,只是一个是第一个元素,一个是最后一个元素,这里就不赘述了;
- :nth-child:匹配其父元素下的第N个子或奇偶元素:eq(index) 匹配选择器指定序列的元素,而这个将为每一个父元素匹配子元素。:nth-child从1开始的,而:eq()是从0算起的!可以使用:nth-child(even)、:nth-child(odd)、:nth-child(3n)、:nth-child(2)、:nth-child(3n+1)、:nth-child(3n+2),要匹配元素的序号,从1开始;
- nth-last-child(n|even|odd|formual):选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个。即:倒序查找。(n:匹配子元素序号,必须为整数,注意从1开始而不是0;even:匹配所有偶数元素;odd:匹配所有奇数元素;formual:使用特殊公式如(an + b)进行选择. 例如:nth-last-child(3n+2) 从倒数第二个子元素开始,匹配每个3的倍数的元素。)
- nth-last-child-type(n|even|odd|formual):与nth-last-child类似,只匹配具备此标签元素。
- nth-child-type(n|even|odd|formual):与nth-child类似,只匹配具备此标签元素。
- nth-of-type(n|even|odd|formual):选择同属于一个父元素之下,并且标签名相同的子元素中的第n个;
- only-child:如果某个元素是父元素中唯一的子元素,那将会被匹配;
- only-child-type:选择所有没有兄弟元素,且具有相同的元素名称的元素;
- :input:匹配所有 input, textarea, select 和 button 元素;
- :text:匹配所有的单行文本框;
- :checkbox:匹配所有复选框;
- :password:匹配所有密码框;
- :radio:匹配所有单选按钮;
- :submit:查找所有提交按钮,匹配所有提交按钮,理论上只匹配 type=”submit” 的input或者button,但是现在的很多浏览器,button元素默认的type即为submit,所以很多情况下,不设置type的button也会成为筛选结果。为了防止歧义或者误操作,建议所有的button在使用时都添加type属性。
- :image:匹配所有图像域;
- :reset:匹配所有重置按钮;
- :button:匹配所有按钮;
- :file:匹配所有文件域;
- :enabled:匹配所有可用元素;
- :disabled:匹配所有不可用元素;
- :checked:匹配所有选中的被选中元素(复选框、单选框等,select中的option),对于select元素来说,获取选中推荐使用 :selected;
- :selected:匹配所有选中的option元素;
- $.escapeSelector(selector):这个方法通常被用在类选择器或者ID选择器中包含一些CSS特殊字符的时候,这个方法基本上与CSS中CSS.escape()方法类似,唯一的区别是jquery中的这个方法支持所有浏览器。