可见性选择器
注意：下面的代码中的console.log()在火狐浏览器或者谷歌浏览器中运行，请大家在浏览器的控制台中查看运行的结果，造成不便之处请原谅！
<body>
<input type="hidden" name="name" value=" " />
<input type="text" name="name" value=" " />
<div id="divNone" style="display: none;">
</div>
<div id="divBlock" style="display: block;">
</div>
<div id="divHidden" style="visibility: hidden;">
</div>
<div id="divVisible" style="visibility: visible;">
</div>
</body>
:hidden 选取所有不可见的元素
//选取所有不可见的元素
console.log($(":hidden"));
//$(":hidden")选取所有不可见的元素。包括<input type= "hidden"/>，<div style= "display:none">等元素。
//如果只想选取<input>元素，可以使用$("input:hidden")
console.log($("input:hidden"));
:visible 选取所有可见的元素
//选取所有可见的元素
//元素visibility: hidden或opacity: 0被认为是可见的，因为他们仍然占有布局空间
console.log($(":visible"));
//$("div:visible")选取所有可见的<div>元素
console.log($("div:visible"));
属性过滤选择器
<body>
<div id="divOne" class="divClass">
<span id="spanOne" class="spanClass"></span>
<span id="spanTwo" class="spanClass"></span>
</div>
<div id="divTwo">
<span id="spanThree"></span>
</div>
<div id="divThree" class="divClass spanClass">
</div>
<div class="spanClass divClass"></div>
<span id="spanFore"></span>
<span id="spanFive" class="spanClass"></span>
</body>
[attribute] 选取拥有此属性的元素
//$("div[id]")选取拥有属性id的<div>元素
//[div#divOne.divClass, div#divTwo, div#divThree.divClass]
console.log($("div[id]"));
[attribute=value] 选取属性的值为value的元素
//$("div[id=divTwo]")选取属性id为divTwo的<div>元素
//[div#divTwo]
console.log($("div[id=divTwo]"));
[attribute!=value] 选取属性的值不等于value的元素
//$("div[id!=divTwo]")选取属性id为divTwo的<div>元素
//注意：没有id属性的元素也会被选取
//[div#divOne.divClass, div#divThree.divClass, div.spanClass]
console.log($("div[id!=divTwo]"));
[attribute^=value] 选取属性的值以value开始的元素
//$("div[class^=divClass]")选取属性class以divClass开始的<div>元素
//[div#divOne.divClass, div#divThree.divClass]
console.log($("div[class^=divClass]"));
[attribute$=value] 选取属性的值以value结束的元素
//$("div[class^=divClass]")选取属性class以divClass结尾的<div>元素
//[div#divOne.divClass, div.spanClass]
console.log($("div[class$=divClass]"));
[attribute *= value] 选取属性的值含有value的元素
//$("div[class*=spanClass]")选取属性class含有spanClass的<div>元素
//[div#divThree.divClass, div.spanClass]
console.log($("div[class*=spanClass]"));
[selector1][selector2][selector3] 用属性选择器合并成一个复合属性选择器，满足多个条件。每选择一次，缩小一次范围
//$("div[id][class$=divClass]")选取拥有属性id，并且属性class以divClass结尾的<div>元素
//[div#divOne.divClass]
console.log($("div[id][class$=divClass]"));
子元素过滤选择器
<body>
<div id="divOne">
<span id="spanOne"></span>
<span id="spanTwo"></span>
</div>
<div id="divTwo">
<span id="spanThree"></span>
</div>
<div id="divThree">
</div>
<span id="spanFore"></span>
<span id="spanFive"></span>
</body>
:nth-child(index/even/odd) 选取每个父元素下的第index个子元素或者奇偶元素(index从1算起)
//$("div span:nth-child(2)");选取每个<div>中第2个<span>元素
//[span#spanTwo]
console.log($("div span:nth-child(2)"));
//$("div span:nth-child(odd)");选取每个<div>中为奇数的<span>元素
//[span#spanOne, span#spanThree]
console.log($("div span:nth-child(odd)"));
:first-child 选取每个父元素的第一个子元素
//$("div span:first-child");选取每个<div>中第一个<span>元素
//[span#spanOne, span#spanThree]
console.log($("div span:first-child"));
:last-child 选取每个父元素的最后一个子元素
//$("div span:last-child");选取每个<div>中最后一个<span>元素
//[span#spanTwo, span#spanThree]
console.log($("div span:last-child"));
:only-child 如果某个元素是它父元素中唯一的子元素，那么将会被匹配。如果父元素中含有其他元素，则不会被配置
//$("div span:only-child")在<div>中选取是唯一子元素的<span>元素
//[span#spanThree]
console.log($("div span:only-child"));
表单元素选择器
由于比较简单所以就不举例子了
|
选择器 |
描述 |
示例 |
|
:input |
选取所有的<input>、<textarea>、<select>和<button>元素 |
$(":input")选取所有的<input>、<textarea>、<select>和<button>元素 |
|
:text |
选取所有的单行文本框 |
$(":text")选取所有的单行文本框 |
|
:password |
选取所有的密码框 |
$(":password")选取所有的密码框 |
|
:radio |
选取所有的单选按钮 |
$(":radio")选取所有的单选按钮 |
|
:checkbox |
选取所有的复选框 |
$(":checkbox")选取所有的复选框 |
|
:submit |
选取所有的提交按钮 |
$(":submit")选取所有的提交按钮 |
|
:image |
选取所有的图像按钮 |
$(":image")选取所有的图像按钮 |
|
:reset |
选取所有的重置按钮 |
$(":reset")选取所有的重置按钮 |
|
:button |
选取所有的按钮 |
$(":button")选取所有的按钮 |
|
:file |
选取所有的上传控件 |
$(":file")选取所有的上传控件 |
|
:hidden |
选取所有不可见元素 |
$(":hidden")选取所有的不可见元素，已经在可见性过滤选择器中讲解过 |
表单对象属性过滤选择器
同上，由于比较简单所以就不举例子了
|
选择器 |
描述 |
示例 |
|
:enabled |
选取所有可用元素 |
$("#form1 :enabled")选取id为form1的表单内的所有可用元素 |
|
:disabled |
选取所有不可用元素 |
$("#form1 :disabled")选取id为form1的表单内的所有不可用元素 |
|
:checked |
选取所有被选中的元素(单选按钮，复选框) |
$("input:checked")选取所有被选中的<input>元素 |
|
:selected |
选取所有被选中的选项元素(下拉列表) |
$("select :selected")选取所有被选中的选项元素 |