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 相关文章推荐
W3C Group的JavaScript1.8 新特性介绍
May 19 Javascript
PHP中使用微秒计算脚本执行时间例子
Nov 19 Javascript
javascript基于DOM实现权限选择实例分析
May 14 Javascript
《JavaScript函数式编程》读后感
Aug 07 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
Nov 02 Javascript
深入理解JS DOM事件机制
Aug 06 Javascript
Bootstrap使用基础教程详解
Sep 05 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
Nov 29 Javascript
原生js实现焦点轮播图效果
Jan 12 Javascript
angular2模块和共享模块详解
Apr 08 Javascript
Js代码中的span拼接问题解决
Nov 22 Javascript
uniapp微信小程序:key失效的解决方法
Jan 20 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
php下mysql数据库操作类(改自discuz)
2010/07/03 PHP
mysql数据库差异比较的PHP代码
2012/02/05 PHP
一个显示某段时间内每个月的方法 返回由这些月份组成的数组
2012/05/16 PHP
php实现遍历文件夹的方法汇总
2017/03/02 PHP
初学prototype,发个JS接受URL参数的代码
2006/09/25 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
2012/12/03 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
2015/03/19 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
js正则表达式验证邮件地址
2015/11/12 Javascript
浅谈angularJS中的事件
2016/07/12 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
Vue.js双向绑定操作技巧(初级入门)
2016/12/27 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
2017/03/25 Javascript
使用Vue构建可重用的分页组件
2018/03/26 Javascript
使用Vue CLI创建typescript项目的方法
2019/08/09 Javascript
原生javascript如何实现共享onload事件
2020/07/03 Javascript
解决Vue大括号字符换行踩的坑
2020/11/09 Javascript
Python中urllib2模块的8个使用细节分享
2015/01/01 Python
python实现同时给多个变量赋值的方法
2015/04/30 Python
Python实现Smtplib发送带有各种附件的邮件实例
2017/06/05 Python
Python实现excel转sqlite的方法
2017/07/17 Python
浅谈Pycharm调用同级目录下的py脚本bug
2018/12/03 Python
详解程序意外中断自动重启shell脚本(以Python为例)
2019/07/26 Python
Python分割训练集和测试集的方法示例
2019/09/19 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
pycharm全局搜索的具体步骤
2020/07/28 Python
python 读取、写入txt文件的示例
2020/09/27 Python
Bealls Florida百货商店:生活服饰、家居装饰和鞋子
2018/02/23 全球购物
应届生求职简历的自我评价怎么写
2013/10/23 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书
2016年教师反腐倡廉心得体会
2016/01/13 职场文书
读《工匠精神》有感:热爱工作,精益求精
2019/12/28 职场文书
关于python爬虫应用urllib库作用分析
2021/09/04 Python