jQuery 选择器 个人总结

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