码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-04-19 10:17:13      阅读:152      评论:0      收藏:0      [点我收藏+]

标签: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也类似。


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


技术分享


















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

标签:jquery选择器集锦

原文地址:http://blog.csdn.net/u013803262/article/details/45126337

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!