从css1到css3的选择器有很多，但是JQuery的选择器都能完美的支持，而且API操作起来也特别方便好用，在很大程度上精简了代码，节约了很多性能。
jQuery选择器的优势
- 代码更简单
- 支持CSS1到CSS3选择器
- 完善的处理机制
jQuery 选择器
- jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
- jQuery 中所有选择器都以美元符号开头：$()。
- jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery选择器的分类
一、jQuery 基本选择器
基本选择器是jQuery中使用最多的选择器，它由元素Id、class、元素名、多个元素符组成。
- 元素名(标签名)选择器：基于元素名称选取指定名称的元素。格式： $("tagName")
- ID 选择器：通过 HTML 元素的 id 属性值, 匹配具有特定id的元素。格式： $("#id值")
- class 类选择器：根据元素的class属性, 匹配所有class值相同的元素。格式： $(".class值")
- 多元素选择器：匹配多个选择器选中的元素。格式： $("选择器1,选择器2,…选择器N")
- $("*")：选择所有元素
| 选择器 | 实例 | 选取 |
|---|---|---|
| * | $("*") | 所有元素 |
| #id | $("#lastname") | id="lastname" 的元素 |
| .class | $(".intro") | class="intro" 的所有元素 |
| .class,.class | $(".intro,.demo") | class 为 "intro" 或 "demo" 的所有元素 |
| element | $("p") | 所有 <p> 元素 |
| el1,el2,el3 | $("h1,div,p") | 所有 <h1>、<div> 和 <p> 元素 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
// 改变元素名为 <p> 的所有元素的背景色为#ff69b4
$("#b1").click(function(){
$("p").css("background-color","#ff69b4");
});
// 改变 id 为 test 的元素的背景色为#9acd32
$("#b2").click(function(){
$("#test").css("background-color","#9acd32");
});
// 改变 class 为 min 的元素的背景色为#ff0033
$("#b3").click(function(){
$(".min").css("background-color","#ff0033");
});
// 改变所有的 p 元素和 id 为test, class 为 min 的所有元素的背景色为#006400
$("#b4").click(function(){
$("p,#test,.min").css("background-color","#006400");
});
});
</script>
</head>
<body>
<h2 id="test">改变 id 为 test 的元素的背景色</h2>
<span class="min">改变 class 为 min 的元素的背景色</span>
<p> 改变元素名为 p 的所有元素的背景色</p>
<p> 改变元素名为 p 的所有元素的背景色</p>
<button id="b1">元素选择器</button>
<button id="b2">#id 选择器</button>
<button id="b3">.class 选择器</button>
<button id="b4">多元素选择器</button>
</body>
</html>
二、层次选择器
层次选择器通过DOM元素间的层次关系来获取元素，主要的层次关系包括父子、后代、相邻、兄弟关系。
- ancestor descendant：根据祖先元素下匹配所有的后代元素，中间用空格隔开
- parent > child：在给定的父元素下匹配所有的子元素
- prev + next：匹配所有紧接在 prev 元素后的相邻元素
- prev ~ siblings：匹配 prev 元素之后的所有兄弟元素（siblings元素与prev元素同辈）
| 选择器 | 实例 | 选取 |
|---|---|---|
| parent > child | $("div > p") | <div> 元素的直接子元素的所有 <p> 元素 |
| parent descendant | $("div p") | <div> 元素的后代的所有 <p> 元素 |
| element + next | $("div + p") | 每个 <div> 元素相邻的下一个 <p> 元素 |
| element ~ siblings | $("div ~ p") | <div> 元素同级的所有 <p> 元素 |
三、过滤选择器
① 简单过滤选择器
过滤选择器是根据某类过滤规则进行元素的匹配，书写时都以(:)开头；简单过滤选择器是过滤选择器中使用最广泛的一种。
| 选择器 | 实例 | 选取 |
|---|---|---|
| :first 或first() | $("p:first") | 第一个 <p> 元素 |
| :last 或last() | $("p:last") | 最后一个 <p> 元素 |
| :even | $("tr:even") | 所有偶数 <tr> 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。 |
| :odd | $("tr:odd") | 所有奇数 <tr> 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。 |
| :eq(index) | $("ul li:eq(3)") | 列表中的第四个元素（index 值从 0 开始） |
| :gt(no) | $("ul li:gt(3)") | 列举 index 大于 3 的元素，索引号从 0 开始 |
| :lt(no) | $("ul li:lt(3)") | 列举 index 小于 3 的元素，索引号从 0 开始 |
| :not(selector) | $("input:not(:empty)") | 所有不为空的输入元素。即除给定选择器外的所有元素 |
| :header | $(":header") | 所有标题元素 <h1>, <h2> ... |
| :animated | $(":animated") | 所有动画元素 |
| :focus | $(":focus") | 当前具有焦点的元素 |
| :root | $(":root") | 文档的根元素 |
| :lang(language) | $("p:lang(de)") | 所有 lang 属性值为 "de" 的 <p> 元素 |
| :target | $( "p:target" ) | 选择器将选中ID和URI中一个格式化的标识符相匹配的<p>元素 |
② 内容过滤选择器
内容过滤选择器是根据元素中的文字内容或所包含的的子元素特征获取元素，其文字内容可以模糊或绝对匹配进行元素定位。
| 选择器 | 实例 | 选取 |
|---|---|---|
| :contains(text) | $(":contains('Hello')") | 所有包含文本 "Hello" 的元素 |
| :has(selector) | $("div:has(p)") | 所有包含有 <p> 元素在其内的 <div> 元素 |
| :empty | $(":empty") | 获取所有不包含子元素或者文本的空元素 |
| :parent | $(":parent") | 匹配所有含有子元素或者文本的父元素。 |
③ 可见性过滤选择器
可见性过滤选择器根据元素是否可见的特征来获取元素。
| 选择器 | 实例 | 选取 |
|---|---|---|
| :hidden | $("p:hidden") | 所有隐藏的 <p> 元素，或者 type 为 hidden 的元素 |
| :visible | $("table:visible") | 所有可见的表格 |
④ 属性过滤选择器
属性过滤选择器根据元素的某个属性获取元素，如 ID 号或匹配属性值的内容，并以“[”号开始，以“]”号结束。
| 选择器 | 实例 | 选取 |
|---|---|---|
| [attribute] | $("[href]") | 所有带有 href 属性的元素 |
| [attribute=value] | $("[href='default.htm']") | 所有带有 href 属性且值等于 "default.htm" 的元素 |
| [attribute!=value] | $("[href!='default.htm']") | 所有带有 href 属性且值不等于 "default.htm" 的元素 |
| [attribute$=value] | $("[href$='.jpg']") | 所有带有 href 属性且值以 ".jpg" 结尾的元素 |
| [attribute|=value] | $("[title|='Tomorrow']") | 所有带有 title 属性且值等于 'Tomorrow' 或者以 'Tomorrow' 后跟连接符作为开头的字符串 |
| [attribute^=value] | $("[title^='Tom']") | 所有带有 title 属性且值以 "Tom" 开头的元素 |
| [attribute~=value] | $("[title~='hello']") | 所有带有 title 属性且值包含单词 "hello" 的元素 |
| [attribute*=value] | $("[title*='hello']") | 所有带有 title 属性且值包含字符串 "hello" 的元素 |
| [name=value][name2=value2] | $( "input[id][name$='man']" ) | 带有 id 属性，并且 name 属性以 man 结尾的输入框 |
⑤ 子元素过滤选择器
在页面开发过程中，常常遇到突出指定某行的需求。虽然使用基本过滤选择器 :eq(index) 可实现单个表格的显示，但不能满足大量数据和多个表格的选择需求。为了实现这样的功能，jQuery中可以通过子元素过滤选择器轻松获取所有父元素中指定的某个元素。
| 选择器 | 实例 | 选取 |
|---|---|---|
| :first-child | $("p:first-child") | 属于其父元素的第一个子元素的所有 <p> 元素 |
| :first-of-type | $("p:first-of-type") | 属于其父元素的第一个 <p> 元素的所有 <p> 元素 |
| :last-child | $("p:last-child") | 属于其父元素的最后一个子元素的所有 <p> 元素 |
| :last-of-type | $("p:last-of-type") | 属于其父元素的最后一个 <p> 元素的所有 <p> 元素 |
| :nth-child(n) | $("p:nth-child(2)") | 属于其父元素的第二个子元素的所有 <p> 元素 |
| :nth-last-child(n) | $("p:nth-last-child(2)") | 属于其父元素的第二个子元素的所有 <p> 元素，从最后一个子元素开始计数 |
| :nth-of-type(n) | $("p:nth-of-type(2)") | 属于其父元素的第二个 <p> 元素的所有 <p> 元素 |
| :nth-last-of-type(n) | $("p:nth-last-of-type(2)") | 属于其父元素的第二个 <p> 元素的所有 <p> 元素，从最后一个子元素开始计数 |
| :only-child | $("p:only-child") | 属于其父元素的唯一子元素的所有 <p> 元素 |
| :only-of-type | $("p:only-of-type") | 属于其父元素的特定类型的唯一子元素的所有 <p> 元素 |
⑥ 表单对象属性过滤选择器
此选择器主要是对所选择的表单元素进行过滤，例如选择被选中的下拉框，多选框等元素。
| 选择器 | 实例 | 选取 |
|---|---|---|
| :enabled | $(":enabled") | 选取所有启用的元素 |
| :disabled | $(":disabled") | 选取所有禁用的元素 |
| :selected | $(":selected") | 选取所有被选定的下拉列表元素 |
| :checked | $(":checked") | 选取所有被选中的复选框选项 |
四、表单选择器
无论是提交还是传递数据，表单在页面中的作用是显而易见的。通过表单进行数据的提交或处理，在前端页面开发中占据重要地位。因此，为了使用户能更加方便地、高效地使用表单，在 jQuery 选择器中引入表单选择器，该选择器专为表单量身打造，通过它可以在页面中快速定位某表单对象。
| 选择器 | 实例 | 选取 |
|---|---|---|
| :input | $(":input") | 所有 input 元素 |
| :text | $(":text") | 所有带有 type="text" 的 input 元素 |
| :password | $(":password") | 所有带有 type="password" 的 input 元素 |
| :radio | $(":radio") | 所有带有 type="radio" 的 input 元素 |
| :checkbox | $(":checkbox") | 所有带有 type="checkbox" 的 input 元素 |
| :submit | $(":submit") | 所有带有 type="submit" 的 input 元素 |
| :reset | $(":reset") | 所有带有 type="reset" 的 input 元素 |
| :button | $(":button") | 所有带有 type="button" 的 input 元素 |
| :image | $(":image") | 所有带有 type="image" 的 input 元素 |
| :file | $(":file") | 所有带有 type="file" 的 input 元素 |
本文地址：http://aszhi.com/jishu/jquery/61.html
关注我们：请关注一下微信号：扫描二维码
版权声明：本文为原创文章，版权归 小智 所有，欢迎分享本文，转载请保留出处！
关注我们：请关注一下微信号：扫描二维码
版权声明：本文为原创文章，版权归 小智 所有，欢迎分享本文，转载请保留出处！
