您的位置：首页 > Web前端 > JQuery

jQuery系列：选择器

2015-06-05 07:26 661 查看

　　jQuery选择器通过标签名、属性名或内容对DOM元素进行选择，而不用担心浏览器的兼容性。

1. 基本选择器

　　基本选择器是jQuery中使用最频繁的选择器，由元素ID、class、元素名、多个选择符组成，通过基本选择器可以实现大多数页面元素的查找。

选择器	功能	返回值	示例
*	匹配所有元素	元素集合	$("*")
#id	根据指定的ID匹配一个元素，示例选取id="loading"的元素	单个元素	$("#loading")
.class	根据指定的类名称匹配元素，示例选取class="readonly"的元素	元素集合	$(".readonly")
.class.class	根据指定的类名称匹配元素，示例选取class="item selected"的元素	元素集合	$(".item.selected")
element	根据指定的元素名匹配所有元素	元素集合	$("div")
selector1,selector2,...selectorN	将每一个选择匹配到的元素合并后一起返回	元素集合	$("div,span")

　　示例：

<ul class="container">
<li>选项1</li>
<li class="item selected">选项2</li>
<li>选项3</li>
<li>选项4</li>
<li>选项5</li>
</ul>

<script type="text/javascript">
$(function () {
$(".item.selected").css("background-color", "#F5F5F5");
});
</script>

2. 层次选择器

　　层次选择器通过DOM元素间的层次关系获取元素，主要的层次关系包括后代、父子、相邻、兄弟关系等，通过其中关系定位元素。

选择器	功能	返回值	示例
ancestor descendant	根据祖先元素匹配所有的后代元素	元素集合 Array<element(s)>	$("form input")
parent > child	在给定的父元素下匹配所有的子元素	元素集合	$("form > input")
prev + next	匹配所有紧接在 prev 元素后的 next 元素	元素集合	$("label + input")
prev ~ siblings	匹配 prev 元素之后的所有兄弟元素	元素集合	$("form ~ input")
next([expr])	选取一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。	元素集合	$("#first-item").next() $("#first-item").next(".selected")
nextAll([expr])	查找当前元素之后所有的同辈元素。	元素集合	$("#first-item").nextAll() $("#first-item").nextAll(".selected")
nextUntil([expr \| elelment][,filter])	查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。	元素集合	$("#first-item").nextUntil(".selected")
prev([expr])	选取一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。	元素集合	$("#last-item").prev() $("#last-item").prev(".selected")
prevAll([expr])	查找当前元素之前所有的同辈元素	元素集合	$("#last-item").prevAll() $("#last-item").prevAll(".selected")
prevUntil([expr \| elelment][,filter])	查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。	元素集合	$("#last-item").prevUntil(".selected")
siblings([expr])	选取一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。	元素集合	$("#third-item").siblings() $("#third-item").siblings(".selected")

　　示例：ancestor descendant

<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>

$("form input")

　　结果：

[ <input name="name" />, <input name="newsletter" /> ]

　　示例：parent > child

<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>

$("form > input")

　　结果：

[ <input name="name" /> ]

　　示例：next([expr])

<ul>
<li id="first-item">选项1</li>
<li>选项2</li>
<li>选项3</li>
<li>选项4</li>
<li>选项5</li>
</ul>

<script type="text/javascript">
$(function () {
$("#first-item").next().css("background-color", "#F5F5F5");
});
</script>

<ul>
<li id="first-item">选项1</li>
<li class="selected">选项2</li>
<li>选项3</li>
<li>选项4</li>
<li>选项5</li>
</ul>

<script type="text/javascript">
$(function () {
$("#first-item").next(".selected").css("background-color", "#F5F5F5");
});
</script>

<ul>
<li id="first-item">选项1</li>
<li>选项2</li>
<li class="selected">选项3</li>
<li>选项4</li>
<li>选项5</li>
</ul>

<script type="text/javascript">
$(function () {
$("#first-item").next(".selected").css("background-color", "#F5F5F5");
});
</script>

　　由于next(".selected")方法只选取下一个元素，而下一个元素不满足class="selected"，$("#first-item").next(".selected")为null。

　　示例：nextAll([expr])

<ul>
<li id="first-item">选项1</li>
<li>选项2</li>
<li class="selected">选项3</li>
<li class="selected">选项4</li>
<li>选项5</li>
</ul>

$("#first-item").nextAll(".selected").css("background-color", "#F5F5F5");

　　示例：nextUntil([expr | elelment][,filter])

<ul>
<li id="first-item">选项1</li>
<li>选项2</li>
<li>选项3</li>
<li class="selected">选项4</li>
<li>选项5</li>
</ul>

$("#first-item").nextUntil(".selected").css("background-color", "#F5F5F5");

　　示例：siblings([expr])

<ul>
<li>选项1</li>
<li>选项2</li>
<li id="third-item">选项3</li>
<li>选项4</li>
<li>选项5</li>
</ul>

$("#third-item").siblings().css("background-color", "#F5F5F5");

<ul>
<li class="selected">选项1</li>
<li>选项2</li>
<li id="third-item">选项3</li>
<li class="selected">选项4</li>
<li>选项5</li>
</ul>

$("#third-item").siblings(".selected").css("background-color", "#F5F5F5");

3. 索引过滤选择器

　　过滤选择器某类过滤规则进行元素的匹配，书写时都以冒号（:）开头。

