jQuery中復(fù)合屬性選擇器用法實(shí)例

更新時(shí)間：2014年12月31日 11:48:37 投稿：shichen2014

這篇文章主要介紹了jQuery中復(fù)合屬性選擇器用法,實(shí)例分析了復(fù)合屬性選擇器匹配同時(shí)滿(mǎn)足多個(gè)屬性條件元素的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

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

此選擇器能夠匹配同時(shí)滿(mǎn)足多個(gè)屬性條件的元素。

語(yǔ)法結(jié)構(gòu):

復(fù)制代碼代碼如下:

[selector1][selector2][selectorN]

參數(shù)列表:

參數(shù)	描述
selector1	屬性選擇器。
selector2	另一個(gè)屬性選擇器，用以進(jìn)一步縮小范圍。
selectorN	任意多個(gè)屬性選擇器,也是用來(lái)縮小范圍。

實(shí)例代碼:

復(fù)制代碼代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.fzitv.net/" />

<title>腳本之家</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("button").click(function(){ 

    $("li[class=houtai][title$=p]").css("color","blue"); 

  }) 

})  

</script>

</head>

<body>

<div>

  <ul>

    <li class="houtai" title="asp">ASP教程</li>

    <li class="houtai" title="net">ASP.NET教程</li>

    <li class="houtai" title="php">;PHP教程</li>

  </ul>

  <ul>

    <li class="qiantai" title="html">html教程</li>

    <li class="qiantai" title="div">DIV+CSS教程</li>

    <li class="qiantai" title="jquery">jQUERY教程</li>

    <li class="qiantai" title="js">jAVAScript教程</li>

  </ul>

</div>

<button>點(diǎn)擊查看效果</button>

</body>

</html>

以上代碼可以將li元素中，class屬性值為“houtai”，title屬性值以“p”結(jié)尾的li元素，并且其中的文本顏色設(shè)置為藍(lán)色。

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery 文本框得失焦點(diǎn)的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)jQuery 文本框得失焦點(diǎn)的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-02-02
jQuery實(shí)現(xiàn)點(diǎn)擊自身以外區(qū)域關(guān)閉彈出層功能完整示例【改進(jìn)版】
這篇文章主要介紹了jQuery實(shí)現(xiàn)點(diǎn)擊自身以外區(qū)域關(guān)閉彈出層功能,結(jié)合具體實(shí)例形式分析了jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作實(shí)現(xiàn)彈出層打開(kāi)與關(guān)閉相關(guān)操作技巧,需要的朋友可以參考下
2018-07-07
jquery制作搜狐快站頁(yè)面效果示例分享
這篇文章主要介紹了jquery制作搜狐快站頁(yè)面效果示例,需要的朋友可以參考下
2014-02-02
使用Jquery獲取帶特殊符號(hào)的ID 標(biāo)簽的方法
這篇文章主要介紹了使用Jquery如何獲取帶特殊符號(hào)的ID 標(biāo)簽，該怎么寫(xiě),需要的朋友可以參考下
2014-04-04
更高效的使用JQuery 這里總結(jié)了8個(gè)小技巧
本文和其他的介紹JQuery的方法不同，本文側(cè)重點(diǎn)是介紹一些JQuery的使用原則，以便讓JQuery代碼更高效的執(zhí)行。
2016-04-04
jQuery實(shí)現(xiàn)ajax的嵌套請(qǐng)求案例分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)ajax的嵌套請(qǐng)求,結(jié)合具體實(shí)例形式分析了ajax嵌套請(qǐng)求的原理、實(shí)現(xiàn)方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2019-02-02
jQuery實(shí)現(xiàn)淡入淡出的模態(tài)框
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)淡入淡出的模態(tài)框，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
jQuery和hwSlider實(shí)現(xiàn)內(nèi)容響應(yīng)式可觸控滑動(dòng)切換效果附源碼下載（二）
這篇文章主要介紹了jQuery和hwSlider實(shí)現(xiàn)內(nèi)容響應(yīng)式可觸控滑動(dòng)切換效果附源碼下載（二）的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-06-06
jQuery實(shí)現(xiàn)Flash效果上下翻動(dòng)的中英文導(dǎo)航菜單代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)Flash效果上下翻動(dòng)的中英文導(dǎo)航菜單代碼,實(shí)例分析了jQuery基于鼠標(biāo)hover事件控制頁(yè)面元素動(dòng)畫(huà)效果的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-09-09
jQuery實(shí)現(xiàn)新消息在網(wǎng)頁(yè)標(biāo)題閃爍提示
這篇文章主要介紹了jQuery實(shí)現(xiàn)新消息在網(wǎng)頁(yè)標(biāo)題閃爍提示的相關(guān)資料,需要的朋友可以參考下
2015-06-06