JQuery之选择器
选择器允许您对元素组或单个元素进行操作。
JQuery是一种十分优秀的JS框架，能极大地方便开发者操纵页面各种元素的行为，提高开发javascript效率。而相比于JS，JQuery中提供了十分强大的选择器，使用起来类似于CSS中的选择器，简单而又便利。
jQuery 元素选择器和属性选择器允许通过标签名、属性名或内容对 HTML 元素进行选择。
选择器允许对 HTML 元素组或单个元素进行操作。
在 HTML DOM 术语中：
选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。
下面我们介绍在JQuery中常用的几种选择器。
引用：
要想使用JQuery要先引入JQuery库
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title></title> 5 <script src="JS/jquery-3.1.1.min.js"><br /> 6 //导入的JQuery库，不写内容！！ 7 </script> 8 <script type="text/javascript"> 9 10 </script> 11 </head> 12 13 <body> 14 15 </body> 16 </html>
选择器的使用语法：$(选择器)
在JQuery中使用“$”来代表JQuery中的一个回传函数。“()”中的内容就是使用的选择器。
1.元素选择器
通过id属性,class属性,或元素名来选择DOM对象，并封装成jQuery对象数组。
这几种选择器语法简单，选择方便。
例如id选择器：
JQuery代码：
$("#div1");
HTML代码：
1 <body> 2 <div id="div1"></div> 3 <div></div> 4 <div></div> 5 <div></div> 6 </body>
会返回#div1中的内容，这种使用方法适用于选取DOM中的所有元素
2.层次选择器
选择子元素、兄弟元素等，有如下四种：
①ancestor descendant：
在给定的祖先元素下匹配所有的后代元素
ancestor：祖先元素 descendant：后代元素
② parent > child：
在给定的父元素下匹配所有的子元素
parent：父元素 child：子元素
③prev + next：
匹配所有紧接在 prev 元素后的 next 元素，例如：
JQuery代码：
$("label + input")
HTML代码：
1 <body> 2 <form> 3 <label>Name:</label> 4 <input name="name" /> 5 <fieldset> 6 <label>Newsletter:</label> 7 <input name="newsletter" /> 8 </fieldset> 9 </form> 10 <input name="none" /> 11 </body>
返回结果：
[ <input name="name" />, <input name="newsletter" /> ]
④prev ~ siblings
匹配 prev 元素之后的所有 siblings 元素，例如：
JQuery代码：
$("form ~ input")
HTML代码：
1 <form> 2 <label>Name:</label> 3 <input name="name" /> 4 <fieldset> 5 <label>Newsletter:</label> 6 <input name="newsletter" /> 7 </fieldset> 8 </form> 9 <input name="none" />
返回结果：
[ <input name="none" /> ]
3.过滤选择器
按照一定的规则来进行过滤的选择，均使用“:”来添加过滤条件。
在使用过滤选择器时，语法格式为$("元素:选择器")
①:eq(index)：
匹配一个给定索引值的元素，这个是我们最常使用的选择器，传入的index是元素的序号。
例如：
JQuery代码：
$("tr:eq(1)")
HTML代码：
<table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table>
返回结果：
[ <tr><td>Value 1</td></tr> ]