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';
});