可见性选择器
注意:下面的代码中的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")选取所有被选中的选项元素 |