JQuery选择器

 

JQuery选择器

一、基本选择器

#id 根据给定的id匹配一个元素

.class 根据给定的类名匹配元素

element 根据给定的元素名匹配元素

* 匹配所有元素

Selector1，selector2，…selectorN 将每一个选择器匹配到元素合并后一起返回

二、层次选择器

$(“ancestor descendant”)  选取ancestor元素里的所有descendant（后代）元素

$(“parent>child”)  选取parent元素下的child（子）元素，与$(“ancestor descendant”)有区别，$(“ancestor descendant”)选择的是后代元素

$(“prev+next”)  选取紧接在prev元素后面的next元素

$(“prev~siblings”)  选取prev元素之后的所有siblings元素

三、过滤选择器

（1）基本过滤选择器

:first  选取第1个元素

:last  选取最后一个元素

:not(selector)  去除所有与给定选择器匹配的元素

:even  选取索引是偶数的所有元素，索引从0开始

:odd  选取索引是奇数的所有元素，索引从0开始

:eq(index)  选取索引等于index的元素（index从0开始）

:gt(index)  选取索引大于index的元素（index从0开始）

:lt(index)  选取索引小于index的元素（index从0开始）

:header  选取所有的标题元素，例如h1,h2,h3,等等

:animated  选取当前正在执行动画的所有元素

（2）内容过滤选择器

:contains(text) 选取含有文本内容为”text”的元素

:empty  选取不包含子元素或者文本的空元素

:has(selector)  选取含有选择器所匹配的元素

:parent  选取含有子元素或者文本的元素

（3）可见性过滤选择器

:hidden:选取所有不可见的元素

:visible  选取所有可见的元素

（4）属性过滤选择器

[attribute]  选取拥有此属性的元素

[attribute=value] 选取属性的值为value的元素

[attribute!=value]  选取属性的值不等于value的元素

[attribute^=value]  选取属性值以value开始的元素

[attributes=value]  选取属性的值以value结束的元素

[attribute*=value]  选取属性的值含有value的元素

[selector1][selector2][selectorN]  用属性选择器合并成一个复合属性选择器，满足多个条件。每选择一次，缩小一次范围

(5) 子元素过滤选择器

:nth-child(index/even/odd/equation) 选取每个父元素下的第index个子元素或者奇偶元素  :eq(index)只匹配一个元素。

:first-child 选取每个父元素的第一个子元素。

：last-child 选取每个父元素的最后一个子元素。

:only-child   $(“ul li:only-child”)在<ul>中选取是唯一子元素的<li>元素。

(6) 表单对象属性过滤选择器

$(“#form1 :enabled”) 选取id为form1表单中的所有可用元素

$(“#form1 :disabled”) 选取id为form1的表单内的所有不可用元素。

$(“input:checked”) 选取所有被选择中的 <input>元素

$(“select :select”) 选取所有被选中的选项元素。

 

四、表单选择器

:input 选取所有的<input>、<textarea>、<select>和<button>元素

:text    选取单行文本框

:password 选取密码框  $(“:password”)

:radio    单选框

:checkbox 多选框

:submit    提交按钮

:image     图片

:reset     重置

:button    按钮

:file     上传

:hidden    不可见元素

 

 

基本选择器：

$('#divMid').css('display', 'block')：设置id为'divMid'的层可见

$('div span').css('display', 'block')：设置id为'divMid'的层里面的所有span元素可见，无论有几级嵌套

$('div>span').css('display', 'block')：设置id为'divMid'的层里面的第一级span元素可见，此span元素里面的span元素不可见

$('#divMid+div').css('display','block')：设置id为'divMid'的层后面的第一个div可见

$('#divMid+span').css('display', 'block')：设置id为'divMid'的层后面的第一个span可见(必须是紧挨着的span)

$('#divMi17:16 2012-03-12lock'):设置id为'divMid'的层后面的第一个元素可见,无论是什么元素

$('#divMid').nextAll().css('display', 'block')：设置id为'divMid'的层后面的所有元素可见，无论是什么元素，必须与divMid平级，平级元素里面的嵌套元素不可见

$('#divMid~div').css('display', 'block')：设置id为'divMid'的层后面的所有div元素可见，必须是平级的。

$('#divMid~span').css('display','block');：设置id为'divMid'的层后面的所有span元素可见，必须是平级的。