深入学习jQuery选择器系列第一篇——基础选择器和层级选择器

前面的话

　　选择器是jQuery的根基，在jQuery中，对事件处理、遍历DOM以及ajax操作都依赖于选择器。jQuery选择器完全继承了CSS的风格，两者的写法十分相似，只不过两者的作用效果不同。CSS选择器找到元素后添加样式，而jQuery选择器找到元素后添加行为。jQuery选择器可以分为基础选择器、层级选择器、过滤选择器和表单选择器四类。对于每类选择器，除了给出jQuery选择器的写法，也会给出相应的CSS选择器和DOM选择器的写法。有所比较，才能理解得更深。本文是jQuery选择器系列第一篇——基础选择器和层级选择器

 

基础选择器

　　基础选择器是jQuery中最常用选择器，也是最简单的选择器，它通过元素id、class和标签名等来查找DOM元素

id选择器

　　id选择器$('#id')通过给定的id匹配一个元素，返回单个元素

<div id="test">测试元素</div>
<script>
//选择id为test的元素并设置其字体颜色为红色
$('#test').css('color','red');
</script>

　　对应CSS的id选择器

#test{color:red}

　　对应DOM的getElementById()方法，而jQuery内部也使用该方法来处理ID的获取

document.getElementById('test').style.color = 'red';

 

元素选择器

　　元素选择器$('element')根据给定的元素名匹配元素，并返回符合条件的集合元素

<div>1</div>
<div>2</div>
<script>
//选择标签名为div的元素并设置其字体颜色为红色
$('div').css('color','red');
</script>

　　对应CSS的元素选择器

div{color:red}

　　对应DOM的getElementsByTagName()方法，而jQuery内部也使用该方法来处理元素名的获取

Array.prototype.forEach.call(document.getElementsByTagName('div'),function(item,index,arr){
    item.style.color = 'red';
});

 

类选择器

　　类选择器$('.class')根据给定的类名匹配元素，并返回符合条件的集合元素

<div class="test">1</div>
<div class="test">2</div>
<script>
//选择class为test的元素并设置其字体颜色为红色
$('.test').css('color','red');
</script>

　　对应CSS的类选择器

.test{color:red}

　　对应DOM的getElementsByClassName()方法，而jQuery内部也使用该方法来处理类名的获取

Array.prototype.forEach.call(document.getElementsByClassName('test'),function(item,index,arr){
    item.style.color = 'red';
});

 

通配选择器

　　通配选择器$('*')匹配文档中所有的元素，并返回集合元素

$('*').css('margin','0');

　　对应CSS的通配选择器

* {margin:0}

　　对应DOM的document.all集合

Array.prototype.forEach.call(document.all,function(item,index,arr){
    item.style.margin = 0;
});

　　或者参数为通配符*的getElementsByTagName()方法

Array.prototype.forEach.call(document.getElementsByTagName('*'),function(item,index,arr){
    item.style.margin = 0;
});

 

群组选择器

　　群组选择器$('selector1,selector2,...')将每一个选择器匹配到的元素合并后一起，并返回集合元素

<div class="a">1</div>
<span id="b">2</span>
<a href="#">3</a>
<script>
//选择符合条件的元素并设置其字体颜色为红色
$('.a,#b,a').css('color','red');
</script>

　　对应CSS的群组选择器

.a,#b,a{color:red}

　　对应DOM的querySelectorAll()选择器

Array.prototype.forEach.call(document.querySelectorAll('.a,#b,a'),function(item,index,arr){
    item.style.color = 'red';
});

 

层级选择器

　　如果想通过DOM元素之间的层级关系来获取特定元素，层级选择器是一个非常好的选择。层级共包括后代元素、子元素、相邻元素和同级元素四种

后代选择器

　　后代选择器$('ancestor descendant')选择给定的祖先元素的所有后代元素，并返回集合元素

<div id="test">
    <div>
        <div>1</div>
        <div>2</div>
    </div>
</div>
<script>
$('#test div').css('margin','10px');
console.log($('#test div').length);//3
</script>

　　对应CSS的后代选择器

#test div{margin: 10px}

　　对应DOM的getElement类方法

Array.prototype.forEach.call(document.getElementById('test').getElementsByTagName('div'),function(item,index,arr){
    item.style.margin = '10px';
});

　　或者使用querySelectorAll()方法

Array.prototype.forEach.call(document.querySelectorAll('#test div'),function(item,index,arr){
    item.style.margin = '10px';
});

子元素选择器

　　子元素选择器$('parent > child')选择所有指定'parent'元素中指定的'child'的直接子元素，并返回集合元素

<div id="test">
    <div>
        <div>1</div>
        <div>2</div>
    </div>
</div>
<script>
$('#test > div').css('margin','10px');
console.log($('#test > div').length);//1
</script>

　　对应CSS的子元素选择器

#test > div{margin: 10px}

　　对应DOM的querySelectorAll()方法

Array.prototype.forEach.call(document.querySelectorAll('#test > div'),function(item,index,arr){
    item.style.margin = '10px';
});

 

一般兄弟选择器

　　一般兄弟选择器$('prev ~ siblings')选择'prev'元素之后的所有同级的'siblings'元素，并返回集合元素

<ul>
    <li id="test">1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
$('#test ~ li').css('color','red');
console.log($('#test ~ li').length);//2
</script>

　　对应CSS的一般兄弟选择器

#test ~ li{color:red;}

　　对应DOM的querySelectorAll()方法

Array.prototype.forEach.call(document.querySelectorAll('#test ~ li'),function(item,index,arr){
    item.style.color = 'red';
});

相邻兄弟选择器

　　相邻兄弟选择器$('prev + next')选择所有紧跟在'prev'元素后的'next'元素，并返回集合元素

<ul>
    <li id="test">1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
$('#test + li').css('color','red');
console.log($('#test + li').length);//1
</script>

　　对应CSS的相邻兄弟选择器

#test + li{color:red;}

　　对应DOM的querySelectorAll()方法

Array.prototype.forEach.call(document.querySelectorAll('#test + li'),function(item,index,arr){
    item.style.color = 'red';
});