jqueryAPI使用之选择器_H5之家 - 中国HTML5教程资源分享第一站

好一段时间没有更新博文了。刚学习完JS基础知识后，也进入到了JQ的学习。为了能熟练掌握JQ的使用，最好的方法就是反复多练，讲JQ中的API的每个知识点都练习一遍。如果能做到这个，那么对JQ就没那么陌生了。这一天，先将JQ中的选择器的每个点熟悉一遍。注：记得先将JQ库引入，并且<script></script>里的代码需要用$(function(){jq代码});在这里，我是没有添加这个。

一、基本：

HTML代码：

<div>

<p>hehehe</p>

</div>

1、jQuery( "*" )查找文档中的每一个元素（包括 head, body 等）。

$("*").css('background-color','red');

2、jQuery( ".class" )选择给定样式类名的所有元素。

$('.h1').css('background-color','yellow');

3、jQuery( "element" )根据给定（html）标记名称选择所有的元素。

$('h').css('border','1px solid blue');

4、jQuery( "selector1, selector2, selectorN" )将每一个选择器匹配到的元素合并后一起返回。

$('.h1,.p1,#div1').css('color','blue');

5、jQuery( "#id" )选择一个具有给定id属性的单个元素。

$('#div1').css({

width:20,

height:30,

border:'1px solid #ccc',

background:'blue'

});

二、层级

HTML代码：

<ul>

<li>Item 2

<ul><li>Nested item 1</li><li>Nested item 2</li><li>Nested item 3</li></ul>

</li>

</ul>

1、jQuery( "parent > child" )选择所有指定“parent”元素中指定的"child"的直接子元素

$("ul.topnav > li").css("border", "3px double red");

2、jQuery( "ancestor descendant" 选择给定的祖先元素的所有后代元素。一个元素的后代可能是该元素的一个孩子，孙子，曾孙

等。

$('ul li').css('background-color','aquamarine');

3、jQuery( "prev + next" )选择所有紧接在 “prev” 元素后的 “next” 元素

$("label + input").css("color", "blue");

4、jQuery( "prev ~ siblings" )匹配 “prev” 元素之后的所有兄弟元素。具有相同的父元素，并匹配过滤“siblings”选择器

$('ul ~ label').css('color','yellow');

三、基本筛选：

HTML代码：

<h1>Header 1</h1>

<p>Contents 1</p>

<h2>Header 2</h2>

<table>

</table>

1、jQuery( ":animated" )选择所有正在执行动画效果的元素.

$("#run").click(function(){

$("div:animated").toggleClass("colored");

});

function animateIt(){

$("#mover").slideToggle("slow", animateIt);

}

animateIt();

2、jQuery(":eq(index)"),jQuery( ":eq(-index)" )在匹配的集合中选择索引值为index的元素。

index: index为正数时要匹配元素的索引值（从0开始计数），index为负数从最后一个元素开始倒计数.-1匹配倒数第一个元素

$("td:eq(2)").css("color", "red");

3、jQuery( ":even" ) 选择所引值为偶数的元素，从 0 开始计数。

$("td:even").css("background-color", "#bbbbff");

4、jQuery( ":first" )选择第一个匹配的DOM元素。:first伪类选择器相当于:eq(0)

$("tr:first").css("font-style", "italic");

5、jQuery( ":gt(index)" )选择匹配集合中所有大于给定index（索引值）的元素。

$( "td:gt(4)" ).css( "backgroundColor", "yellow" );

6、jQuery( ":header" )选择所有标题元素，像h1, h2, h3 等.

$(":header").css({ background:'#CCC', color:'blue' });

7、jQuery( ":lang(language)" )选择指定语言的所有元素。

$( "div:lang(en-us)" ).addClass( "usa" );

8、jQuery( ":last" )选择最后一个匹配的元素。

$("tr:last").css({backgroundColor: 'yellow', fontWeight: 'bolder'});

9、jQuery( ":lt(index)" )选择匹配集合中所有索引值小于给定index参数的元素。

$("td:lt(4)").css("color", "red");

10、jQuery( ":not(selector)" )选择所有元素去除不匹配给定的选择器的元素。

$("div:not(#mover)").css('background','red');

11、jQuery( ":odd" 选择索引值为奇数元素，从 0 开始计数

$("tr:odd").css("background-color", "#bbbbff");

12、jQuery( ":root" )选择该文档的根元素。

console.log($('p:root'));

四、内容筛选：

1、jQuery( ":contains(text)" ) 选择所有包含指定文本的元素。

<div>George Martin</div>

<div>Malcom John Sinclair</div>

$("div:contains('John')").css("text-decoration", "underline");

2、jQuery( ":empty" )选择所有没有子元素的元素（包括文本节点）。需要注意的一件重要的事情是:empty(和 :parent)的子元素包括文本节点。

3、jQuery( ":has(selector)" )选择元素其中至少包含指定选择器匹配的一个种元素。

<div><p>Hello in a paragraph</p></div>

4、jQuery( ":parent" )选择所有含有子元素或者文本的父级元素。

<table>

<tr><td>Value 1</td><td></td></tr>

<tr><td>Value 2</td><td></td></tr>

</table>

$("td:parent").css('background', 'red');

五、可见性筛选：