jQuery選擇器(下)

落魄三無青年發表於2020-11-05
jQuery

屬性過濾選擇器

jQuery的屬性過濾選擇器具有以下幾種：

選擇器描述
[attr]過濾選擇器匹配包含給定屬性的元素
[attr=value]過濾選擇器匹配給定的屬性是某個特定值的元素
[attr!=value]過濾選擇器匹配所有不含有指定的屬性，或者屬性不等於特定值的元素
[attr^=value]過濾選擇器匹配給定的屬性是以某些值開始的元素
[attr$=value]過濾選擇器匹配給定的屬性是以某些值結尾的元素
[attr*=value]過濾選擇器匹配給定的屬性是以包含某些值的元素
組合屬性過濾選擇器匹配元素的需要同時滿足多個屬性過濾選擇器

說明：由於jQuery物件是類陣列物件，即使匹配的元素只有一個，返回的結果依舊是類陣列物件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>屬性過濾選擇器</title>
  <script src="../../js/jquery-1.12.4.js"></script>
</head>
<body>
  <div id="username" name="box" class="mybox"></div>
  <div id="password" name="box1" class="mybox1"></div>
  <div id="box2"></div>
  <div class="mybox2"></div>
  <script>
    console.log($('div[name]'));
    console.log($('div[class=mybox]'));
    // [attr != value]選擇器 - 包含沒有attr屬性的元素
    console.log($('div[class!=mybox]'));

    console.log($('div[class^=m]'));
    // 屬性過濾選擇器組合用法 -
    console.log($('div[name=box][class^=my]'));
  </script>
</body>
</html>

子元素過濾選擇器

jQuery的子元素過濾選擇器具有以下幾種：

選擇器描述
:nth-child()過濾選擇器匹配其父元素下的第N個子或奇偶元素
:first-child過濾選擇器匹配第一個子元素
:last-child過濾選擇器匹配最後一個子元素
:only-child過濾選擇器如果弄個元素是父元素中唯一的子元素，那將會被匹配

說明：由於jQuery物件是類陣列物件，即使匹配的元素只有一個，返回的結果依舊是類陣列物件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>子元素過濾選擇器</title>
  <script src="../../js/jquery-1.12.4.js"></script>
</head>
<body>
  <div id="father">
    <div id="d1">這個是id為d1的div元素</div>
    <div id="d2">這個是id為d2的div元素</div>
    <div id="d3">這個是id為d3的div元素</div>
  </div>
  <script>
    // :first-child - 當前元素是否為第一個子元素
    console.log($('div:first-child'));
    console.log($('div:last-child'));
    /*
      :nth-child(index)
      * 作用 - 匹配當前元素作為第index個子元素
      * 注意 - index是從1開始，表示第幾個
    */ 
    console.log($('div:nth-child(1)'));

    console.log($('body>div:only-child'));
  </script>
</body>
</html>

表單物件屬性過濾選擇器

jQuery的表單物件屬性過濾選擇器具有以下幾種：

選擇器描述
:enabledg過濾選擇器匹配所有可用元素
:disabled過濾選擇器匹配所有不可用元素
:checked過濾選擇器匹配所有選中的被選中元素(核取方塊,單選框等)
:selected過濾選擇器匹配所有選中的<option>元素

說明：由於jQuery物件是類陣列物件，即使匹配的元素只有一個，返回的結果依舊是類陣列物件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表單物件屬性過濾選擇器</title>
  <script src="../../js/jquery-1.12.4.js"></script>
</head>
<body>
  <form action="#">
    <input type="text" disabled>
    <input type="checkbox">html
    <input type="checkbox" checked>css
  </form>
  <select>
    <option>派大星</option>
    <option selected>海綿寶寶</option>
    <option>章魚哥</option>
  </select>
  <script>
    console.log($('input:disabled'));
    console.log($('input:checked'));
    console.log($('option:selected'));
  </script>
</body>
</html>

相關文章