jQuery屬性選擇器詳解

屬性選擇器，指的是通過“元素的屬性”來選擇元素的一種基礎選擇器。例如下面這句程式碼中的 id、type、value 就是 input 元素的屬性。

<input id="btn" type="button" value="按鈕" />

在 jQuery 中，常見的屬性選擇器如表1 所示。其中 E 指的是元素，attr 指的是屬性，value 指的是屬性值。

表 1：jQuery 屬性選擇器
選擇器	說明
E[attr]	選擇元素 E，其中 E 元素必須帀有 attr 屬性
E[attr = "value"]	選擇元素 E，其中 E 元素的 attr 屬性取值是“value”
E[attr != "value"]	選擇元素 E，其中 E 元素的 attr 屬性取值不是“value”
E[attr ^= "value"]	選擇元素 E,其中 E 元素的 attr 屬性取值是以“value”開頭的任何字元
E[attr $="value"]	選擇元素 E，其中 E 元素的 attr 屬性取值是以“value”結尾的任何字元
Efattr *= "value"]	選擇元素 E，其中 E 元素的 attr 屬性取值是包含“value”的任何字元
E[attr \|= "value"]	選擇元素 E，其中 E 元素的 attr「屬性取值等於“value”或者以“value”開頭
E[attr ~= "value"]	選擇元素 E，其中 E 元素的 attr 屬性取值等於“value”或者包含“value”

jQuery 的這些屬性選擇器使得選擇器具有萬用字元的功能，有點正規表示式的感覺。下面我們通過一些簡單的範例來認識一下。

1) 選取含有 class 屬性的 div 元素。

$("div[class]")

2) 選取 type 取值為 checkbox 的 input 元素。

$("input[type = 'checkbox']")

3) 選取 type 取值不是 checkbox 的 input 元素。

$("input[type != 'checkbox']")

4) 選取 class 屬性包含 nav 的 div 元素（class 屬性可以包含多個值）。

$("div[class *= 'nav']")

5) 選取 class 屬性以 nav 開頭的 div 元素，例如 <div class="nav-header"></div>。

$("div[class ^= 'nav']")

6) 選取 class 屬性以 nav 結尾的 div 元素，例如 <div class="first-nav"></div>。

$("div[class $= 'nav']")

7) 選取帶有 id 屬性並且 class 屬性是以 nav 開頭的 div 元素，例如 <div id="container"class="nav-header"></div>。

$("div[id][class ^='nav']")

舉例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("li[class]").css("color", "red");
        })
    </script>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li class="select">CSS</li>
        <li>JavaScript</li>
        <li class="select">jQuery</li>
        <li>Vue.js</li>
    </ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("li[class]").css("color", "red");
        })
    </script>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li class="select">CSS</li>
        <li>JavaScript</li>
        <li class="select">jQuery</li>
        <li>Vue.js</li>
    </ul>
</body>
</html>

程式執行結果如圖 1 所示：

圖 1：屬性選擇器的效果