jQuery中:contains选择器用法实例

更新时间：2014年12月30日 11:12:59 投稿：shichen2014

这篇文章主要介绍了jQuery中:contains选择器用法,以实例形式分析了:contains选择器的功能、定义及匹配给定元素文本时的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了jQuery中contains选择器用法。分享给大家供大家参考。具体分析如下：

此选择器匹配包含给定文本的元素。
语法:

复制代码代码如下:

$(":contains(text)")

此选择器一般也要和其他选择器配合使用，比如类选择器和元素选择器等等。例如:

复制代码代码如下:

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

以上代码将文本中包含"html"的li元素中的字体颜色设置为蓝色。
如果不和其他选择器配合使用，则默认状态是和*选择器配合使用，例如$(":contains")等同于$("*:contains")。
参数列表:

参数	描述
text	一个用以查找的字符串。

实例代码:

实例一:

复制代码代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://www.jb51.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专区</li>

  <li>div+css专区</li>

  <li>Jquery专区</li>

  <li>Javascript专区</li>

  <li>html5专区</li>

</ul>

<button>点击查看效果</button>

</body>

</html>

以上代码能够将包含“html”的li元素中的文本颜色设置为蓝色。

实例二:

复制代码代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://www.jb51.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专区</li>

  <li>div+css专区</li>

  <li>Jquery专区</li>

  <li>Javascript专区</li>

  <li>html5专区</li>

</ul>

<div>脚本之家</div>

<button>点击查看效果</button>

</body>

</html>

由于以上代码并没有指定与:even选择器相配合使用的选择器，所以就默认和*选择器配合使用。

希望本文所述对大家的jQuery程序设计有所帮助。

您可能感兴趣的文章:

超轻量级的基于jquery的三级展开列表
今天自己写了个轻量级的三级展开菜单，如果需要可以在增加一级别，一般公司的项目三级都足够了。
2011-04-04
jQuery中prev()方法用法实例
这篇文章主要介绍了jQuery中prev()方法用法,实例分析了prev()方法的功能、定义及取得匹配元素集合中每个元素紧邻的前一个同辈元素使用技巧,需要的朋友可以参考下
2015-01-01
Jquery封装tab自动切换效果的具体实现
这篇文章介绍了Jquery封装tab自动切换效果的具体实现方法，有需要的朋友可以参考一下
2013-07-07
jQuery自定义图片上传插件实例代码
这篇文章给大家介绍了jquery自定义图片上传插件的实例代码，非常不错，具有参考借鉴价值，需要的朋友一起看看吧
2017-04-04
Jquery的Ajax技术使用方法
今天小编就为大家分享一篇关于Jquery的Ajax技术使用方法，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2019-01-01
jQuery中children()方法用法实例
这篇文章主要介绍了jQuery中children()方法用法,实例分析了children()方法的功能、定义及过滤所匹配子元素的使用技巧,需要的朋友可以参考下
2015-01-01
JQuery 简便实现页面元素数据验证功能
JQuery 简便实现页面元素数据验证功能...
2007-03-03
jQuery实现菜单显示效果
这篇文章主要为大家详细介绍了jQuery实现菜单显示效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-12-12
多个jQuery版本共存的处理方案
本文给大家分享的是一个经常需要碰到的问题的解决方案，如何才能让一个页面中同时存在多个jQuery呢，这就是今天我们需要探讨的话题了。
2015-03-03
jQuery插件datalist实现很好看的input下拉列表
本文给大家分享的是使用jQuery实现的房HTML5中的一个好看的input框很好看的下拉列表--datalist，兼容性非常不错，这里推荐给大家，有需要的小伙伴可以参考下。
2015-07-07