JQuery选择器

　　刚学CSS的时候我们已经接触了选择器，其实就是按照一定的规则选择出来我们想要获取到的元素。在这里，既然选择了用jQuery选择器，首先来谈谈JQuery选择器的优势：

1、简洁的写法：$()函数在很多JavaScript类库中都被作为一个选择器来使用，平时用到的JQuery对象都是通过$()函数制造出来的，$()函数就是一个JQuery对象的制造工厂。

2、良好的兼容性，支持CSS1到CSS3选择器。

3、完善的处理机制：当$()选择器选择到的元素不存在时会报错。

　

　　jQuery选择有4大类：基本选择器、层次选择器、过滤选择器、表单选择器

　　

1、基本选择器

　　基本选择器是JQuery中最简单的选择器，也是最简单的选择器。它通过元素id、class和标签名等来查找DOM元素。示例：$("#id")、$(".class")、$("p")、$("*")、$("selector1, selector2,....,selectorN")。

 

 2、层次选择器

　　如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和同辈元素等，那么层次选择器是一个很好的选择。

选择器	描述	返回	示例
$("ancestor descendant")	选取ancestor元素里的所有descendant（后代）元素	集合元素	$("div span")选取<div>里所有的<spn>元素
$("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>同辈元素

　　　　　　      

 

 

 

 

 

     

        

　　 可以用next()方法替代$(".one + next")选择器，比如：$(".one + div"); 等价于$(".one").next("div");

　　 可以用nextAll()方法替代$("#prev ~ div")选择器，比如：$("#prev ~ div");等价于$("#prev").nextAll("div");

　　 siblings()方法与nextAll()方法做比较：前者只能选择到"#pre"元素后面的同辈<div>元素；而siblings()方法与前后位置无关，只要是同辈节点就能匹配。

 

3、过滤选择器

　　过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都以一个冒号（：）开头。按照不同的过滤规则，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

　　

　　3.1  基本过滤选择器

选择器	描述	返回	示例
:first	选取第1个元素	单个元素	$("div:first")选取所有<div>中第1个<div>元素
:last	选取最后一个元素	单个元素	$("div:last")选取所有<div>元素中最后一个<div>元素
:not(selector)	去除所有与给定选择器匹配的元素	集合元素	$("input:not(.myClass)")选取class不是myClass的<input>元素
:even	选取索引是偶数的所有元素，索引从0开始	集合元素	$("input:even")选取索引是偶数的<input>
:odd	选取索引是奇数的所有元素，索引从0开始	集合元素	$("input:odd")选取索引是奇数的<input>
:eq(index)	选取索引号等于index的元素（index从0开始）	单个元素	$("input:eq(1)")选取索引等于1的<input>元素
:gt(index)	选取索引号大于index的元素（index从0开始）	集合元素	$("input:eq(1)")选取索引大于1的<input>元素
:lt(index)	选取索引号小于index的元素（index从0开始）	集合元素	$("input:eq(1)")选取索引小于1的<input>元素
:header	选取所有的标题元素，例如h1，h2，h3等等	集合元素	$(":header")选取网页中所有的<h1>，<h2>......
:animated	选取当前正在执行动画的所有元素	集合元素	$("div:animated")选取正在执行动画的 <div>元素
:focus	选取当前获取焦点的元素	集合元素	$(":focus")选取当前获取焦点的元素

 

 

 

 

 

 

 

 

 

 

 

 

　　3.2  内容过滤选择器

　　内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。

选择器	描述	返回	示例
:contains	选取含有文本内容为“text”的元素	集合元素	$("div:contains('我')")选取文本为“我”的<div>元素
:empty	选取不包含子元素后者文本的空元素	集合元素	$("div:empty")选取不包含子元素（包括文本元素）的<div>空元素
:has(selector)	选取含有选择器所匹配的元素的元素	集合元素	$("div:has(p)")选取含有<p>元素的<div>元素
:parent	选取含有子元素或者文本的元素	集合元素	$("div:parent")选取拥有子元素（包括文本元素）的<div>元素

 

 

 

 

 

 

　　3.3  可见性过滤选择器

　　可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。

选择器	描述	返回	示例
:hidden	选取所有不可见元素	集合元素	$(":hidden")选取所有不可见的元素。包括<input type="hidden"/>，<div style="display:none;">和<div style="visibility:hidden;">等元素。如果只想选取<input>，可以使用$("input:hidden").
:visible	选取所有可见的元素	集合元素	$("div:visible")选取所有可见的<div>元素

 

 

 

 

      

 

       3.4  属性过滤选择器

　　属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。

选择器	描述	返回	示例
[attribute]	选取拥有此属性的元素	集合元素	$("div[id]")选取拥有属性id的元素
[attribute=value]	选取属性的值为value的元素	集合元素	$("div[title=text]")选取属性title为"text"的<div>元素
[attribute!=value]	选取属性的值不等于value的元素	集合元素	$("div[title!=text]")选取属性title不等于“text”的元素（注意：没有属性title的<div>也会被选取）
[attribute^=value]	选取属性值以value开始的元素	集合元素	$("div[title^=text]")选取属性title以text开始的<div>元素
[attribute$=value]	选取属性的值以value结束的元素	集合元素	$("div[title$=text]")选取属性title以text结束的<div>元素
[attribute*=value]	选取属性的值含有value的元素	集合元素	$("div[title*=text]")选取属性title含有“text”的<div>元素
[attribute|=value]	选取属性等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“-”）的元素	集合元素	$('div[title|="en"]')选取属性title等于en或以en为前缀（该字符串后跟一个连字符'-'）的元素
[attribute~=value]	选取属性用空格分隔的值中包含一个给定的元素	集合元素	$('div[title~="uk"]')选取属性title用空格分隔的值中包含字符uk的元素
[attribute1][attribute2][attributeN]	用属性选择器合成一个复合属性选择器，满足多个条件。每选择一次，缩小一次范围	集合元素	$("div[id][title$='text']")选取拥有属性id，且属性title以“text”结束的<div>元素

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

       3.5  子元素过滤选择器

　　子元素过滤选择器的规则相对于其他选择器稍微有些复杂，不过没关系，只要将元素的父元素和子元素区分很清楚，用起来就变得很简单。

选择器	描述	返回	示例
:nth-child(index/even/odd/equation)	选取每个父元素下的第index个子元素或者奇偶元素（index从1算起）	集合元素	:eq(index)只匹配一个元素，而:nth-child将为每一个父元素匹配子元素，并且:nth-child(index)的index是从1开始的，而：eq(index)是从0算起的
:first-child	选取每个父元素的第1个子元素	集合元素	:first只返回单个元素，而:first-child选择符将为每个父元素匹配第1个子元素。例如$("ul li:first-child");选取每个<ul>中第一个<li>元素
:last-child	选取每个父元素的最后一 个子元素	集合元素	:last只返回单个元素，而:last-child选择符将为每个父元素匹配第1个子元素。例如$("ul li:last-child");选取每个<ul>中最后一个<li>元素
:only-child	如果某个元素是它父元素中唯一的子元素，那么将会被匹配。如果父元素中含有其他元素，则不会被匹配	集合元素	$("ul li:only-child")在<ul>中选取是唯一子元素的<li>元素

 

 

 

 

 

 

 

 

        3.6  表单对象属性过滤选择器

　　此选择器主要是对所选择的表单进行过滤，例如选择被选中的下拉框，多选框等元素。

选择器	描述	返回	示例
:enable	选取所有可用元素	集合元素	$("#form1  :enable");选取id为“form1”的表单内的所有可用元素
:disabled	选取所有不可用元素	集合元素	$("#form2  :disabled");选取id为“form2”的表单内的所有不可用元素
:checked	选取所有被选中的元素（单选框，复选框）	集合元素	$("input:checked");选取所有被选中的<input>元素
:selected	选取所有被选中的选项元素（下拉列表）	集合元素	$("select option:selected");选取所有被选中的选项元素

 

 

 

 

 

 

4、表单选择器

　　为了使用户能更加灵活地操作表单，jQuery中专门加入了表单选择器。

选择器	描述	返回	示例
:input	选取所有的<input><textarea><select>和<button>元素	集合元素	$(":input")选取所有<input><textarea><select><button>元素
:text	选取所有的单行文本框	集合元素	$(":text")选取所有的单行文本框
:password	选取所有的密码框	集合元素	$(":password")选取所有的密码框
:radio	选取所有的单选框	集合元素	$(":radio")选取所有的单选框
:checkbox	选取所有的多选框	集合元素	$(":checked")选取所有的复选框
:submit	选取所有的提交按钮	集合元素	$(":submit")选取所有提交框
:image	选取所有的图像按钮	集合元素	$(":image")选取所有的图像按钮
:reset	选取所有的重置按钮	集合元素	$(":reset")选取所有的重置元素
:button	选取所有的按钮	集合元素	$(":button")选取所有的按钮
:file	选取所有的上传域	集合元素	$(":file")选取所有的上传域
:hidden	选取所有不可见元素	集合元素	$(":hidden")选取所有不可见元素(已经在不可见过滤选择器 中讲解过)

 

 

 

 

 

 

 

 

 

 

 

 

 

 　　选择器中一些注意事项：

 

1、选择器中含有 “.”、“#”、“（”或“]”等特殊字符。

根据w3c规定，属性值中是不能含有这些特殊字符的，但在实际开发中偶尔会遇到表达式中含有“#”、“.”等特殊字符，如果按照普通方式处理就会出错。解决方式是使用转义符转义。

1 <div id="id#b">bb</div>
2 <div id="id[1]">cc</div>
3 /*正确的获取方式*/
4 $("#id\\#b");     //转义特殊字符“#”
5 $("#id\\[1\\]");   //转义特殊字符“[ ]”

 

2、选择器中含有空格的注意事项

1 $(".test:hidden");    //不带空格，选取class为.test且不可见的元素
2 $(".test: hidden");   //带空格，选取class为.test的后代所有不可见元素

 

　　JQuery拥有强大的选择器，根据需求，我们可以灵活的获取任何元素。“缺点”就是有些多，用的少点话恐怕很难想到有这么个方便的选择器。因此，我们需要熟练掌握他们，以备不时之需！

 

　　下一期：jQuery中的DOM操作