jQuery中:contains選擇器用法實(shí)例
更新時(shí)間：2014年12月30日 11:12:59 投稿：shichen2014
這篇文章主要介紹了jQuery中:contains選擇器用法,以實(shí)例形式分析了:contains選擇器的功能、定義及匹配給定元素文本時(shí)的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了jQuery中contains選擇器用法。分享給大家供大家參考。具體分析如下：
此選擇器匹配包含給定文本的元素。
語法:
復(fù)制代碼 代碼如下:
$(":contains(text)")
此選擇器一般也要和其他選擇器配合使用，比如類選擇器和元素選擇器等等。例如:
復(fù)制代碼 代碼如下:
$("li:contains('html')").css("color","blue")
以上代碼將文本中包含"html"的li元素中的字體顏色設(shè)置為藍(lán)色。
如果不和其他選擇器配合使用，則默認(rèn)狀態(tài)是和*選擇器配合使用，例如$(":contains")等同于$("*:contains")。
參數(shù)列表:
實(shí)例代碼:
實(shí)例一:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://m.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://m.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ì)有所幫助。
您可能感興趣的文章:
- 如何解決Mybatis--java.lang.IllegalArgumentException: Result Maps collection already contains value for X
- Python extract及contains方法代碼實(shí)例
- javascript中contains是否包含功能實(shí)現(xiàn)代碼(擴(kuò)展字符、數(shù)組、dom)
- C#判斷字符串中是否包含指定字符串及contains與indexof方法效率問題
- Oracle 中Contains 函數(shù)的用法
- jQuery使用contains過濾器實(shí)現(xiàn)精確匹配方法詳解
- JavaScript中擴(kuò)展Array contains方法實(shí)例
- jQuery實(shí)現(xiàn)contains方法不區(qū)分大小寫的方法
- PowerShell Contains函數(shù)查找字符串實(shí)例
- Java contains用法示例
相關(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,事件無效的快速解決方法
下面小編就為大家?guī)硪黄P(guān)于jquery中動(dòng)態(tài)增加select,事件無效的快速解決方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧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