前面的話
選擇器是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';
});