在jQuery如何使用複合選擇器

這次帶給大家在jQuery裡如何使用複合選擇器，在jQuery裡使用複合選擇器的注意事項有哪些，下面就是實戰案例，一起來看一下。

一 介紹

複合選擇器將多個選擇器（可以是ID選擇器、元素選擇或是類別名稱選擇器）組合在一起，兩個選擇器之間以逗號“，”分隔，只要符合其中的任何一個篩選條件就會被匹配，而回傳的是一個集合形式的jQuery包裝集，利用jQuery索引器可以取得集合中的jQuery物件。

多種匹配條件的選擇器並不是匹配同時滿足這幾個選擇器的匹配條件的元素，而是將每個選擇器匹配的元素合併後一起返回。
複合選擇器的使用方法如下：

$(" selector1,selector2,selectorN");

selector1：為一個有效的選擇器，可以是ID選擇器、無素選擇器或是類別名稱選擇器等。

selector2：為另一個有效的選擇器，可以是ID選擇器、無素選擇器或是類別名稱選擇器等。

selectorN：（可選擇）為任意多個選擇器，可以是ID選擇器、無素選擇器或類別名稱選擇器等。

例如，要查詢文件中的全部的標記和使用css類別myClass的

標記，可以使用下面的jQuery程式碼：

$("span,p.myClass");

二 應用

在頁面中新增3種不同元素並統一設定樣式。使用複合選擇器篩選

元素和id屬性值為span的元素，並為它們添加新的樣式。

三程式碼

<script></script>
<p>p元素</p>
<p>p元素</p>
<span>ID为span的元素</span>
<input>
<script>
$(document).ready(
function()
{
  $("input[type=button]").click(
  function() //绑定按钮的单击事件
  {
    var myClass = $("p,#span");   //选取DOM元素
    myClass.css("background-color","#C50210");  //为选取的DOM元素设置背景颜色
    myClass.css("color","#FFF");  //为选取的DOM元素设置文字颜色
  });
});
</script>

#相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

vue計算屬性詳解

#Vue怎麼使用CDN優化首屏載入

Vue專案怎樣分環境打包

# vue的新手入門教學

以上是在jQuery如何使用複合選擇器的詳細內容。更多資訊請關注PHP中文網其他相關文章！