jQuery 选择器
一、CSS选择器
1、元素选择器
1. * ：所有元素选择器(某层次下所有标签)
2. . ：类
3. # ：id选择器
4. ， ： 并列选择器(对分隔的元素均进行选取)
5. 空格： 后代选择器(可后代的后代，多层选择)
6. > ：子元素选择器.它与后代选择器不同之处是,子元素选择器只对子元素生效,而不会影响其它后代元素.（只能是一层）
7. + ：相邻兄弟元素（只能选取一个）
2、CSS属性选择器[]
[]是属性的标志。只顾其名不顾其值。
1． 简易属性匹配
基本语法：element[attr]。
例：h1[class]{color:Red;}
<h1 class=”class1”>第一个</h1>
<h1 class=”class2”>第二个</h1>
<h1 class=”class3”>第三个</h1>
这些h1标签都会受影响。
2． 精确值匹配 “=”
具体属性值的匹配。例如：input[type=”radio”][name=”sex”]
3． 部分属性值匹配 “~=”
例如：div[class~=”warning”]{color:Red;} 可以让div字体变红色
<div class=”bodyDiv urgent warning ”>错误提示，红色显示！</div>
二、JQuery选择器
jquery选择器是建立在CSS选择器的基础上的。
1、基本选择器
1. * ：所有元素选择器(某层次下所有标签)
2. . ： 类
3. # ： id选择器
4. ， ： 并列选择器(对分隔的元素均进行选取)
5. 空格： 后代选择器(可后代的后代，多层选择)
6. > ： 子元素选择器.它与后代选择器不同之处是,子元素选择器 只对子元素生效,而不会影响其它后代元素.（只能是一层）
7. + ：相邻兄弟元素（只能选取一个）
2、滤镜选择器
1) :first ：第一个
2) :last ：最后一个
3) :even ：偶数
4) :odd ：奇数
5) :hidden ：隐藏的
6) :visible ：显示的
7) :eq(index) ：序数等于index的元素
8) :gt(index) ：序数大于index的元素
9) :lt(index) ：序数小于index的元素
10) :not ：不满足选择条件的元素
对表单操作的
11) :enabled：可用的
12) :disabled：禁用的
13) :checked：选中的
14) :selected：选择的
层次选择器 .
15) .next() 下一个同级元素
16) .nextAll() 下面所有的同级元素
17) .prev() 上一个
18) .prevAll() 上面所有同级元素
19) .siblings() 所有同级元素(同胞、相邻元素)
20) .parent() 父级元素
21) .children 子级元素
22) .find() 查寻所有后代元素
23)this.prevAll().children(":first"); //同级上面第一个元素
24)return this.prevAll().children(":last"); //同级上面最后一个元素
| 选择器 | 实例 | 选取 |
|---|---|---|
| * | $("*") | 所有元素 |
| #id | $("#lastname") | id="lastname" 的元素 |
| .class | $(".intro") | 所有 class="intro" 的元素 |
| element | $("p") | 所有 <p> 元素 |
| .class.class | $(".intro.demo") | 所有 class="intro" 且 class="demo" 的元素 |
| :first | $("p:first") | 第一个 <p> 元素 |
| :last | $("p:last") | 最后一个 <p> 元素 |
| :even | $("tr:even") | 所有偶数 <tr> 元素 |
| :odd | $("tr:odd") | 所有奇数 <tr> 元素 |
| :eq(index) | $("ul li:eq(3)") | 列表中的第四个元素（index 从 0 开始） |
| :gt(no) | $("ul li:gt(3)") | 列出 index 大于 3 的元素 |
| :lt(no) | $("ul li:lt(3)") | 列出 index 小于 3 的元素 |
| :not(selector) | $("input:not(:empty)") | 所有不为空的 input 元素 |
| :header | $(":header") | 所有标题元素 <h1> - <h6> |
| :animated | 所有动画元素 | |
| :contains(text) | $(":contains('W3School')") | 包含指定字符串的所有元素 |
| :empty | $(":empty") | 无子（元素）节点的所有元素 |
| :hidden | $("p:hidden") | 所有隐藏的 <p> 元素 |
| :visible | $("table:visible") | 所有可见的表格 |
| s1,s2,s3 | $("th,td,.intro") | 所有带有匹配选择的元素 |
| [attribute] | $("[href]") | 所有带有 href 属性的元素 |
| [attribute=value] | $("[href='#']") | 所有 href 属性的值等于 "#" 的元素 |
| [attribute!=value] | $("[href!='#']") | 所有 href 属性的值不等于 "#" 的元素 |
| [attribute$=value] | $("[href$='.jpg']") | 所有 href 属性的值包含以 ".jpg" 结尾的元素 |
| :input | $(":input") | 所有 <input> 元素 |
| :text | $(":text") | 所有 type="text" 的 <input> 元素 |
| :password | $(":password") | 所有 type="password" 的 <input> 元素 |
| :radio | $(":radio") | 所有 type="radio" 的 <input> 元素 |
| :checkbox | $(":checkbox") | 所有 type="checkbox" 的 <input> 元素 |
| :submit | $(":submit") | 所有 type="submit" 的 <input> 元素 |
| :reset | $(":reset") | 所有 type="reset" 的 <input> 元素 |
| :button | $(":button") | 所有 type="button" 的 <input> 元素 |
| :image | $(":image") | 所有 type="image" 的 <input> 元素 |
| :file | $(":file") | 所有 type="file" 的 <input> 元素 |
| :enabled | $(":enabled") | 所有激活的 input 元素 |
| :disabled | $(":disabled") | 所有禁用的 input 元素 |
| :selected | $(":selected") | 所有被选取的 input 元素 |
| :checked | $(":checked") | 所有被选中的 input 元素 |