jQuery选择器(61种)排序汇总

1.#ID :根据给定的ID匹配元素

P id='myId '这是第一个p标记/pp id='not '这是第二个p标记/PS script type=' text/JavaScript ' $(function(){ $(' # myId ')。CSS('颜色'，'红色')；});/script结果：

这是第一个P标签

这是第二个P标签

2.元素：根据给定的元素标签名匹配所有元素

Div这是div标记1/divdiv这是div标记2/divp这是p标记/pscript type=' text/JavaScript ' $(function(){ $(' div ')。CSS('颜色'，'红色')；});/script结果：

这是div标签1

这是div标签2

这是P标签

3.class:根据给定的css类名匹配元素

P class='myClass '这是第一个p标记/pp class='not '这是第二个p标记/PS script type=' text/JavaScript ' $(function(){ $(')。my class’)。CSS('颜色'，'红色')；});/script结果：

这是第一个P标签

这是第二个P标签

4.* :匹配所有元素，主要用于结合上下文进行搜索

p这是p标记/pdiv这是div标记/div脚本类型=' text/JavaScript ' $(function(){ $(' * ')。CSS('颜色'，'红色')；});/script结果：

这是P标签

这是div标签

5.多个选择器选择1、选择2、选择3360指定任意数量的选择器，并将匹配的元素合并成一个结果

p类='myP '这是第一个p标记/pp类='not '这是第二个p标记/pDiv id='myDiv '这是第一个div标记/divdiv id='not '这是第二个div标记/div脚本类型=' text/JavaScript ' $(function(){ $(' p . })；/script结果：

这是第一个P标签

这是第二个P标签

这是第一个div标签

这是第二个div标签

6.祖先后代：匹配给定祖先元素下的所有后代元素

Div span这是第一个span标记/span p span这是第二个span标记/span/p/div脚本类型=' text/JavaScript ' $(function(){ $(' div span ')。CSS('颜色'，'红色')；});/script结果：

这是第一个span标签

这是第二个跨度标记

7.父子：匹配给定父元素下的所有子元素

Div span这是第一个span标记/span p span这是第二个span标记/span/p/div脚本类型=' text/JavaScript ' $(function(){ $(' div span ')。CSS('颜色'，'红色')；});/script结果：

这是第一个span标签

这是第二个跨度标记

8.prev next :匹配紧接在prev元素之后的所有下一个元素

Div/divp这是第一个p标记/pp这是第二个p标记/PS script type=' text/JavaScript ' $(function(){ $(' div p ')。CSS('颜色'，'红色')；});/script结果：

这是第一个P标签

这是第二个P标签

9.prev ~兄弟：匹配prev元素后的所有兄弟元素

p这是第一个p标记/pdiv p这是第二个p标记/p/divp这是第三个p标记/pscript type=' text/JavaScript ' $(function(){ $(' div ~ p ')。CSS('颜色'，'红色')；});/script结果：

这是第一个P标签

这是第二个P标签

这是第三个P标签

10.first :获取第一个元素

Div p这是第一个p标记/p p这是第二个p标记/p p这是第三个p标记/p/div脚本类型=' text/JavaScript ' $(function(){)