jQuery中復(fù)合選擇器簡(jiǎn)單用法示例

更新時(shí)間：2018年03月31日 11:50:52 作者：chengqiuming

這篇文章主要介紹了jQuery中復(fù)合選擇器簡(jiǎn)單用法,結(jié)合實(shí)例形式分析了jQuery中復(fù)合選擇器的概念、功能、應(yīng)用場(chǎng)景及相關(guān)使用方法,需要的朋友可以參考下

本文實(shí)例講述了jQuery中復(fù)合選擇器簡(jiǎn)單用法。分享給大家供大家參考，具體如下：

一介紹

復(fù)合選擇器將多個(gè)選擇器（可以是ID選擇器、元素選擇或是類名選擇器）組合在一起，兩個(gè)選擇器之間以逗號(hào)“，”分隔，只要符合其中的任何一個(gè)篩選條件就會(huì)被匹配，返回的是一個(gè)集合形式的jQuery包裝集，利用jQuery索引器可以取得集合中的jQuery對(duì)象。

多種匹配條件的選擇器并不是匹配同時(shí)滿足這幾個(gè)選擇器的匹配條件的元素，而是將每個(gè)選擇器匹配的元素合并后一起返回。
復(fù)合選擇器的使用方法如下：

$(" selector1,selector2,selectorN");

selector1：為一個(gè)有效的選擇器，可以是ID選擇器、無(wú)素選擇器或是類名選擇器等。

selector2：為另一個(gè)有效的選擇器，可以是ID選擇器、無(wú)素選擇器或是類名選擇器等。

selectorN：（可選擇）為任意多個(gè)選擇器，可以是ID選擇器、無(wú)素選擇器或是類名選擇器等。

例如，要查詢文檔中的全部的<span>標(biāo)記和使用CSS類myClass的<div>標(biāo)記，可以使用下面的jQuery代碼：

$("span,div.myClass");

二應(yīng)用

在頁(yè)面添加3種不同元素并統(tǒng)一設(shè)置樣式。使用復(fù)合選擇器篩選<div>元素和id屬性值為span的元素，并為它們添加新的樣式。

三代碼

<script language="javascript" src="JS/jquery-3.1.1.min.js"></script>
<p class="default">p元素</p>
<div class="default">div元素</div>
<span class="default" id="span">ID為span的元素</span>
<input type="button" value="為div元素和ID為span的元素?fù)Q膚" />
<script type="text/javascript">
$(document).ready(
function()
{
  $("input[type=button]").click(
  function() //綁定按鈕的單擊事件
  {
    var myClass = $("div,#span");   //選取DOM元素
    myClass.css("background-color","#C50210");  //為選取的DOM元素設(shè)置背景顏色
    myClass.css("color","#FFF");  //為選取的DOM元素設(shè)置文字顏色
  });
});
</script>

四運(yùn)行效果