jQuery中[attribute*=value]选择器用法实例


Posted in Javascript onDecember 31, 2014

本文实例讲述了jQuery中[attribute*=value]选择器用法。分享给大家供大家参考。具体分析如下:

此选择器能够匹配给定的属性包含某些值的元素。

语法结构:

$("[attribute*=value]")

参数列表:

参数 描述
attribute 定义要查找的属性。
value 定义要查找的值。 引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时,用以避免冲突。

实例代码:

实例一:

<!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[id*='ir']").css("color","blue"); 

  })

})

</script>

</head>

<body>

<ul>

  <li id="first">html专区</li>

  <li id="second">Jquery专区</li>

</ul>

<ul>

  <li id="third">欢迎来到三水点靠木</li>

  <li>三水点靠木欢迎您</li>

</ul>

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

</body>

</html>

以上代码可以将li元素中,id属性值中带有“ir”的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(){ 

    $("li[id*=[ir]").css("color","blue"); 

  })

})

</script>

</head>

<body>

<ul>

  <li id="f[irst">html专区</li>

  <li id="second">Jquery专区</li>

</ul>

<ul>

  <li id="third">欢迎来到三水点靠木</li>

  <li>三水点靠木欢迎您</li>

</ul>

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

</body>

</html>

从以上代码可以看出如何代码中含有"["或者"]"的时候,必须要带有引号,否则会造成匹配错误。

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

Javascript 相关文章推荐
Javascript 函数中的参数使用分析
Mar 27 Javascript
jQuery validate 中文API 附validate.js中文api手册
Jul 31 Javascript
js最简单的拖拽效果实现代码
Sep 24 Javascript
JQuery动态创建DOM、表单元素的实现代码
Aug 09 Javascript
js选取多个或单个元素的实现代码(用class)
Aug 22 Javascript
javascript常见操作汇总
Sep 03 Javascript
快速学习JavaScript的6个思维技巧
Oct 13 Javascript
基于jQuery实现音乐播放试听列表
Apr 14 Javascript
javascript 中的事件委托详解
Oct 25 Javascript
JS 对java返回的json格式的数据处理方法
Dec 05 Javascript
使用Vue CLI创建typescript项目的方法
Aug 09 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
Oct 26 Javascript
jQuery中[attribute^=value]选择器用法实例
Dec 31 #Javascript
jQuery中[attribute=value]选择器用法实例
Dec 31 #Javascript
修复bash漏洞的shell脚本分享
Dec 31 #Javascript
分享一个常用的javascript静态类
Dec 31 #Javascript
兼容Firefox的Javascript XSLT 处理XML文件
Dec 31 #Javascript
使用jquery+CSS实现控制打印样式
Dec 31 #Javascript
浅谈javascript中字符串String与数组Array
Dec 31 #Javascript
You might like
星际争霸秘籍
2020/03/04 星际争霸
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
php新建文件自动编号的思路与实现
2011/06/27 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
PHP中strtr与str_replace函数运行性能简单测试示例
2019/06/22 PHP
javascript 写类方式之二
2009/07/05 Javascript
jWiard 基于JQuery的强大的向导控件介绍
2011/10/28 Javascript
javascript 终止函数执行操作
2014/02/14 Javascript
javascript对中文按照拼音排序代码
2014/08/20 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
2015/09/01 Javascript
Windows 系统下设置Nodejs NPM全局路径
2016/04/26 NodeJs
jQuery 遍历map()方法详解
2016/11/04 Javascript
JS常见算法详解
2017/02/28 Javascript
JS全角与半角转化实例(分享)
2017/07/04 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
Vue 中对图片地址进行拼接的方法
2018/09/03 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
2018/12/13 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
2019/09/05 Javascript
js将URL网址转为16进制加密与解密函数
2020/03/04 Javascript
vue+Element-ui实现登录注册表单
2020/11/17 Javascript
python 专题九 Mysql数据库编程基础知识
2017/03/16 Python
Python中的defaultdict与__missing__()使用介绍
2018/02/03 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
pandas读取csv文件提示不存在的解决方法及原因分析
2020/04/21 Python
python利用platform模块获取系统信息
2020/10/09 Python
在pycharm中使用pipenv创建虚拟环境和安装django的详细教程
2020/11/30 Python
Django+Django-Celery+Celery的整合实战
2021/01/20 Python
意大利买卖二手奢侈品网站:LAMPOO
2020/06/03 全球购物
《两只鸟蛋》教学反思
2014/02/10 职场文书
信息专业学生学习的自我评价
2014/02/17 职场文书
教堂婚礼主持词
2014/03/14 职场文书
2014年建筑工作总结
2014/11/26 职场文书
2015年工商所工作总结
2015/05/21 职场文书
音乐研修感悟
2015/11/18 职场文书
Windows下用Nginx配置https服务器及反向代理的问题
2021/09/25 Servers