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 相关文章推荐
Expandable &quot;Detail&quot; Table Rows
Aug 29 Javascript
简单的js分页脚本
May 21 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
Apr 01 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
Jan 15 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
Mar 05 Javascript
微信JS接口汇总及使用详解
Jan 09 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
Apr 03 Javascript
JavaScript获取指定元素位置的方法
Apr 08 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
Aug 18 Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
Aug 31 Javascript
前后端常见的几种鉴权方式(小结)
Aug 04 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
解析百度搜索结果link?url=参数分析 (全)
2012/10/09 PHP
PHP5.5在windows安装使用memcached服务端的方法
2014/04/16 PHP
PHP实现取得HTTP请求的原文
2014/08/18 PHP
java微信开发之上传下载多媒体文件
2016/06/24 PHP
PHP编写daemon process详解及实例代码
2016/09/30 PHP
ThinkPHP 3.2.3实现加减乘除图片验证码
2018/12/05 PHP
PHP基于timestamp和nonce实现的防止重放攻击方案分析
2019/07/26 PHP
Yii框架getter与setter方法功能与用法分析
2019/10/22 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
javascript 学习之旅 (3)
2009/02/05 Javascript
Function.prototype.call.apply结合用法分析示例
2013/07/03 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
2016/05/31 Javascript
js 获取今天以及过去日期
2017/04/11 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
2017/08/30 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
2017/10/09 Javascript
react native 文字轮播的实现示例
2018/07/27 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
2020/05/09 Javascript
Python列表(list)常用操作方法小结
2015/02/02 Python
Python实现二分查找与bisect模块详解
2017/01/13 Python
pycharm中成功运行图片的配置教程
2018/10/28 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
Python分析彩票记录并预测中奖号码过程详解
2019/07/09 Python
CSS3之多背景background使用示例
2013/10/18 HTML / CSS
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
南非最受欢迎的时尚品牌:MRP
2016/09/18 全球购物
大学生自我鉴定
2013/12/08 职场文书
饭店工作计划书
2014/01/10 职场文书
《三袋麦子》教学反思
2014/03/02 职场文书
祖国在我心中演讲稿400字
2014/05/04 职场文书
优秀电子工程系毕业生求职信
2014/05/24 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
地道战观后感
2015/06/04 职场文书
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python