选择器	功能	返回值	示例
first()或:first	选取第一个元素	单个元素	$("li").first() $("li:first")
last()或:last	选取最后一个元素	单个元素	$("li").last() $("li:last")
:not(selector)	去除所有与给定选择器匹配的元素	元素集合	$("li:not(.selected)") $("input:not(:checked)")
:even	选取所有索引值为偶数的元素，索引号从0开始。	元素集合	$("li:even")
:odd	选取所有索引值为奇数的元素，索引号从0开始。	元素集合	$("li:odd")
:eq(index)	选取指定索引值的元素，索引号从0开始。	单个元素	$("li:eq(1)")
:gt(index)	选取所有大于指定索引值的元素，索引号从0开始。	元素集合	$("li:gt(3)")
:lt(index)	选取所有小于指定索引值的元素，索引号从0开始。	元素集合	$("li:lt(3)")
:header	选取所有标题类型的元素，如：h1,h2,...	元素集合	$(":header")
:animated	选取所有正在执行动画效果的元素	元素集合	$(":animated")

　　示例：:not(selector)

<ul>
<li class="selected">选项1</li>
<li>选项2</li>
<li>选项3</li>
<li class="selected">选项4</li>
<li>选项5</li>
</ul>

$("li:not(.selected)").css("background-color", "#F5F5F5");

4. 内容过滤选择器

　　内容过滤选择器根据元素的文字内容或所包含的子元素特征获取元素，其文字内容可以模糊或绝对匹配进行元素定位。

选择器	功能	返回值	示例
:contains(text)	获取包含指定文本的元素	元素集合	$("div:contains('A')")
:empty	获取所有不包含子元素或者文本的空元素	元素集合	$("td:empty")
:has(selector)	获取包含有选择器所匹配的元素	元素集合	$("div:has(span)")
:parent	匹配含有子元素或者文本的元素	元素集合	$("td:parent")

5. 可见性过滤选择器

选择器	功能	返回值	示例
:hidden	获取所有不可见的元素，或type="hidden"的元素	元素集合	$("tr:hidden")
:visible	获取所有可见元素	元素集合	$("tr:visible")

6. 属性过滤选择器

　　属性过滤选择器是根据元素的某个属性获取元素。

选择器	功能	返回值	示例
[attribute]	选取包含指定属性的元素	元素集合	$("div[id]")
[attribute=value]	选取指定的属性等于某个特定值的元素	元素集合	$("input[type='text']")
[attribute!=value]	选取指定的属性不等于某个特定值的元素	元素集合	$("input[type!='text']")
[attribute^=value]	选取指定的属性以某个特定值开始的元素	元素集合	$("div[title^='A']")
[attribute^=value]	选取指定的属性以某个特定值开始的元素	元素集合	$("div[title^='A']")
[attribute$=value]	选取指定的属性以某个特定值结尾的元素	元素集合	$("div[title$='A']") $("a[href$='.jpg']")
[attribute*=value]	选取指定的属性包含某个特定值的元素	元素集合	$("div[title*='A']")
[selector1][selector2][selectorN]	选取满足多个条件的复合属性的元素	元素集合	$("input[id][type='input']")

7. 子元素过滤选择器

选择器	功能	返回值	示例
:nth-child(eq\|even\|odd\|index)	获取每个元素下的特定位置元素，索引号从1开始。	元素集合	$("#container li:nth-child(2)") $("li:nth-child(even)") $("li:nth-child(odd)") $("li:nth-child(3n)") $("li:nth-child(3n+1)") $("li:nth-child(3n+2)")
:nth-last-child(eq\|even\|odd\|index)	获取每个元素下的特定位置元素，计数从最后一个元素开始到第一个。	元素集合	$("#container li:nth-last-child(2)") $("li:nth-last-child(even)") $("li:nth-last-child(odd)") $("li:nth-last-child(3n)") $("li:nth-last-child(3n+1)") $("li:nth-last-child(3n+2)")
:first-child	获取每个父元素下的第一个子元素	元素集合	$("li:first-child")
:last-child	获取每个父元素下的最后一个子元素	元素集合	$("li:last-child")
:only-child	获取每个父元素下的仅有一个子元素	元素集合	$("li:only-child")

8. 表单对象属性过滤选择器

　　表单对象属性选择器通过表单对象属性特征选取该类元素。

选择器	功能	返回值	示例
:enabled	选取表单中所有属性为可用的元素	元素集合	$("input:enabled")
:disabled	选取表单中所有属性为不可用的元素	元素集合	$("input:disabled")
:checked	选取表单中所有被选中的元素	元素集合	$("input:checked")
:selected	选取表单中所有被选中option的元素	元素集合	$("select option:selected")

　　示例：:selected

$("select option:selected").text();

9. 表单选择器

选择器	功能	返回值	示例
:input	选取所有input、textarea、select	元素集合	$(":input")
:text	选取所有 type="text" 的input元素	元素集合	$(":text")
:password	选取所有 type="password" 的 input 元素	元素集合	$(":password")
:radio	选取所有type="radio" 的 input 元素	元素集合	$(":radio")
:checkbox	选取所有 type="checkbox" 的 input 元素	元素集合	$(":checkbox")
:submit	选取所有 type="submit" 的 input 元素	元素集合	$(":submit")
:image	选取所有 type="image" 的 input 元素	元素集合	$(":image")
:reset	选取所有 type="reset" 的 input 元素	元素集合	$(":reset")
:button	选取所有 type="button" 的 input 元素	元素集合	$(":button")
:file	选取所有 type="file" 的 input 元素	元素集合	$(":file")

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航