【jQuery选择器分类】
一、基本选择器
选择器 | 示例 |
---|---|
#id | $("#test")选取id=“test”的元素 |
.class | $(".test")选取class=“test”的元素 |
element | $("p")选取所有的p元素 |
* | $("*")选取所有的元素 |
selevtor1,selector2,...,selectorN | $("div,span,p.myClass")选取<div>,<span>和class="myClass"的p元素 |
二、层次选择器
选择器 | 描述 | 示例 |
---|---|---|
$("ancestor descendant") | 选取ancestor元素里的所有descendant(后代)元素 | $("div span")选取<div>里的所有<span>元素 |
$("parent>child") | 选取parent元素下的child(子)元素,与$("ancestor descendant")有区别,$("ancestor descendant")选取的是后代元素 | $("div span")选取<div>里的所有<span>元素 |
$("prev+next") | 选取紧接在prev元素后的next元素 | $(".one+div")选取class="one"的下一个<div>元素 |
$("prev~siblings") | 选取prev元素后面的所有siblings元素 | $("#two~div")选取id="two"后面所有的<div>同辈元素 |
$(".one+div")等价于$(".one").next("div")
$("#prev~div")等价于$("#prev").nextAll("div")
三、过滤选择器
1. 基本过滤选择器
选择器 | 描述 | 返回 | 示例 |
---|---|---|---|
:first | 选取第一个元素 | 单个元素 | $("div:first")选取<div>元素中第一个<div>元素 |
:last | 选取最后一个元素 | 单个元素 | $("div:last")选取<div>元素中最后一个<div>元素 |
:not(selector) | 去除所有与给定选择器匹配的元素 | 集合元素 | $("input:not(myClass)") 选取class不等于myClass的所有<input>元素 |
:even | 选取索引为偶数的所有元素(Index从0开始) | 集合元素 | $("input:even")选取索引为偶数的<input>元素 |
:odd | 选取索引为奇数的所有元素(Index从0开始) | 集合元素 | $("input:odd")选取索引为奇数的<input>元素 |
:eq(Index) | 选取索引等于Index的元素(Index从0开始) | 单个元素 | $("input:eq(1)")选取索引等于1的<input>元素 |
:gt(Index) | 选取索引大于Index的元素(Index从0开始) | 集合元素 | $("input:gt(1)")选取索引大于1的<input>元素 (大于1,但不包括1) |
:lt(Index) | 选取索引小于Index的元素(Index从0开始) | 集合元素 | $("input:lt(1)")选取索引小于1的<input>元素 (小于1,但不包括1) |
:header | 选取所有的标题元素,如h1,h2,h3等 | 集合元素 | $(":header")选取网页中所有的<h1><h2><h3>,... |
:animated | 选取当前正在执行动画的所有元素 | 集合元素 | $("div:animated")选取当前正在执行动画的<div>元素 |
:focus | 选取当前获得焦点的所有元素 | 集合元素 | $(":focus")选取当前获得焦点的所有元素 |
2. 内容过滤选择器
选择器 | 描述 | 示例 |
---|---|---|
:contains(text) | 选取文本内容含有“text”的元素 | $("div:contains('我')")选取还有文本“我”的<div>元素 |
:empty | 选取不包含子元素或文本的空元素 | $("div:empty")选取不包含子元素(包括文本元素)的<div>空元素 |
:has(selector) | 选取含有选择器所匹配的元素的元素 | $("div:has(p)")选取含有<p>元素的<div>元素 |
:parent | 选取含有子元素或文本的元素 | $("div:parent")选取拥有子元素(包括文本元素)的<div>元素 |
3. 可见性过滤选择器
选择器 | 描述 | 示例 |
---|---|---|
:hidden | 选取所有不可见的元素 | $(":hidden")选取所有不可见元素。 包括<input type="hidden">,<div style="display:none;"> 和<div style="visiblity:hidden;">等元素。 如果只想选取<input>元素,可以使用$("input:hidden") |
:visible | 选取所有可见元素 | $("div:visible")选取所有可见的<div>元素 |
选择器 | 描述 | 示例 |
---|---|---|
[attribute] | 选取拥有此属性的元素 | $("div[id]")选取拥有id属性的<div>元素 |
[attribute=value] | 选取属性的值为value的元素 | $("div[title=test]")选取属性title为“test”的<div>元素 |
[attribute!=value] | 选取属性的值不为value的元素 | $("div[title!=test]")选取属性title不为“test”的<div>元素 注意,没有属性title的<div>元素也会被选取 |
[attribute^=value] | 选取属性的值以value为开始的元素 | $("div[title^=test]")选取属性title以“test”开始的<div>元素 |
[attribute$=value] | 选取属性的值以value为结尾的元素 | $("div[title$=test]")选取属性title以“test”结尾的<div>元素 |
[attribute*=value] | 选取属性的值含有value的元素 | $("div[title*=test]")选取属性title含有“test”的<div>元素 |
[attribute|=value] | 选取属性等于给定字符串或以该字符串为前缀(该字符串后跟一个连字符‘-’)的元素 | $("div[title|='en']")选取属性title等于“en”或者以"en"为前缀(该字符串后跟一个连字符‘-’)的<div>元素 |
[attribute~=value] | 选取属性用空格分隔的值中包含一个给定值的元素 | $("div[title~='uk']")选取属性title用空格分隔的值中包含字符"uk"的元素 |
[attribute1][attribute2][attributeN] | 用属性选择器合并成一个复合属性选择器,满足多个条件。 每选择一次,缩小一次范围 | $("div[id][title$='test']")选取拥有id属性,且title属性以test为结尾的<div>元素 |
5. 子元素过滤选择器
选择器 | 描述 | 示例 |
---|---|---|
:nth-child(Index/even/odd/equation) | 选取每个父元素下的第Index个子元素或奇偶元素(Index从1算起) | :eq(index)只匹配一个元素,而:nth-child将为每一个父元素匹配子元素,并且:nth-child(index)的index是从1开始的,而:eq(index)是从0算起的 |
:first-child | 选取每个父元素的第一个子元素 | :first只返回单个元素,而:first-child选择法将为每个父元素匹配第一个子元素 $("ul li:first-child")选取每个<ul>中第一个<li>元素 |
:last-child | 选取每个父元素的最后一个子元素 | :last只返回单个元素,而:last-child选择法将为每个父元素匹配最后一个子元素 $("ul li:last-child")选取每个<ul>中最后一个<li>元素 |
:only-child | 如果某个元素是它父元素中唯一的子元素,那么将会被匹配。 如果父元素含有其他元素,则不会被匹配 | $("ul li:only-child")在ul中选取是唯一子元素的<li>元素 |
6. 表单对象属性过滤选择器
选择器 | 描述 | 示例 |
---|---|---|
:enabled | 选取所有可用元素 | $("#form1 :enabled")选取id为“form1”的表单内所有可用元素 |
:disabled | 选取所有不可用元素 | $("#form2 :disabled")选取id为“form2”的表单内所有不可用元素 |
:checked | 选取所有被选中的元素(单选框、复选框) | $("input :checked")选取所有被选中的<input>元素 |
:selected | 选取所有被选中的选项元素(下拉列表) | $("select option :selected")选取所有被选中的选项元素 |
四、表单选择器
选择器 | 描述 | 示例 |
---|---|---|
: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")选取所有的按钮, 即所有 type="button" 的 <input> 元素 和 <button> 元素 $("button")只能获取 <button> 元素 |
:file | 选取所有的上传域 | $(":file")选取所有的上传域 |
:hidden | 选取所有不可见元素 | $(":hidden")选取所有不可见元素 |
【选择器中的注意事项】
1. 选择器中含有“·”、“#”、“(”或“]”等特殊字符,需要使用转义符转义
举例:
HTML代码:
<div id='id#b'>bb</div>
<div id='id[1]'>cc</div>
错误方式:
$("#id#b")
$("#id[1]")
正确方式:
$("#id\\#b")
$("#id\\[1\\]")
2. 属性选择器的@符号问题
jQuery1.3.1以上版本,属性前不需要添加@符号,比如:
$("div[@title='test']")
正确写法应为:
$("div[title='test']")
3. 选择器中含有空格
选择器中的空格不可忽略,有空格为后代选择器,无空格为过滤选择器
HTML:
<div class="one">
<div class="mini">This is div</div>
<div class="mini">1</div>
</div>
<div class="one">
<div class="mini">2-1</div>
<div class="mini">2-2</div>
</div>
$(".one:last").css("background","#f66"); //选取最后一个class=“one”的<div>元素
$(".one :last").css("background","#f60"); //选取最后一个class=“mini”的<div>元素