jQuery选择器之基本选择器、层次选择器
2017-06-28 01:22
411 查看
jQuery选择器类型
jQuery选择器主要分为四类：
1、基本选择器
2、层次选择器
3、过滤选择器
4、表单选择器
一点准备工作
为了能让大家看到具体的效果，这里先创建一个示例页面，里面包含各种<div>和<span>元素，然后用jQuery选择器来匹配元素并调整它们的样式。
一、基本选择器
基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过html元素id、class和标签名等来查找DOM元素。在网页中，每个id名称只能用一次，class允许重复使用。
基本选择器规则如下：
二、层次选择器
如果想通过DOM元素之间的层次关系来获取特定的元素，例如后代元素，子元素，相邻元素和兄弟元素等，那么层次选择器是一个非常好的选择。
层次选择器规则如下：
在层次选择器中，第1个和第2个比较常用，而后面两个因为在jQuery里可以用更加简单的方法代替，所以使用的机率相对较少。
可以用next()方法来代替$("prev+next")选择器，即$(".one+div")与$(".one").next("div")等效。
可以用nextAll()方法来代替$("prev~siblings")选择器，即$(".one~div")与$(".one").nextAll("div")等效。
三、过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需要的DOM元素，过滤规则与CSS中的伪类选择器语法相同。
按照不同的过滤规则，过滤选择器可以分为以下几种：
1、基本过滤选择器
2、内容过滤选择器
3、可见性过滤选择器
4、属性过滤选择器
5、子元素过滤选择器
6、表单对象属性过滤选择器
下面就对这几种过滤选择器分别加以介绍。
1.基本过滤选择器
基本过滤选择器是过滤选择器中用的最多的一种，它的过滤规则主要体现在元素的位置(索引)上及一些特定的元素。
2.内容过滤选择器
内容过滤选择器的过滤规则主要体现在它所含的子元素或文本内容上。
3.可见性过滤选择器
可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。
4.属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。
5.子元素过滤选择器
子元素过滤选择器的过滤规则是通过元素的父子关系来获取相应的元素。
这里值得一提的是:nth-child()，这个选择器的详细功能如下：
1、nth-child(even) 能选取每个父元素下的索引值是偶数的元素
2、nth-child(odd) 能选取每个父元素下的索引值是奇数的元素
3、nth-child(2) 能选取每个父元素下的索引值等于2的元素
4、nth-child(3n) 能选取每个父元素下的索引值等于3的倍数的元素，n从0开始
5、nth-child(3n+1) 能选取每个父元素下的索引值等于 (3n+1) 的的元素，n从0开始
6.表单对象属性过滤选择器
此选择器主要是对所选择的表单元素进行过滤。
四、表单选择器
顾名思义，表单选择器是为了能更加容易地操作表单，表单选择器是根据元素类型来定义的
参考：
http://www.cnblogs.com/artwl/archive/2012/02/06/2340617.html
jQuery选择器主要分为四类：
1、基本选择器
2、层次选择器
3、过滤选择器
4、表单选择器
一点准备工作
为了能让大家看到具体的效果，这里先创建一个示例页面，里面包含各种<div>和<span>元素，然后用jQuery选择器来匹配元素并调整它们的样式。
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
div,span,p{
width:140px;
height:140px;
margin:5px;
background:#aaa;
border:#000 1px solid;
float:left;
font-size:17px;
}
div.mini{
width:55px;
height:55px;
background-color:#aaa;
font-size:12px;
}
div.hide{
display:none;
}
</style>
</head>
<body>
<div class="one" id="one">
id为one,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none" class="none">
style的display为none的div
</div>
<div class="hide">class为hide的div</div>
<div>
包含input的type为hidden的div
<input type="hidden" size="8"/>
</div>
<span id="move">正在执行动画的span元素</span>
</body>
</html>一、基本选择器
基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过html元素id、class和标签名等来查找DOM元素。在网页中，每个id名称只能用一次，class允许重复使用。
基本选择器规则如下：
| 选 择 器 | 描 述 | 返 回 | 示 例 |
| #id | 根据给定的id匹配一个元素 | 单个元素 | $("#test")选取 id 为 test 的元素 |
| .class | 根据给定的类名匹配元素 | 集合元素 | $(".test")选取所有 class 为 test 的元素 |
| element | 根据给定的元素名匹配元素 | 集合元素 | $("p")选取所有的 <p> 元素 |
| * | 匹配所有元素 | 集合元素 | $("*")选取所有的元素 |
| selector1,selector2, ...,selectorN | 将每一个选择器匹配到的元 素合并后一起返回 | 集合元素 | $("div,span,p.myClass")选取所有<div>， <span>和拥有class为 myClass 的<p> 标签的一组元素 |
二、层次选择器
如果想通过DOM元素之间的层次关系来获取特定的元素，例如后代元素，子元素，相邻元素和兄弟元素等，那么层次选择器是一个非常好的选择。
层次选择器规则如下：
| 选 择 器 | 描 述 | 返 回 | 示 例 |
| $("ancestor descendant") | 选取ancestor元素里所有 descendant(后代)元素 | 集合元素 | $("div span")选取 <div>里的所 有的<span>元素 |
| $("parent>child") | 选取parent元素下的child(子)元素 | 集合元素 | $("div>span")选取 <div>元素下 元素名是<span>的子元素 |
| $("prev+next") | 选取紧接在prev元素后的next元素 | 集合元素 | $(".one+div")选取class为one的 下一个 <div> 兄弟元素 |
| $("prev~siblings") | 选取prev元素之后的所有siblings元素 | 集合元素 | $("#two~div")选取id为two的元素 后面所有 <div> 兄弟元素 |
可以用next()方法来代替$("prev+next")选择器，即$(".one+div")与$(".one").next("div")等效。
可以用nextAll()方法来代替$("prev~siblings")选择器，即$(".one~div")与$(".one").nextAll("div")等效。
三、过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需要的DOM元素，过滤规则与CSS中的伪类选择器语法相同。
按照不同的过滤规则，过滤选择器可以分为以下几种：
1、基本过滤选择器
2、内容过滤选择器
3、可见性过滤选择器
4、属性过滤选择器
5、子元素过滤选择器
6、表单对象属性过滤选择器
下面就对这几种过滤选择器分别加以介绍。
1.基本过滤选择器
基本过滤选择器是过滤选择器中用的最多的一种，它的过滤规则主要体现在元素的位置(索引)上及一些特定的元素。
| 选 择 器 | 描 述 | 返 回 | 示 例 |
| :first | 选取第1个元素 | 单个元素 | $("div:first")选取所有 <div>元素 中第一个<div>元素 |
| :last | 选取最后1个元素 | 单个元素 | $("div:last")选取所有 <div>元素 中最后一个<div>元素 |
| :not(selector) | 去除所有与给定选择器 匹配的元素 | 集合元素 | $("input:not(.myClass)")选取class不是 myClass的<input>元素 |
| :even | 选取索引(从0开始)是偶数 的所有元素 | 集合元素 | $("input:even")选取索引是偶数的 <input>元素 |
| :odd | 选取索引(从0开始)是奇数 的所有元素 | 集合元素 | $("input:odd")选取索引是奇数的 <input>元素 |
| :eq(index) | 选取索引(从0开始)等于 index的元素 | 单个元素 | $("input:eq(1)")选取索引等于1的 <input>元素 |
| :gt(index) | 选取索引(从0开始)大于 index的元素 | 集合元素 | $("input:gt(1)")选取索引大于1的 <input>元素 |
| :lt(index) | 选取索引(从0开始)小于 index的元素 | 集合元素 | $("input:lt(1)")选取索引小于1的 <input>元素 |
| :header | 选取所有的标题元素，即 <h1>到<h6> | 集合元素 | $(":header")选取页面中所有的标题元素 |
| :animated | 选取当前正在执行动画的 所有元素 | 集合元素 | $("div:animated")选取当前正在执行动画 的<div>元素 |
内容过滤选择器的过滤规则主要体现在它所含的子元素或文本内容上。
| 选 择 器 | 描 述 | 返 回 | 示 例 |
| :contains(text) | 选取含有文本内容为 text 的元素 | 集合元素 | $("div:contains('test')")选取含有文本内容 为 test 的<div>元素 |
| :empty | 选取不包含子元素或文本的空元素 | 集合元素 | $("div:empty")选取不包含子元素或文本 的空<div>元素 |
| :has(selector) | 选取含有给定选择器 匹配的元素的元素 | 集合元素 | $("div:has(.myClass)")选取含有class为 myClass的元素的<div>元素 |
| :parent | 选取含有子元素或文本的元素 | 集合元素 | $("div:parent")选取含有子元素或文本的 <div>元素 |
可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。
| 选 择 器 | 描 述 | 返 回 | 示 例 |
| :hidden | 选取所有不可见的元素 | 集合元素 | $("div:hidden")选取所有不可见的<div>元素 |
| :visible | 选取所有不可见的元素 | 集合元素 | $("div:visible")选取所有可见的<div>元素 |
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。
| 选 择 器 | 描 述 | 返 回 | 示 例 |
| [attribute] | 选取拥有此属性的元素 | 集合元素 | $("div[id]")选取拥有属性id的元素 |
| [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] | 选取属性的值以value结束的元素 | 集合元素 | $("div[title$=test]")选取属性 title 以 test 结束的<div>元素 |
| [attribute*=value] | 选取属性的值含有value的元素 | 集合元素 | $("div[title*=test]")选取属性 title 含 有 test 的<div>元素 |
| [selector1][selector2] ...[selectorN] | 选取匹配以上所有属性 选择器的元素 | 集合元素 | $("div[id][title*=test]")选取拥有属性id， 且属性 title 含有 test 的<div>元素 |
子元素过滤选择器的过滤规则是通过元素的父子关系来获取相应的元素。
| 选 择 器 | 描 述 | 返 回 | 示 例 |
| :nth-child(index/ even/odd/equation) | 选取每个父元素下的第index(索引值为奇数/ 索引值为偶数/索引值等于某个表达式)个子元 素，index从1开始 | 集合元素 | $("div:nth-child(1)")选取每个<div>中第一个子元素 |
| :first-child | 选取每个父元素下的第1个子元素 | 集合元素 | $("div :first-child")选取每个<div>下第一个子元素 |
| :last-child | 选取每个父元素下的最后1个子元素 | 集合元素 | $("div :last-child")选取每个<div>下最后一个子元素 |
| :only-child | 选取只有唯一子元素的元素的子元素 | 集合元素 | $("div :only-child")选择只有一个子元素的<div>元素 |
1、nth-child(even) 能选取每个父元素下的索引值是偶数的元素
2、nth-child(odd) 能选取每个父元素下的索引值是奇数的元素
3、nth-child(2) 能选取每个父元素下的索引值等于2的元素
4、nth-child(3n) 能选取每个父元素下的索引值等于3的倍数的元素，n从0开始
5、nth-child(3n+1) 能选取每个父元素下的索引值等于 (3n+1) 的的元素，n从0开始
6.表单对象属性过滤选择器
此选择器主要是对所选择的表单元素进行过滤。
| 选 择 器 | 描 述 | 返 回 | 示 例 |
| :enabled | 选取所有可用元素 | 集合元素 | $("body:enabled")选取页面内所有可用元素 |
| :disabled | 选取所有不可用元素 | 集合元素 | $("body:disabled")选取页面内所有不可用元素 |
| :checked | 选取所有被选中的元素(单选框、复选框) | 集合元素 | $("input:checked")选取所有被选中的<input>元素 |
| :selected | 选取所有被选中的选项元素(下拉列表) | 集合元素 | $("select: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")选取所有的按钮 |
| :file | 选取所有的上传按钮 | 集合元素 | $(":file")选取所有的上传按钮 |
| :hidden | 选取所有的不可见元素 | 集合元素 | $(":hidden")选取所有的不可见元素 |
http://www.cnblogs.com/artwl/archive/2012/02/06/2340617.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery选择器 基本选择器 层次选择器 表单选择器 过滤选择器 练习 事例
- 一步一步学习 JQuery (二) 选择器: 基本选择器 && 层次选择器
- jQuery\Dom对象转换、JQuery各类选择器（基本/层次选择器、基本过滤/内容过滤选择器）
- jQuery选择器介绍：基本选择器、层次选择器、过滤选择器、表单选择器
- JQuery -- 介绍，选择器及其示例， 基本选择器，层次选择器，过滤选择器，表单选择器
- Jquery基本选择器 层次选择器 过滤选择器 表单选择器使用示例 带注释
- Jquery基本选择器与层次选择器
- jQuery选择器介绍：基本选择器、层次选择器、过滤选择器、表单选择器
- 详解强大的jQuery选择器之基本选择器、层次选择器
- jQuery基本选择器和层次选择器
- jQuery选择器详细介绍：基本选择器，层次选择器，属性选择器
- jQuery选择器之基本选择器和层次选择器
- jQuery基本选择器、层次选择器
- Java乔晓松-jQuery介绍入门和对象转换、以及基本选择器和层次选择器
- Jquery基本、层次选择器
- jQuery选择器介绍：基本选择器、层次选择器、过滤选择器、表单选择器
- jquery 选择器(1) 基本丶层叠丶层次选择器
- jQuery系列02---jQuery基本选择器与层次选择器
- jquery过滤器，过滤器它是在基本选择器与层次选择器获取到一批元素后，再进行过滤操作
- jQuery基本选择器和层次选择器学习使用