深刻學習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';
});

轉載於猿2048:➞《深刻學習jQuery選擇器系列第一篇——基礎選擇器和層級選擇器》