當前位置:編程學習大全網 - 源碼破解 - 在jQuery裏如何使用復合選擇器

在jQuery裏如何使用復合選擇器

這次給大家帶來在jQuery裏如何使用復合選擇器,在jQuery裏使用復合選擇器的註意事項有哪些,下面就是實戰案例,壹起來看壹下。

壹 介紹

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

多種匹配條件的選擇器並不是匹配同時滿足這幾個選擇器的匹配條件的元素,而是將每個選擇器匹配的元素合並後壹起返回。

復合選擇器的使用方法如下:

$(" selector1,selector2,selectorN");

selector1:為壹個有效的選擇器,可以是ID選擇器、無素選擇器或是類名選擇器等。

selector2:為另壹個有效的選擇器,可以是ID選擇器、無素選擇器或是類名選擇器等。

selectorN:(可選擇)為任意多個選擇器,可以是ID選擇器、無素選擇器或是類名選擇器等。

例如,要查詢文檔中的全部的<span>標記和使用css類myClass的<p>標記,可以使用下面的jQuery代碼:

$("span,p.myClass");

二 應用

在頁面添加3種不同元素並統壹設置樣式。使用復合選擇器篩選<p>元素和id屬性值為span的元素,並為它們添加新的樣式。

三 代碼

<script language="javascript" src="JS/jquery-3.1.1.min.js"></script>

<p class="default">p元素</p>

<p class="default">p元素</p>

<span class="default" id="span">ID為span的元素</span>

<input type="button" value="為p元素和ID為span的元素換膚" />

<script type="text/javascript">

$(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>

相信看了本文案例妳已經掌握了方法,更多精彩請關註Gxl網其它相關文章!

推薦閱讀:

vue計算屬性詳解

Vue怎樣使用CDN優化首屏加載

Vue項目怎樣分環境打包

vue的新手入門教程

  • 上一篇:酒店試睡員的職業風險有哪些
  • 下一篇:手機號碼生成器有什麽用?
  • copyright 2024編程學習大全網