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=”bodyDivurgent 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)returnthis.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 元素