jquery的选择器总结

jquery选择器：

一、基本选择器：

1. id选择器：（指定id元素）

$("#id名称")

 

2. class选择器：（遍历css类元素）

$(".class样式名称")

 

3. element元素选择器（遍历html元素）

$("html标签元素")

 

4.  * 选择器（遍历所有元素）

$("*")

 

5. 并列选择器(or的逻辑关系，满足两者中的其中一者即可)

$("条件一，条件二")

 

6. 联合选择器(and的逻辑关系，两者必同时满足)

$("条件一  空格  条件二 ")

 

二、 层次选择器

1. parent > child（直系子元素）
// 选取div下的第一代p元素，将字体颜色设为红色

$('div > p').css('color', '#FF0000');

 

2. prev + next（下一个兄弟元素，等同于next()方法）
// 选取class为think的下一个div兄弟元素
$('.think+ div').css('color', '#FF0000');

// 等价代码
//$('.think').next('div').css('color', '#FF0000');

 

3. prev ~ siblings（prev元素的所有兄弟元素，等同于nextAll()方法）

// 选取class为inside之后的所有div兄弟元素
$('.inside ~ div').css('color', '#FF0000');
//$('.inside').nextAll('div').css('color', '#FF0000');

 

三、 过滤选择器
1. 基本过滤选择器

(1) :first和:last（取第一个元素或最后一个元素）

设置第一个div和最后一个div元素的颜色
$('div :first').css('color', '#FF0000');
$('div :last').css('color', '#FF0000');

(2) :not（取非元素）

设置div下面的样式不是wrap的颜色

$('div:not(.wrap)').css('color', '#FF0000');

 

(3) :even和:odd（取偶数索引或奇数索引元素，索引从0开始，even表示偶数，odd表示奇数）

设置表格的奇数行和偶数行的颜色

$("tr :even").css('color', '#FF0000');

$("tr :odd").css('color', '#DD0000');

 

(4) :eq(x) （取指定索引的元素，索引从0开始）

设置表格中的第三行颜色

$('tr:eq(2)').css('color', '#FF0000');

 

(5):gt(x)和:lt(x)（取大于x索引或小于x索引的元素,索引从0开始）设置大于1的列表的颜色和小于2的列表的颜色

$('ul li:gt(2)').css('color', '#FF0000');

$('ul li:lt(2)').css('color', '#0000FF');

 

(6):header（取H1~H6标题元素）

设置H1~H6的标题颜色

$(':header').css('background', '#EFEFEF');

 

2. 内容过滤选择器(1):contains(text)（取包含text文本的元素）

设置div元素中包含jQuery文本的颜色

$('div:contains("jQuery")').css('color', '#FF0000');

 

(2):empty（取不包含子元素或文本为空的元素）

设置为空的div元素的内容

$('div:empty').html('AAAA');

 

(3) :has(selector)（取选择器匹配的元素）

设置div标签中含有span标签的样式

$('div:has(span)').css('border', '1px solid #000');

 

(4):parent（取包含子元素或文本的元素）

设置包含文本内容的列表的样式

$('li :parent').css('border', '1px solid #000');

三. 可见性过滤选择器

1. :hidden（取不可见的元素）

说明：

jQuery至1.3.2之后的:hidden选择器仅匹配display:none或<input type="hidden" />的元素，而不匹配visibility: hidden或opacity:0的元素。这也意味着hidden只匹配那些“隐藏的”并且不占空间的元素，像visibility:hidden或opactity:0的元素占据了空间，会被排除在外。举例:

$('div:hidden').show(500);

 

2. :visible（取可见的元素）

$('div:visible').css('background', '#EEADBB');

 

四.属性过滤选择器

1. [attribute]（取拥有attribute属性的元素）

$('a[title]').css('text-decoration', 'none');

 

2. [attribute = value]和[attribute != value]（取attribute属性值等于value或不等于value的元素）

$('input[name=product_id]').css('text-decoration', 'none');