jQuery选择器

jQuery 选择器和 CSS 很相似，可以说是 jQuery 选择器继承了 CSS 的风格，这也说明了 jQuery 的设计理念就是为了能够在设计领域流行的，为了能够让设计师迅速的上手。不过作为开发人员，懂一点 CSS ，懂一点 jQuery 都是很好的，毕竟现在炫丽的界面越来越重要咯。

jQuery 选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。

1、基本选择器

代码	功能	返回
$("#a”)	选择 id 为 a 的元素	单个元素
$(".b")	选择 class 为 b 的所有元素	集合元素
$("p")	选择标签为 p 的所有元素	集合元素
$("*")	选择所有元素，* 为通配符	集合元素
$("p,#a")	选择标签为 p 的所有元素和 id 为 a 的元素	集合元素

基本选择器很简单，就是 CSS 里面的 id 选择器、class 选择器、标签选择器和通配符选择器。

2、层次选择器

代码	功能	返回
$(".a h1")	选取 class 为 a 的标签里面的所有 h1 标签	集合元素
$(".a > h1”)	选取 class 为 a 的标签下元素名为 h1 子元素	集合元素
$(".a + h1”)	选取 class 为 a 的标签下的下一个 h1 元素	集合元素
$(".a ~ h1”)	选取 class 为 a 的标签的所有 h1 兄弟元素	集合元素

这几个层次选择器，前面两个比较常用，后面两个不常用，而是在 jQuery 里面用其他方法代替:

选择器	等效方法
$(".a + h1”)	$(".a”).next(“h1”)
$(".a ~ h1”)	$(".a”).nextAll(“h1”)

3、过滤选择器

3.1 基本过滤选择器

代码	功能	返回
$("div:first”)	选取第一个 div 元素	单个元素
$("div:last”)	选取最后一个 div  元素	单个元素
$("div:not(.a)")	选取 class 不是 a 的 div 元素	集合元素
$("div:even”)	选取索引为偶数的 div 元素	集合元素
$("div:odd”)	选取索引为奇数的 div 元素	集合元素
$("div:eq(22)”)	选取索引为 22 的 div 元素	单个元素
$("div:gt(22)”)	选取索引大于 22 的 div 元素	集合元素
$("div:lt(22)")	选取索引小于 22 的 div 元素	集合元素
$("div:header")	选取所有标题元素:h1、h2…	集合元素
$("div:animated")	选取所有当前正在执行动画的元素	集合元素

3.2 内容过滤选择器

代码	功能	返回
$("div:contains(X)")	选取含有文本 "X“ 的所有 div 元素	集合元素
$("div:empty”)	选取不包含子元素的 div 元素	集合元素
$("div:has(.a)”)	选取含有 class 为 a 的 div 元素	集合元素
$("div:parent")	选取含有子元素的 div 元素	集合元素

3.3 可见性过滤选择器

代码	功能	返回
$("div:visible")	选取所有可见的 div 元素	集合元素
$("div:hidden”)	选取所有不可见的 div 元素	集合

3.4 属性过滤选择器

代码	功能	返回
$("div[title]")	选取含有 title 属性的 div 元素	集合元素
$("div[title=test]”)	选取 title 属性值为 test 的 div 元素	集合元素
$("div[title!=test]”)	选取 title 属性值不为 test 的 div 元素	集合元素
$("div[title^=test]”)	选取 title 属性值以 test 开头的 div 元素	集合元素
$("div[title&=test]”)	选取 title 属性值以 test 结尾的 div 元素	集合元素
$("div[title*=test]”)	选取 title 属性值含有 test 的 div 元素	集合元素
$("div[id][title]”)	选取含有 id 属性并且含有 title 属性的 div 元素	集合元素

3.5 子元素过滤选择器

代码	功能	返回
$("div.a:nth-child(22 /even )")	选取 class 为 a 的 div 父元素的第 22 个子元素 / 偶数元素	集合元素
$("div.a:first-child")	选取 class 为 a 的 div 父元素的第一个子元素	集合元素
$("div.a:last-child")	选取 class 为 a 的 div 父元素的最后一个子元素	集合元素
$("div.a:only-child")	选取子元素 class 为 a 并且只有一个子元素的父元素

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

代码	功能	返回
$("#a input:enabled")	选取 id 为 a 的表单内的所有可用 input 元素	集合元素
$("#a input:disabled")	选取 id 为  a 的表单内的所有不可用 input元素	集合元素
$("input:checked")	选取选中的 input 元素（多选框）	集合元素
$("select:selected")	选取选中的 input 元素（下拉列表）	集合元素

4、表单选择器

代码	功能	返回
$(":input")	选取所有 input、textarea、select、button 元素	集合元素
$(":text")	选取所有单行文本框	集合元素
$(":password")	需求所有密码框	集合元素
$(":radio")	选取所有单选框	集合元素
$(":checkbox")	选取所有多选框	集合元素
$(":submit")	选取所有提交按钮	集合元素
$(":image")	选取所有图像按钮	集合元素
$(":reset")	选取所有重置按钮	集合元素
$(":button")	选取所有按钮	集合元素
$(":file")	选取所有上传与	集合元素
$(":hidden")	选取所有不可见元素	集合元素

---EOF---

这么多选择器，应该真正经常用的不多。