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 元素 |