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与运算符和或运算符的妙用
Feb 14 Javascript
禁用Enter键表单自动提交实现代码
May 22 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
May 22 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
Jun 12 Javascript
JavaScript实现的encode64加密算法实例分析
Apr 15 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
Jun 12 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
Jul 14 Javascript
JS简单实现数组去重的方法分析
Oct 14 Javascript
AngularJS 实现购物车全选反选功能
Oct 24 Javascript
animate.css在vue项目中的使用教程
Aug 05 Javascript
layer.close()关闭进度条和Iframe窗的方法
Aug 17 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
Sep 16 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速度全攻略
2006/10/09 PHP
php环境配置 php5 MySQL5 apache2 phpmyadmin安装与配置图文教程
2007/03/16 PHP
解析phpstorm + xdebug 远程断点调试
2013/06/20 PHP
PHP中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
php上传大文件失败的原因及应对策略
2015/10/20 PHP
phpcms中的评论样式修改方法
2016/10/21 PHP
PHP PDOStatement::closeCursor讲解
2019/01/30 PHP
Laravel向公共模板赋值方法总结
2019/06/25 PHP
PHP利用DWZ.CN服务生成短网址
2019/08/11 PHP
jquery 图片截取工具jquery.imagecropper.js
2010/04/09 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
2016/07/09 Javascript
Bootstrap基本样式学习笔记之表单(3)
2016/12/07 Javascript
基于JavaScript实现下拉列表左右移动代码
2017/02/07 Javascript
jQuery中的deferred使用方法
2017/03/27 jQuery
微信小程序实现动态设置页面标题的方法【附源码下载】
2017/11/29 Javascript
通过webpack引入第三方库的方法
2018/07/20 Javascript
JS随机密码生成算法
2019/09/23 Javascript
vue添加自定义右键菜单的完整实例
2020/12/08 Vue.js
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
python爬虫之自制英汉字典
2019/06/24 Python
关于Python turtle库使用时坐标的确定方法
2020/03/19 Python
thinkphp5 路由分发原理
2021/03/18 PHP
关于html字符串正则判断和匹配的具体使用
2019/12/12 HTML / CSS
Currentbody西班牙:美容仪专家
2019/09/28 全球购物
linux面试题参考答案(9)
2015/01/07 面试题
求职简历的自我评价怎样写好
2013/10/07 职场文书
生物化学研究助理员求职信
2013/10/09 职场文书
技术总监岗位职责
2013/12/05 职场文书
村委会贫困证明范文
2014/09/21 职场文书
合作协议书模板2014
2014/09/26 职场文书
2019年大学推荐信
2019/06/24 职场文书
浅谈Redis存储数据类型及存取值方法
2021/05/08 Redis
Python中三种花式打印的示例详解
2022/03/19 Python
把77A收信机改造成收音机
2022/04/05 无线电
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL