【玩转前端开发】jQuery中选择器详细介绍-01

基本选择器

基本选择器：基本选择器是jQuery中最常见的选择器，它可以通过通配符* 、标签名、元素id和元素class等来查找DOM元素。在网页中，每个id名称只能使用一次，class允许重复使用。

选择器	描述	返回	示例
*	匹配所有元素	集合元素	$(‘*’)选取所有元素
element	匹配指定元素名的元素	集合元素	$(‘p’)选取所有p标签的元素
id	匹配指定id的元素	单个元素	$(‘#test’)选取id为test的元素
.class	匹配指定类名的元素	集合元素	$(‘.test’)选取所有class为test的元素
selector1,selector2,…	将每一个选择器匹配到的元素合并后一起返回	集合元素	$(‘div,span,.test,#test’)选取div标签，span标签，id为test的，类为test的一组元素

层次选择器

层次选择器：如果想通过DOM元素之间的层次关系来获取特定元素，例如：后代元素、子元素、相邻元素和兄弟元素等，那么层次选择器是一个非常好的选择。

选择器	描述	返回	示例
ancestor descendant	选取ancestor(祖先)元素里的所有descendant(后代)元素	集合元素	$(‘div span’)选取div里所有的span元素
parent>child	选取父元素下的子元素，与ancestor descendant的区别下面介绍	集合元素	$(‘div>span’)选取div元素下元素名是span的子元素
prev+next	选取紧接在prev元素后的next元素	集合元素	$(‘.one+div’)选取class为one的下一个div元素
prev~siblings	选取prev元素之后的所有siblings元素	集合元素	$(‘#two~div’)选取id为two的元素后面的所有div兄弟元素

ancestor descendant与parent>child的区别详细介绍：

<div>
<span>第一个span</span>
<p><span>第二个span</span></p>
</div>
<span>第三个span</span>

这里有三个span.第一个为div元素的子元素，第二个为div元素下p元素的子元素，它们都是div的后代；第三个span为div同级的span.

$(document).ready(function () {

$('button').click(function () {
$('div span').css('color','red');
});

});

给按钮一个点击事件 ，ancestor descendant选择器，可以看到div元素下的所有的span都变成红色.

$(document).ready(function () {

$('button').click(function () {
$('div>span').css('color','red');
});

});

改为parent>child选择器，可以看到div元素下只有第一个和第三个变成红色，也就是只有div元素的子元素才变色，只作用一级


child的结果" title="">

prev+next与prev~siblings的区别详细介绍：

<div class="one">
<div>第一个DIV</div>
</div>

<div>
<span>第一个span</span>
<div>第二个div</div>

</div>

<div>
<span>第二个span</span>
<div>第三个div</div>
</div>

$(document).ready(function () {

$('button').click(function () {
$('.one+div').css('color','red');
});

});

点击之后只有第一个span和第二个div变成红色，也就是说只有紧接着类为one元素的第一个兄弟元素里面的所有元素有效

$(document).ready(function () {

$('button').click(function () {
$('.one~div').css('color','red');
});

});

改为.one~div后类为one之后的所有div兄弟元素都会变色



层次选择器替代方法

在层次选择器中，第一组比较常用，第二组可以用更加简单的方法来代替.

选择器	方法
$(‘.one+div’)	$(‘.one’).next(‘div’)
$(‘#prev~div’)	$(‘#prev’).nextAll(‘div’)

还有一种也是比较常见的：$(‘#prev’).siblings(‘div’),siblings()方法选取与id为prev的同辈div节点，与位置的前后无关，只要是同辈节点都能匹配.