欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery中:contains選擇器用法實例

 更新時間：2014年12月30日 11:12:59   投稿：shichen2014  
這篇文章主要介紹了jQuery中:contains選擇器用法,以實例形式分析了:contains選擇器的功能、定義及匹配給定元素文本時的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下

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

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

復制代碼 代碼如下:
$(":contains(text)")

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

復制代碼 代碼如下:
$("li:contains('html')").css("color","blue")

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

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

實例代碼:

實例一:

復制代碼 代碼如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dbjr.com.cn/" />
<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>點擊查看效果</button>
</body>
</html>

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

實例二:

復制代碼 代碼如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dbjr.com.cn/" />
<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>點擊查看效果</button>
</body>
</html>

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

希望本文所述對大家的jQuery程序設計有所幫助。

相關文章

  • 超輕量級的基于jquery的三級展開列表

    超輕量級的基于jquery的三級展開列表

    今天自己寫了個輕量級的三級展開菜單，如果需要可以在增加一級別，一般公司的項目三級都足夠了。
    2011-04-04
  • jQuery中prev()方法用法實例

    jQuery中prev()方法用法實例

    這篇文章主要介紹了jQuery中prev()方法用法,實例分析了prev()方法的功能、定義及取得匹配元素集合中每個元素緊鄰的前一個同輩元素使用技巧,需要的朋友可以參考下
    2015-01-01
  • Jquery封裝tab自動切換效果的具體實現(xiàn)

    Jquery封裝tab自動切換效果的具體實現(xiàn)

    這篇文章介紹了Jquery封裝tab自動切換效果的具體實現(xiàn)方法，有需要的朋友可以參考一下
    2013-07-07
  • jQuery自定義圖片上傳插件實例代碼

    jQuery自定義圖片上傳插件實例代碼

    這篇文章給大家介紹了jquery自定義圖片上傳插件的實例代碼，非常不錯，具有參考借鑒價值，需要的朋友一起看看吧
    2017-04-04
  • Jquery的Ajax技術使用方法

    Jquery的Ajax技術使用方法

    今天小編就為大家分享一篇關于Jquery的Ajax技術使用方法，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧
    2019-01-01
  • jQuery中children()方法用法實例

    jQuery中children()方法用法實例

    這篇文章主要介紹了jQuery中children()方法用法,實例分析了children()方法的功能、定義及過濾所匹配子元素的使用技巧,需要的朋友可以參考下
    2015-01-01
  • JQuery 簡便實現(xiàn)頁面元素數(shù)據(jù)驗證功能

    JQuery 簡便實現(xiàn)頁面元素數(shù)據(jù)驗證功能

    JQuery 簡便實現(xiàn)頁面元素數(shù)據(jù)驗證功能...
    2007-03-03
  • jQuery實現(xiàn)菜單顯示效果

    jQuery實現(xiàn)菜單顯示效果

    這篇文章主要為大家詳細介紹了jQuery實現(xiàn)菜單顯示效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2019-12-12
  • 多個jQuery版本共存的處理方案

    多個jQuery版本共存的處理方案

    本文給大家分享的是一個經(jīng)常需要碰到的問題的解決方案，如何才能讓一個頁面中同時存在多個jQuery呢，這就是今天我們需要探討的話題了。
    2015-03-03
  • jQuery插件datalist實現(xiàn)很好看的input下拉列表

    jQuery插件datalist實現(xiàn)很好看的input下拉列表

    本文給大家分享的是使用jQuery實現(xiàn)的房HTML5中的一個好看的input框很好看的下拉列表--datalist，兼容性非常不錯，這里推薦給大家，有需要的小伙伴可以參考下。
    2015-07-07

最新評論