摘自：http://www.cnblogs.com/webmoon/p/3169360.html
jQuery基础之选择器
选择器是jQuery的根基，在jQuery中，对事件处理、遍历DOM和Ajax操作都依赖于选择器。因此，如果能熟练的使用选择器，不仅能简化代码，而且可以达到事半功倍的效果。jQuery选择器完全继承了CSS的风格。利用jQuery选择器，可以非常便捷的找出特定的DOM元素，然后为它们添加相应的行为，而无需担心浏览器是否支持这一选择器。
jQuery选择器可简单分为基本选择器、层次选择器、过滤选择器、表单选择器。下面通过表格进行一一介绍。
1.基本选择器
| 选择器 |
描 述 |
返 回 |
示 例 |
| #id |
匹配给定的id |
单个元素 |
$(“header”) |
| .class |
匹配给定的类名 |
集合元素 |
$(“.test”) |
| E |
匹配给定的标签名 |
集合元素 |
$(“div”) |
| * |
匹配所有元素 |
集合元素 |
$(“*’) |
| E, .class, E… |
匹配给定的集合 |
集合元素 |
$(“span, .tips”) |
2.层次选择器
| 选择器 |
描 述 |
返 回 |
示 例 |
| $(“ancestor descendant”) |
匹配ancestor里的所有 descendant(后代)元素 |
集合元素 |
$(“body div”) |
| $(“parent>child”) |
匹配parent下的所有 child(子)元素 |
集合元素 |
$(“div>span”) |
| $(“prev+next”) |
匹配紧接在prev后的 next元素 |
集合元素 |
$(“.error+span”) |
| $(“prev~siblings”) |
匹配prev后的所有 siblings元素 |
集合元素 |
$(“span~a”) |
3.过滤选择器
3.1 基本过滤选择器
| 选择器 |
描 述 |
返 回 |
示 例 |
| :first |
匹配第一个元素 |
单个元素 |
$(“div:first”) |
| :last |
匹配最后一个元素 |
单个元素 |
$(“span:last”) |
| :even |
匹配索引是偶数的元素 索引从0开始 |
集合元素 |
$(“li:even”) |
| : odd |
匹配索引是奇数的元素 索引从0开始 |
集合元素 |
$(“li:odd”) |
| :eq(index) |
匹配索引等于index的元 素(索引从0开始) |
单个元素 |
$(“input:eq(2)”) |
| :gt(index) |
匹配索引大于index的元 素(索引从0开始) |
集合元素 |
$(“input:gt(1)”) |
| :lt(index) |
匹配索引小于index的元 素(索引从0开始) |
集合元素 |
$(“input:lt(5)”) |
| :header |
匹配所有h1,h2…等 标题元素 |
集合元素 |
$(“:header”) |
| :animated |
匹配所有正在执行 动画的元素 |
集合元素 |
$(“div:animated”) |
3.2 内容过滤选择器
| 选择器 |
描 述 |
返 回 |
示 例 |
| :contains(text) |
匹配含有文本内容text 的元素 |
集合元素 |
$(“p:contains(今天)”) |
| :empty |
匹配不含子元素或 文本元素的空元素 |
集合元素 |
$(“p:empty”) |
| :has(selector) |
匹配包含selector元素 的元素 |
集合元素 |
$(“div:has(span)”) |
| :parent |
匹配含有子元素或文本 的元素 |
集合元素 |
$(“div:parent”) |
3.3 可见性过滤选择器
| 选择器 |
描 述 |
返 回 |
示 例 |
| :hidden |
匹配所有不可见 的元素 |
集合元素 |
$(“:hidden”) |
| :visible |
匹配所有可见元素 |
集合元素 |
$(“:visible”) |
3.4 属性过滤选择器
| 选择器 |
描 述 |
返 回 |
示 例 |
| [attr] |
匹配拥有此属性 的元素 |
集合元素 |
$(“img[alt]“) |
| [attr=value] |
匹配属性值为value 的元素 |
集合元素 |
$(“a[title=test]“) |
| [attr!=value] |
匹配属性值不等于 value的元素 |
集合元素 |
$(“a[title!=test]“) |
| [attr^=value] |
匹配属性值以value 开头的元素 |
集合元素 |
$(“img[alt^=welcome]“) |
| [attr$=value] |
匹配属性值以value 结尾的元素 |
集合元素 |
$(“img[alt$=last]“) |
| [attr*=vlaue] |
匹配属性值中含有 value的元素 |
集合元素 |
$(“div[title*=test]“) |
| [attr1][attr2]… |
通过多个属性 进行匹配 |
集合元素 |
$(“div[id][title*=test]“) |
3.5 子元素过滤选择器
| 选择器 |
描 述 |
返 回 |
示 例 |
| :nth-child |
匹配每个父元素下的 第index个子元素 索引从1开始 |
集合元素 |
$(“div:nth-child(2)”) |
| :first-child |
匹配每个父元素的 第一个子元素 |
集合元素 |
$(“div:first-child”) |
| :last-child |
匹配每个父元素的 最后一个子元素 |
集合元素 |
$(“div:last-child”) |
| : only-child |
某元素是它父元素中 的唯一的子元素 则匹配它 |
集合元素 |
$(“div:only-child”) |
3.6 表单对象属性过滤选择器
| 选择器 |
描 述 |
返 回 |
示 例 |
| :enabled |
匹配所有可用元素 |
集合元素 |
$(“form :enabled”) |
| :disabled |
匹配所有不可用 的元素 |
集合元素 |
$(“form :disabled”) |
| :checked |
匹配所有被选中的元素 (含单选框，复选框) |
集合元素 |
$(“input:checked”) |
| :selected |
匹配所有被选中的 选项元素 |
集合元素 |
$(“select :selected”) |
4.表单选择器
| 选择器 |
描 述 |
返 回 |
示 例 |
| :input |
匹配所有input, textarea, select, button元素 |
集合元素 |
$(“input”) |
| :text |
匹配所有文本框 |
集合元素 |
$(“:text”) |
| :password |
匹配所有密码框 |
集合元素 |
$(“:password”) |
| :radio |
匹配所有单选框 |
集合元素 |
$(“:radio”) |
| :checkbox |
匹配所有所有多选框 |
集合元素 |
$(“:checkbox”) |
| :submit |
匹配所有提交按钮 |
集合元素 |
$(“:submit”) |
| :image |
匹配所有图像按钮 |
集合元素 |
$(“:image”) |
| :reset |
匹配所有重置按钮 |
集合元素 |
$(“:reset”) |
| :button |
匹配所有按钮 |
集合元素 |
$(“:button”) |
| :file |
匹配所有上传域 |
集合元素 |
$(“:file”) |
分类: jquery
