JQuery上面的选择器

在这里我要说一下我们说用的JQuery是一种插件，这个JQuery的里面的源码也都是我们知道的JavaScript来实现的，但是并不代表JQuery就是等同于JavaScript的。还有我们们要注意的是JQuery每一个版本的所实现的兼容性的不同也是不同的。

选择器

基本选择器

1、#id(这个是id选择器)
2、.class(这个是class选择器)
3、*(这个是通配符选择器)
4、element(这个element是表示的是页面上的标签的)
5、selector1，selector2,selectorN（这个是一次可以给多个选择器给出同样的样式）

这里的基本选择器的使用方法都是在$(" ")里面的，这里的基本选择器的使用方法和css里面的使用方法是一样的。

层级选择器

1、选择器1 后代标签(这里的选择器就是和css里面是的后代选择器一样的语法)
例：div p或者是这样div .left-div

2、选择器1>儿子标签(这里的选择器和css里面的子代选择器一样的语法使用)
例：div>p 或者是这样 div>.left-div

3、选择器 + 后面兄弟元素(这个表示找到选择器后面的一个兄弟元素)
例：$(“label + input”)

4、选择器 ~ 后面所有兄弟元素(这个是表示找到选择器后面的所有兄弟元素)
例：

//这是HTML代码
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

//JQuery代码
$("form ~ input")

这里的层级选择器和css里面使用的方法是一样的。

基本筛选器

1、:first（获取第一个元素）
使用方法：$(‘li:first’);

2、:not§（去除所有与给定选择器匹配的元素）
注意：在jQuery 1.3中，已经支持复杂选择器了（例如:not(div a) 和 :not(div,a)）
使用方法：$(“input:not(:checked)”)

3、:even（匹配所有索引值为偶数的元素，从 0 开始计数）
使用方法：$(“tr:even”)

4、:odd（匹配所有索引值为奇数的元素，从0开始奇数）
使用方法：$(“tr:odd”)

5、:eq(index)（匹配一个给定索引值的元素,这里的index是具体的下标数，而且还是从0开始计数的，这个index可以为正数也可以为负数）
例：

$("li:eq(1)")//这个是查找到顺数li下标为1的元素
$("li:eq(-1)")//这个是查找到倒数第一个li的元素

6、:gt(index)（匹配所有大于给定索引值得元素，这个也是从0开始计数的）
例：

$("li:gt(0)")//这个是找到li的索引值大于0的所有元素

7、:last（获取最后个元素）
例：$(‘li:last’)

8、:lt(index)（匹配所有小于给定索引值得元素，这个也是从0开始计数的）
例：$(“li:lt(2)”)

9、:header（匹配如 h1, h2, h3之类的标题元素）

例：

$(":header").css("background", "#EEE");//这个是找到所有标题元素并且被其添加上背景颜色

10、:animated（匹配所有正在执行动画效果的元素）

例：

//HTML代码
<button id="run">Run</button><div></div>
//JQuery代码
//click是给某个元素添加上点击事件
$("#run").click(function(){
//点击后改变动画元素的距离左边的距离
  $("div:not(:animated)").animate({ left: "+=20" }, 1000);
});

内容

1、:contains(text)（匹配包含给定文本的元素）

//HTML代码
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
//JQuery代码
$("div:contains('John')")//找到div元素里面的内容有John的元素

2、:empty（匹配所有不包含子元素或者文本的空元素）
例：

//html代码
<ul>
	<li>hsid</li>
	<li>hsid</li>
	<li></li>
	<li>hsid</li>
	<li>hsid</li>
</ul>
//JQuery代码
$("td:empty")//结果：[<li></li>]

3、:has(selector)(匹配含有选择器所匹配的元素的元素)
例

//html代码
<div><p>Hello</p></div>
<div>Hello again!</div>
//JQuery代码
$("div:has(p)").addClass("test");

4、:parent (匹配含有子元素或者文本的元素)
例：

//html代码
<table>
  <tr><td>Value 1</td><td></td></tr>
  <tr><td>Value 2</td><td></td></tr>
</table>
//JQuery代码
$("td:parent")
//结果
[ <td>Value 1</td>, <td>Value 2</td> ]

子元素

1、:first-child（匹配所给选择器( :之前的选择器)的第一个子元素）
类似的:first匹配第一个元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)
例：

//html代码
<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>
//jquery代码
$("ul li:first-child")
//结果：
[ <li>John</li>, <li>Glen</li> ]

2、:last-child (这个刚好和上面的那个选择器差不多，匹配最后一个子元素)
:last 只匹配最后一个元素，而此选择符将为每个父元素匹配最后一个子元素
例：

//html代码
<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>
//JQuery代码
$("ul li:last-child")
//结果
[ <li>Brandon</li>, <li>Ralph</li> ]

3、:nth-child（匹配其父元素下的第N个子或奇偶元素，这个匹配元素的序号是从1开始的）
:eq(index) 匹配选择器指定序列的元素，而这个将为每一个父元素匹配子元素。
:nth-child从1开始的，而:eq()是从0算起的！可以使用:
nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)
例：

//HTML代码
<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>
//jQuery代码的这个选择器的使用方法
$("ul li:nth-child(2)")//这个的意思就是匹配ul后代下第二个li元素
//结果：
[ <li>Karl</li>,   <li>Tane</li> ]

4、:only-child（如果某个元素是父元素中唯一的子元素，那将会被匹配）
如果父元素中含有其他元素，那将不会被匹配。（注：这里的其他元素并不包含文本节点，如：

图片

，用$(‘p img:only-child’)是可以匹配，感谢：nwujiajie 指正）
例：

//html代码
<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
</ul>
//JQuery代码
$("ul li:only-child")
//结果：
[ <li>Glen</li> ]

以上我説的选择器基本上在css上面的使用方法差不多，这些选择器的基本上在1.0以上（包括1.0版本）的版本上面有的。还有的选择器在css上面原本没有的，也就是我在上面说的对元素上面的内容进行查找该元素的选择器。