jQuery中:contains選擇器用法實(shí)例

更新時(shí)間：2014年12月30日 11:12:59 投稿：shichen2014

這篇文章主要介紹了jQuery中:contains選擇器用法,以實(shí)例形式分析了:contains選擇器的功能、定義及匹配給定元素文本時(shí)的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

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

此選擇器匹配包含給定文本的元素。
語(yǔ)法:

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

$(":contains(text)")

此選擇器一般也要和其他選擇器配合使用，比如類選擇器和元素選擇器等等。例如:

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

$("li:contains('html')").css("color","blue")

以上代碼將文本中包含"html"的li元素中的字體顏色設(shè)置為藍(lán)色。
如果不和其他選擇器配合使用，則默認(rèn)狀態(tài)是和*選擇器配合使用，例如$(":contains")等同于$("*:contains")。
參數(shù)列表:

參數(shù)	描述
text	一個(gè)用以查找的字符串。

實(shí)例代碼:

實(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:contains('html')").css("color","blue") 

  }) 

}) 

</script>

</head>

<body>

<ul>

  <li>html專區(qū)</li>

  <li>div+css專區(qū)</li>

  <li>Jquery專區(qū)</li>

  <li>Javascript專區(qū)</li>

  <li>html5專區(qū)</li>

</ul>

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

</body>

</html>

以上代碼能夠?qū)癶tml”的li元素中的文本顏色設(shè)置為藍(lán)色。

實(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(){ 

    $("*:contains('html')").css("border","1px solid red") 

  }) 

}) 

</script>

</head>

<body>

<ul>

  <li>html專區(qū)</li>

  <li>div+css專區(qū)</li>

  <li>Jquery專區(qū)</li>

  <li>Javascript專區(qū)</li>

  <li>html5專區(qū)</li>

</ul>

<div>腳本之家</div>

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

</body>

</html>

由于以上代碼并沒有指定與:even選擇器相配合使用的選擇器，所以就默認(rèn)和*選擇器配合使用。

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

您可能感興趣的文章:

相關(guān)文章

EasyUI使用DataGrid實(shí)現(xiàn)動(dòng)態(tài)列數(shù)據(jù)綁定
這篇文章主要介紹了EasyUI使用DataGrid實(shí)現(xiàn)動(dòng)態(tài)列數(shù)據(jù)綁定的相關(guān)資料,需要的朋友可以參考下
2022-08-08
jQuery插件簡(jiǎn)單實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery插件簡(jiǎn)單實(shí)現(xiàn)方法,以一個(gè)簡(jiǎn)單的樣式添加功能為例分析了jquery插件的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-07-07
給jQuery方法添加回調(diào)函數(shù)一款插件的應(yīng)用
本插件用于給jQuery方法添加回調(diào)函數(shù)，可在類方法或?qū)嵗椒ㄌ砑尤魏巫远x的回調(diào)函數(shù)而不影響原方法的行為,感興趣的朋友可以了解下，希望本文對(duì)你有所幫助
2013-01-01
jquery實(shí)現(xiàn)滑屏大圖定時(shí)收縮為小banner圖片的廣告代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)滑屏大圖定時(shí)收縮為小banner圖片的廣告代碼,可實(shí)現(xiàn)大幅廣告圖的漸顯效果及定時(shí)收縮功能,點(diǎn)擊左上角關(guān)閉按鈕還可隱藏廣告圖片,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-09-09
jQuery實(shí)現(xiàn)鼠標(biāo)滾動(dòng)圖片延遲加載效果附源碼下載
本文給大家分享jquery技術(shù)實(shí)現(xiàn)圖片延時(shí)加載效果，本特效沒有使用專門的圖片延遲加載插件，只需要一小段jQuery代碼就實(shí)現(xiàn)了圖片延遲加載，使用非常方便，需要的朋友可以下載源碼
2016-06-06
關(guān)于jquery中動(dòng)態(tài)增加select,事件無(wú)效的快速解決方法
下面小編就為大家?guī)?lái)一篇關(guān)于jquery中動(dòng)態(tài)增加select,事件無(wú)效的快速解決方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-08-08
jQuery簡(jiǎn)單創(chuàng)建節(jié)點(diǎn)的方法
這篇文章主要介紹了jQuery簡(jiǎn)單創(chuàng)建節(jié)點(diǎn)的方法,涉及jQuery獲取節(jié)點(diǎn)及append添加元素創(chuàng)建節(jié)點(diǎn)的相關(guān)技巧,需要的朋友可以參考下
2016-09-09
jQuery滾動(dòng)條插件nanoscroller使用指南
本文給大家介紹的nanoScrollerJS是一款使用簡(jiǎn)單方式實(shí)現(xiàn) Mac OS X Lion 系統(tǒng)滾動(dòng)條效果的jQuery插件。該滾動(dòng)條插件利用原生的滾動(dòng)條可以工作在 iPad、iPhone 和一些 Android Tablets上。
2015-04-04
jQuery實(shí)現(xiàn)復(fù)制到粘貼板功能
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)復(fù)制到粘貼板功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
CSS+Jquery實(shí)現(xiàn)頁(yè)面圓角框方法大全
前不久做項(xiàng)目，要用到大量的頁(yè)面圓角的框塊，以前實(shí)現(xiàn)的時(shí)候都是用圖片做背景之類的方法，那種方法對(duì)于少數(shù)的還是比較可行的，但是當(dāng)涉及到整個(gè)項(xiàng)目都要用到這樣的效果時(shí)就顯得不夠優(yōu)化和簡(jiǎn)練了。
2009-12-12