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 相关文章推荐
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
Jan 16 Javascript
基于jQuery的公告无限循环滚动实现代码
May 11 Javascript
Javascript 按位与赋值运算符 (&amp;=)使用介绍
Feb 04 Javascript
分享20个提升网站界面体验的jQuery插件
Dec 15 Javascript
jQuery中:visible选择器用法实例
Dec 30 Javascript
javascript实现可拖动变色并关闭层窗口实例
May 15 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
Jul 28 Javascript
jQuery.datatables.js插件用法及api实例详解
Oct 28 Javascript
Vue数据双向绑定原理及简单实现方法
May 18 Javascript
vuex的module模块用法示例
Nov 12 Javascript
微信小程序缓存支持二次开发封装实现解析
Dec 16 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
Aug 14 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
咖啡豆要不要放冰箱的原因
2021/03/04 冲泡冲煮
PHP新手上路(九)
2006/10/09 PHP
PHP HTML代码串 截取实现代码
2009/06/29 PHP
PHP 7安装使用体验之性能大提升,兼容性强,扩展支持不够(升级PHP要谨慎)
2017/07/27 PHP
微信支付之JSAPI公众号支付详解
2019/05/15 PHP
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
showModelDialog弹出文件下载窗口的使用示例
2013/11/19 Javascript
jquery绑定事件不生效的解决方法
2014/02/11 Javascript
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
使用原生JS实现弹出层特效
2014/12/22 Javascript
jQuery实现移动 和 渐变特效的点击事件
2015/02/26 Javascript
javascript表格的渲染组件
2015/07/03 Javascript
深入理解javascript中concat方法
2016/12/12 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
2017/11/28 Javascript
Less 安装及基本用法
2018/05/05 Javascript
JS前后端实现身份证号验证代码解析
2020/07/23 Javascript
[35:34]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
python解决方案:WindowsError: [Error 2]
2016/08/28 Python
python的re正则表达式实例代码
2018/01/24 Python
Python浅复制中对象生存周期实例分析
2018/04/02 Python
python查看模块安装位置的方法
2018/10/16 Python
python用win32gui遍历窗口并设置窗口位置的方法
2019/07/26 Python
Python学习笔记之Break和Continue用法分析
2019/08/14 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
俄罗斯购买剧院和演唱会门票网站:Parter.ru
2019/11/09 全球购物
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
大学生职业生涯规划书范文
2014/01/04 职场文书
反对四风自我剖析材料
2014/10/07 职场文书
党支部工作总结2015
2015/04/01 职场文书
解决thinkphp6(tp6)在状态码500下不报错,或者显示错误“Malformed UTF-8 characters”的问题
2021/04/01 PHP
浅谈Python项目的服务器部署
2021/04/25 Python
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript
详解jQuery的核心函数和事件处理
2022/02/18 jQuery
Python实现Excel文件的合并(以新冠疫情数据为例)
2022/03/20 Python