【jQuery、css】解析六種組合選擇器：相連、+、～、>、,、空格

回覆文章分享
【jQuery、css】解析六種組合選擇器：相連、+、～、>、,、空格

本篇重點

  • 組合選擇器是甚麼
  • 選擇器內的符號( +、~、> 、, 等)有甚麼含意
  • jQuery 要使用組合選擇器還是原生的函式

設定 CSS 樣式或是 jQuery 要操作 DOM 元素時，會用到選擇器選取元素，兩者的選擇器類似，你可能看過選擇器中有一些符號，例如 +、~、> 或是空格，這些將兩個元素組合起來的選擇器就稱為「組合選擇器 Combinator」，熟悉符號的意思可以加速抓到想要的元素，甚至提升整體效能，那來了解這些符號分別代表甚麼意思吧！

標籤之間的關係

先了解 HTML 階層間的關係，可以用家族的關係來了解每個階層。

舉例來說，以 <div id="john"> 角度出發，看看下面標籤之間的關係

html
1
2
3
4
5
6
7
8
<div>john的父親(父層)
    <p>john的哥哥或姊姊</p>
    <div id="john">
        <p>john的孩子(子層)</p>
    </div>
    <p>john的弟弟或妹妹</p>
</div>
<div>john父親的弟弟或妹妹</div>

接下來會使用家族關係來解釋各個組合選擇器的使用方法。

健忘筆記

可以使用 tag、id、class 等選擇器做組合選擇器

相連的選擇器

選擇器相連且中間沒有空格或是符號，表示同一個 tag 要同時符合所有條件

範例

html
1
2
3
4
5
6
<div id="father">
    john的父親(父層)
    <div class="select" id="tom">tom (john的哥哥)</div>
    <p class="select" id="john">john</p>
    <p>john的弟弟或妹妹</p>
</div>
css
1
2
3
4
5
6
7
#john.select {
    background-color: orange;
}

div.select#tom {
    background-color: gray;
}
jQuery
1
2
3
4
5
6
7
$("#john.select").click(function () {
    alert("john");
});

$("div#tom.select").click(function () {
    alert("tom");
});

空格相連的選擇器

指定元素層內的所有指定元素，表示同一家族內的指定元素都會選擇

範例

html
1
2
3
4
5
6
7
8
9
10
<p class="select">class="select"</p>
<div id="father">
    john的父親(父層)
    <p class="find">class="find"</p>
    <div class="select" id="tom">tom (john的哥哥)</div>
    <p class="select" id="john">john</p>
    <p id="joy">joy (john的<b class="select">弟弟或妹妹</b>)</p>
    <p class="find">class="find"</p>
</div>
<p class="select">class="select"</p>
css
1
2
3
4
5
6
7
#father .select {
    background-color: orange;
}

div #joy {
    background-color: gray;
}

健忘筆記

使用空格只會選取 <div id="father"> 內層的元素，因此在 <div id="father"> 外層上下的 class="select" 元素不會有反應

jQuery
1
2
3
4
5
6
7
$("#father .select").click(function () {
    alert("orange");
});

$("div #joy").click(function () {
    alert("gray");
});

實作這個例子時你會發現，點擊文字”弟弟或妹妹” 會發現先跳出 orange 再跳出 gray，這是JS的事件冒泡，如果要解決這個問題可以使用 、event.stopPropagation() 來處理。

jQuery
1
2
3
4
$("#father .select").click(function() {
    alert("orange");
    event.stopPropagation()
});

健忘筆記

事件冒泡：指內層元素觸發事件，外層元素也跟著觸發

選取同一家族內的指定元素，也可以使用 jquery 函數的 .find() 來選取

jQuery
1
2
3
$("#father").find('.find').click(function () {
    alert("find");
});

「+」相連的選擇器

同一層後的第一個元素，表示會選取大弟或大妹

範例

html
1
2
3
4
5
6
7
<p class="select">father的大哥或大姐</p>
<div id="father">father
    <p id="john">john</p>
    <p id="joy">joy (john的弟弟或妹妹)</p>
</div>
<p class="select" id="first">father的大弟或大妹</p>
<p class="select">father的二弟或二妹</p>
css
1
2
3
#father + .select {
    background-color: orange;
}

健忘筆記

使用「+」只會選取 <div id="father"> 同層後的第一個元素，所以只有 <p class="select" id="first"> 會被選取

jQuery
1
2
3
$("#father + .select").click(function() {
    alert("click");
});

同層後的第一個元素，也可以使用 jquery 函數的 .next() 來選取

jQuery
1
2
3
4
5
6
7
8
$("#john").next().click(function () {
    alert(".next()");
});

// 指定同層後的第一個元素
$("#first").next(".select").click(function () {
    alert(".next('.select')");
});

健忘筆記

如果 .next() 有指定元素例如 .next(".select")，表示會選取同一層後第一個是 class="select" 的元素，如果第一個元素不是則不會選取

「~」相連的選擇器

同一層後的所有指定元素，表示會選取所有指定弟弟或妹妹

範例

html
1
2
3
4
5
6
7
8
9
10
<p class="select">father的大哥或大姐</p>
<div id="father">father
    <p id="john">john</p>
    <p id="joy" class="nextAll">joy (john的弟弟或妹妹)</p>
    <p id="betty">betty (joy的弟弟或妹妹)</p>
    <p id="tom" class="nextAll">tom (joy的弟弟或妹妹)</p>
