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 相关文章推荐
jquery实现带单选按钮的表格行选中时高亮显示
Aug 01 Javascript
jQuery实现简单的日期输入格式化控件
Mar 12 Javascript
JavaScript给url网址进行encode编码的方法
Mar 18 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
Aug 24 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
Aug 30 Javascript
详解浏览器缓存和webpack缓存配置
Jul 06 Javascript
实现高性能javascript的注意事项
May 27 Javascript
js实现简单掷骰子小游戏
Oct 24 Javascript
JS实现进度条动态加载特效
Mar 25 Javascript
JavaScript进阶(三)闭包原理与用法详解
May 09 Javascript
javascript实现搜索筛选功能实例代码
Nov 12 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读取xml实例代码
2010/01/28 PHP
ThinkPHP中处理表单中的注意事项
2014/11/22 PHP
php ajax confirm 删除实例详解
2019/03/06 PHP
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
Javascript 中的 &amp;&amp; 和 || 使用小结
2010/04/25 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
2016/03/07 Javascript
纯JavaScript手写图片轮播代码
2016/10/20 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
2017/07/10 jQuery
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
2020/06/17 Javascript
浅谈Express异步进化史
2017/09/09 Javascript
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
2018/06/09 jQuery
JavaScript:ES2019 的新特性(译)
2019/08/08 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
2019/09/05 Javascript
layui使用表格渲染获取行数据的例子
2019/09/13 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
pygame学习笔记(3):运动速率、时间、事件、文字
2015/04/15 Python
基于Numpy.convolve使用Python实现滑动平均滤波的思路详解
2019/05/16 Python
Python.append()与Python.expand()用法详解
2019/12/18 Python
Django使用rest_framework写出API
2020/05/21 Python
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
瑰珀翠美国官网:Crabtree & Evelyn美国
2016/11/29 全球购物
德国滑雪和户外用品网上商店:XSPO
2019/10/30 全球购物
平面设计专业大学生职业规划书
2014/03/12 职场文书
公证委托书标准格式
2014/09/11 职场文书
乡镇机关党员民主评议表自我评价
2014/09/21 职场文书
二年级语文下册复习计划
2015/01/19 职场文书
董事长秘书岗位职责
2015/02/13 职场文书
婚庆开业庆典主持词
2015/06/30 职场文书
2016春季运动会前导词
2015/11/25 职场文书
初中班级口号霸气押韵
2015/12/24 职场文书
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python