jQuery中:contains选择器用法实例


Posted in Javascript onDecember 30, 2014

本文实例讲述了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://3water.com/" />

<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://3water.com/" />

<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程序设计有所帮助。

Javascript 相关文章推荐
js返回上一页并刷新代码整理
Dec 21 Javascript
Javascript图像处理—为矩阵添加常用方法
Dec 27 Javascript
jQuery实现复选框成对选择及对应取消的方法
Mar 03 Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
May 12 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
Jul 14 Javascript
jQuery双向列表选择器select版
Nov 01 Javascript
Bootstrap table表格简单操作
Feb 07 Javascript
input输入框内容实时监测(附代码)
Aug 15 Javascript
react配置antd按需加载的使用
Feb 11 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
Sep 11 Javascript
Vue实现数据请求拦截
Oct 23 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 #Javascript
jQuery中:focus选择器用法实例
Dec 30 #Javascript
JavaScript中的原型链prototype介绍
Dec 30 #Javascript
jQuery中:not选择器用法实例
Dec 30 #Javascript
JavaScript中使用Object.create()创建对象介绍
Dec 30 #Javascript
JavaScript中对象property的读取和写入方法介绍
Dec 30 #Javascript
jQuery中:last选择器用法实例
Dec 30 #Javascript
You might like
PHP simple_html_dom.php+正则 采集文章代码
2009/12/24 PHP
PHP XML数据解析代码
2010/05/26 PHP
使用phpQuery采集网页的方法
2013/11/13 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
PHP 获取指定地区的天气实例代码
2017/02/08 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
Javascript 生成指定范围数值随机数
2009/01/09 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
2012/02/03 Javascript
让人印象深刻的10个jQuery手风琴效果应用
2012/05/08 Javascript
仿新浪微博登陆邮箱提示效果的js代码
2013/08/02 Javascript
浅析JS中document对象的一些重要属性
2014/03/06 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
jQuery学习笔记之jQuery原型属性和方法
2014/06/09 Javascript
Spring mvc 接收json对象
2015/12/10 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
Angular-Touch库用法示例
2016/12/22 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
2017/07/10 Javascript
js构建二叉树进行数值数组的去重与优化详解
2018/03/26 Javascript
electron-vue开发环境内存泄漏问题汇总
2019/10/10 Javascript
django简单的前后端分离的数据传输实例 axios
2020/05/18 Javascript
[02:13] 完美世界DOTA2联赛PWL DAY5集锦
2020/11/03 DOTA
python3+PyQt5实现拖放功能
2018/04/24 Python
python字符串Intern机制详解
2019/07/01 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
Python3显示当前时间、计算时间差及时间加减法示例代码
2019/09/07 Python
Python读入mnist二进制图像文件并显示实例
2020/04/24 Python
详解pytorch tensor和ndarray转换相关总结
2020/09/03 Python
前端canvas水印快速制作(附完整代码)
2019/09/19 HTML / CSS
汇智创新科技发展有限公司
2015/12/06 面试题
一份婚庆公司创业计划书
2014/01/11 职场文书
无故旷工检讨书
2014/01/26 职场文书
《春天来了》教学反思
2014/04/07 职场文书
优秀毕业生求职信
2014/06/05 职场文书
邀请书模板
2015/02/02 职场文书
JavaScript 中for/of,for/in 的详细介绍
2021/11/17 Javascript