选择器是jQuery的根基，在jQuery中，对事件处理，遍历DOM和Ajax操作都依赖于选择器。
--<锋利的jquery（第2版）>
jQuery选择器分为
基本选择器，层次选择器，过滤选择器和表单选择器
1.基本选择器
基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id，class和标签名来查找DOM元素。
| 选择器 |
描述 |
示例 |
| #id |
根据给定的id匹配一个元素 |
$("#test")选取id为test的元素 |
| .class |
根据给定类名匹配元素 |
$(".test")选取所有class为test的元素 |
| element |
根据给定的元素名匹配元素 |
$("p")选取所有<p>元素 |
| * |
匹配所有元素 |
$("*")选取所有元素 |
| selector1，selector2... |
将每一个选择器匹配到的元素合并返回 |
$("div,span,p.myclass")选取所有<div>元素,<span>和拥有myclass的<p> |
2.层次选择器
| 选择器 |
描述 |
示例 |
| $("ancestor descendant") |
选取ancestor元素所有后代元素 |
$("div span")选取<div>里所有<span>元素 |
| $("parent>child") |
选取parent元素下子元素 |
$("div>span")选取<div>下<span>的子元素 |
| $("prev+next") |
选取prev元素后的next元素 |
$(".one+div")选取class为one的下一个<div>同辈元素 |
| $("prev~sibiling") |
选取prev元素后所有sibiling元素 |
$("#two+div")选取id为two的元素后面所有<div>同辈元素 |
3.过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素
过滤选择器可以分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤，表单对象过滤选择器。
3.1基本过滤器
| 选择器 |
描述 |
示例 |
| :first |
选取第一个元素 |
$("div:first")选取所有<div>元素中第一个<div>元素 |
| :last |
选取最后一个元素 |
$("div:last")选取所有<div>元素中最后一个<div>元素 |
| not(seletor) |
去除所有与给定选择器匹配的元素 |
$("input:not(.myClass)")选取class不是myClass的<input>元素 |
| :even |
选取索引是偶数的所有元素(索引从0开始) |
$("input:even")选取索引是偶数的<input>元素 |
| :odd |
选取索引是奇数的所有元素(索引从0开始) |
$("input:odd")选取索引是奇数的<input>元素 |
| :eq(index) |
选取索引等于index的元素(索引从0开始) |
$("input:eq(1)")选取索引等于1的<input>元素 |
| :gt(index) |
选取索引大于index的元素(索引从0开始) |
$("input:gt(1)")选取索引大于1的<input>元素(大于1，不包括1) |
| :lt(index) |
选取索引小于index的元素(索引从0开始) |
$("input:lt(1)")选取索引小于1的<input>元素(大于1，不包括1) |
| :animated |
选取当前正在执行动画的所有元素 |
$("div:animated")选取正在执行动画的<div>元素 |
3.2内容过滤选择器
| 选择器 |
描述 |
示例 |
| :contains(text) |
选取含有文本内容为“text”的元素 |
$("div:contains("我")")选取含有文本“我”的<div>元素 |
| :empty |
选取不包含子元素或者文本的空元素 |
$("div:empty")选取不包含子元素的<div>空元素 |
| :has(selector) |
选取含有选择器匹配的元素的元素 |
$("div.has(p)")选取含有<p>元素的<div>元素 |
| :parent |
选取含有子元素或者文本的元素 |
$("div:parent")选取拥有子元素的<div>元素 |
3.3可见性过滤选择器
| 选择器 |
描述 |
示例 |
| :hidden |
选取所有不可见元素 |
$(":hidden")选取所有不可见元素 |
| :visible |
选取所有可见元素 |
$(":visible")选取所有可见元素 |
3.4属性过滤选择器
| 选择器 |
描述 |
示例 |
| attribut |
选取拥有此属性的元素 |
$("div[id]")选取拥有属性id的元素 |
| attribut=value |
选取属性为value的元素 |
$("div[title=test]")选取属性title为“test”的<div>元素 |
| attribut^=value |
选取属性的值以value开始的元素 |
$("div[title^=test]")选取属性title为“test”开始的<div>元素 |
| attribut*=value |
选取属性的值含有value的元素 |
$("div[title*=test]")选取属性title含有“test”的<div>元素 |
3.5子元素过滤选择器
| 选择器 |
描述 |
示例 |
| :nth-child(index/even/odd/equation） |
选取每个父元素下的第index个子元素或者奇偶元素(index从1开始) |
:eq(index)只匹配一个元素，而:nth-child将为每一个父元素匹配子元素 |
| :first-child |
选取父元素第一个子元素 |
$("ul li:first-child")选取每个<ul>中第一个<li>元素 |
| :last-child |
选取父元素最后一个子元素 |
$("ul li:last-child")选取每个<ul>中最后一个<li>元素 |
3.6表单对象属性过滤选择器
| 选择器 |
描述 |
示例 |
| :enabled |
选取所有可用元素 |
$("#form1：enabled");选取id为“form1”的表单内所有可用元素 |
| :checked |
选取所有被选中的元素 |
$("input：checked");选取所有被选中的<input>元素 |
| :selected |
选取所有被选中的选项元素 |
$("select option：selected");选取所有被选中的选项元素 |
4.表单选择器
| 选择器 |
描述 |
示例 |
| :input |
选取所有<input>，<textarea>，<select>，<button>元素 |
$("：input")选取所有<input>，<textarea>，<select>，<button>元素 |
| :text |
选取所有的单行文本框 |
$("：text")选取所有的单行文本框 |
| :password |
选取所有的密码框 |
$("：password")选取所有的密码框 |
| :reset |
选取所有的重置按钮 |
$("：reset")选取所有的重置按钮 |
| :file |
选取所有的上传域 |
$("：file")选取所有的上传域 |
选择器是行为与文档内容之间连接的纽带，选择器的最终目的就是能够轻松的找到文档中的元素。
归纳的文章只是本人学习总结的一些常用选择器，希望在学习前端的道路上和大家共勉。
推荐学习网站 -- w3cschool
网友评论