</div>
<p class="select" id="first">father的大弟或大妹</p>
<p id="second">father的二弟或二妹</p>
<p class="select" id="second">father的三弟或三妹</p>
css
1
2
3
#father ~ .select {
    background-color: orange;
}

健忘筆記

使用「~」只會選取 <div id="father"> 同層後的所有指定元素，所以 <p class="select">father的大哥或大姐</p> 不會反應

jQuery
1
2
3
$("#father ~ .select").click(function () {
    alert("click");
});

同層後的所有元素，也可以使用 jquery 函數的 .nextAll() 來選取

jQuery
1
2
3
4
5
6
7
8
$("#john").nextAll().click(function(){
    alert('nextAll');
})

// 指定同層後的所有指定元素
$("#john").nextAll(".nextAll").click(function(){
    alert('nextAll(".nextAll")');
})

健忘筆記

如果 .nextAll() 有指定元素例如 .nextAll(".nextAll")，表示會選取同一層後所有有 class="nextAll" 的元素，如果沒有則不會選取

「>」相連的選擇器

剛好在下一層的所有指定元素，表示會選取親生的指定小孩

範例

html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<p class="select">father的哥哥或姐姐</p>
<div id="father">father
    <p id="john" class="select">john</p>
    <div id="joy">joy
        <p id="tim" class="select">tim (joy的小孩)</p>
    </div>
    <p id="tom" class="select">father的子層</p>
</div>
<p class="select">father的大弟或大妹</p>
<div id="mother">mother
    <p id="ken" class="select">ken</p>
    <p id="eason">eason</p>
    <p id="kevin" class="select">kevin</p>
</div>

這邊比較以空格和以「>」相連的差別

css
1
2
3
4
5
6
7
#father .select {
    color: green;
}

#father > .select {
    background-color: orange;
}
jQuery
1
2
3
$("#father > .select").click(function () {
    alert("click");
});

健忘筆記

使用「>」只會選取 <div id="father"> 下一層的所有指定元素，因此不會選取到 <p id="tim" class="select">tim (joy的小孩)</p><div>

下一層的所有元素，也可以使用 jquery 函數的 .children() 來選取

jQuery
1
2
3
4
5
6
7
8
$("#mother").children().click(function(){
    alert('children()');
})

// 指定元素下一層的所有指定元素
$("#mother").children(".select").click(function(){
    alert('children(".select")');
})

健忘筆記

如果 .children() 有指定元素例如 .children(".select")，表示會選取下一層中所有有 class="select" 的元素，如果沒有則不會選取

「,」相連的選擇器

需要相同樣式或是相同行為的元素綁在一起

範例

html
1
2
3
4
5
6
7
<p class="example1">example1</p>
<p class="example2">example2</p>
<p class="example3">example3</p>
<div>div
    <p class="example4">example4</p>
    <span class="example5">example5</span>
</div>
css
1
2
3
4
5
.example1,
.example3,
div > span {
    background-color: orange;
}
jQuery
1
2
3
$(".example1, .example3, div > span").click(function () {
    alert("click");
});

健忘筆記

可以使用各種選擇器選取元素，再用「,」綁在一起

jQuery 要使用組合選擇器還是原生的函式

jQuery 選取元素有很多方法，這邊比較組合選擇器和使用 jQuery 的函數的差異

例如：選取 id=”father” 層底下的所有 class=”select” 元素

jQuery
1
2
3
4
5
/* 組合選擇器 */
$("#father .select")

/* jQuery 的函數 */
$("#father").find(".select")

兩種方式都可以達到同樣的效果。在選取元素數量較少的情況下，兩者的差異非常微小，因為目前的瀏覽器及 jQuery 有對此進行優化。但如果選取的元素數量龐大，使用組合選擇器是較有效率的。

總結來說，如果不用考慮效能，則根據個人喜好和代碼的可讀性選擇一種方法來撰寫。覺得使用原生函式較容易閱讀及維護，那就直接使用原生函式吧！

結論

  • 相連的選擇器：選擇器中間沒有空格或是符號，表示同一個 tag 要同時符合所有條件
  • 空格相連的選擇器：指定元素層內的所有指定元素，表示同一家族內的指定元素都會選擇
  • 「+」相連的選擇器：同一層後的第一個元素，表示會選取大弟或大妹
  • 「~」相連的選擇器：同一層後的所有指定元素，表示會選取所有指定弟弟或妹妹
  • 「>」相連的選擇器：剛好在下一層的所有指定元素，表示會選取親生的指定小孩
  • 「,」相連的選擇器：需要相同樣式或是相同行為的元素綁在一起

選擇器用的好，書寫方面會更方便、選取某個元素時會更快速，也可以降低程式的複雜度，閱讀起來更舒服！

你有什麼常用的選擇器嗎？歡迎跟大家分享～

延伸閱讀

【jQuery、css】解析六種組合選擇器：相連、+、～、>、,、空格

https://forgetfulengineer.github.io/Frontend/JQuery/Analyzing-Six-Types-of-Combinator/

作者

健忘工程師

發表於

2024-03-25

更新於

2024-03-25

許可協議

評論

follow.it

歡迎訂閱電子報！追蹤【健忘工程師】的最新資訊～

廣告

最新文章

廣告

×
複製完成