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")选取所有不可见元素集合元素 .alt { background-color: #f4f4f4; width: 100%; margin: 0em; }

---EOF---

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