首頁 > 文章 > web前端 > jQuery中的過濾性選擇器有哪些

jQuery中的過濾性選擇器有哪些

yulia原創: 2018-09-18 16:02:131637瀏覽

jQuery中的選擇器有很多，例如子元素選擇器，後代選擇器，過濾性選擇器等等，這篇文章就跟大家講講jQuery中的過濾性選擇器，正在學習選擇器的朋友可以參考一下，希望對你有幫助。

:first和:last過濾選擇器

:first得到一組相同標籤元素中的第1個元素
:last得到一群組相同標籤元素中的最後1個元素
例如：

<body>
  <div>改变最后一行"苹果"背景颜色：</div>
  <ol>
    <li>葡萄</li>
    <li>香蕉</li>
    <li>橘子</li>
    <li>西瓜</li>
    <li>苹果</li>
  </ol>       
<script type="text/javascript">
  $("li:last").css("background-color", "red");
</script>

:contains(text)過濾選擇器

:contains(text)選擇包含指定字串的全部元素，它通常與其他元素結合使用，取得包含「text」字串內容的全部元素物件
例如：

<body>
  <div>改变包含"jQuery"字符内容的背景色：</div>
  <ol>
    <li>强大的"jQuery"</li>
    <li>"javascript"也很实用</li>
    <li>"jQuery"前端必学</li>
    <li>"java"是一种开发语言</li>
    <li>前端利器——"jQuery"</li>
  </ol>
<script type="text/javascript">
  $("li:contains(&#39;jQuery&#39;)").css("background", "green");
</script>
</body>

:has(selector)過濾選擇器

:has(selector)過濾選擇器的功能是取得選擇器中包含指定元素名稱的全部元素
例如：

<body>
  <div>改变包含"label"元素的背景色：</div>
  <ol>
    <li><p>我是P先生</p></li>
    <li><label>L妹纸就是我</label></li>
    <li><p>我也是P先生</p></li>
    <li><label>我也是L妹纸哦</label></li>
    <li><p>P先生就是我哦</p></li>
  </ol>
<script type="text/javascript">
  $("li:has(&#39;label&#39;)").css("background-color", "blue");
</script>
</body>

:hidden過濾選擇器

:hidden過濾選擇器的功能是取得全部不可見的元素，這些不可見的元素中包含type屬性值為hidden的元素
例如：

<body>
  <h3>显示隐藏元素的内容</h3>
  <input id="hidstr" type="hidden" value="我已隐藏起来"/>
  <div></div>
  <script type="text/javascript">
    var $strHTML = $("input:hidden").val();
    $("div").html($strHTML);
  </script>
</body>

:visible過濾選擇器

:visible過濾選擇器取得的是全部可見的元素，也就是說，只要不將元素的display屬性值設為“none”，那麼，都可以透過該選擇器取得。
例如：

<body>
  <h3>修改可见“水果”的背景色</h3>
  <ul>
    <li style="display:none">橘子</li>
    <li style="display:block">香蕉</li>
    <li style="display:">葡萄</li>
    <li>苹果</li>
    <li style="display:none">西瓜</li>
  </ul>
  <script type="text/javascript">
    $("li:visible").css("background-color","blue");
  </script>
</body>

[attribute=value]屬性選擇器

[attribute=value]屬性選擇器的功能是取得與屬性名稱和屬性值完全相同的全部元素，其中[]是專用於屬性選擇器的括號符，參數attribute表示屬性名稱，value參數表示屬性值。
例如：

<body>
  <h3>改变"title"属性值为"蔬菜"的背景色</h3>
  <ul>
    <li title="蔬菜">茄子</li>
    <li title="水果">香蕉</li>
    <li title="蔬菜">芹菜</li>
    <li title="水果">苹果</li>
    <li title="水果">西瓜</li>
  </ul>
  <script type="text/javascript">
    $("li[title=&#39;蔬菜&#39;]").css("background-color", "green");
  </script>
</body>

[attribute!=value]屬性選擇器

[attribute!=value]屬性選擇器的功能是取得不包含屬性名，或與屬性名稱和屬性值不相同的全部元素，其中[]是專用於屬性選擇器的括號符，參數attribute表示屬性名稱，value參數表示屬性值。

[attribute*=value]屬性選擇器

#[attribute*=value]它可以取得屬性值中包含指定內容的全部元素，其中[]是專用於屬性選擇器的括號符，參數attribute表示屬性名稱，value參數表示對應的屬性值。
例如：

<body>
  <h3>改变"title"属性值包含"果"的背景色</h3>
  <ul>
    <li title="蔬菜">茄子</li>
    <li title="水果">香蕉</li>
    <li title="蔬菜">芹菜</li>
    <li title="人参果">小西红柿</li>
    <li title="水果">西瓜</li>
  </ul>
  <script type="text/javascript">
    $("li[title*=&#39;果&#39;]").css("background-color", "green");
  </script>
</body>

:first-child子元素過濾選擇器

:first-child子元素過濾選擇器則可以取得每個父元素中傳回的首個子元素，它是一個集合，常用多個集合資料的選擇處理。
例如：

<body>
  <h3>改变每个"蔬菜水果"中第一行的背景色</h3>
  <ol>
    <li>芹菜</li>
    <li>茄子</li>
    <li>萝卜</li>
    <li>大白菜</li>
    <li>西红柿</li>
  </ol>
  <ol>
    <li>橘子</li>
    <li>香蕉</li>
    <li>葡萄</li>
    <li>苹果</li>
    <li>西瓜</li>
  </ol>
  <script type="text/javascript">
    $("li:first-child").css("background-color", "green");
  </script>
</body>

:last-child子元素過濾選擇器

與:first-child子元素過濾選擇功能相反，:last-child子元素過濾選擇器的功能是取得每個父元素中傳回的最後一個子元素，它也是一個集合，常用多個集合資料的選擇處理。

以上是jQuery中的過濾性選擇器有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！

jquery 字符串 Attribute 对象选择器 display

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：JavaScript中的var，let，const是什麼？ var，let，const的用法（代碼）下一篇：JavaScript中的var，let，const是什麼？ var，let，const的用法（代碼）

看更多