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 相关文章推荐
发现的以前不知道的函数
Sep 19 Javascript
javascript 原型模式实现OOP的再研究
Apr 09 Javascript
比较全面的event对像在IE与FF中的区别 推荐
Sep 21 Javascript
基于jQuery的获取标签名的代码
Jul 16 Javascript
jquery中通过父级查找进行定位示例
Jun 28 Javascript
js获得地址栏?问号后参数的方法
Aug 08 Javascript
JavaScript 垃圾回收机制分析
Oct 10 Javascript
yepnope.js使用详解及示例分享
Jun 23 Javascript
在JS数组特定索引处指定位置插入元素的技巧
Aug 24 Javascript
JavaScript实现自动变换表格边框颜色
May 08 Javascript
学习Vue组件实例
Apr 28 Javascript
js实现图片局部放大效果详解
Mar 18 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开发中的中文编码问题
2013/08/08 PHP
PHP面向对象教程之自定义类
2014/06/10 PHP
PHP yii实现model添加默认值的方法(两种方法)
2016/11/10 PHP
XML的代替者----JSON
2007/07/21 Javascript
js中switch case循环实例代码
2013/12/30 Javascript
原生javascript实现Tab选项卡切换功能
2015/01/12 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
js实现仿微博滚动显示信息的效果
2015/12/21 Javascript
ES6新特性之字符串的扩展实例分析
2017/04/01 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
2017/05/26 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
JavaScript实现短暂提示框功能
2018/04/04 Javascript
微信小程序云开发实现云数据库读写权限
2019/05/17 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
2020/02/11 Javascript
Python读写Excel文件方法介绍
2014/11/22 Python
Python语言生成水仙花数代码示例
2017/12/18 Python
Python网络编程之TCP套接字简单用法示例
2018/04/09 Python
Python 实现选择排序的算法步骤
2018/04/22 Python
Python使用selenium实现网页用户名 密码 验证码自动登录功能
2018/05/16 Python
在Python中使用defaultdict初始化字典以及应用方法
2018/10/31 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
在Matplotlib图中插入LaTex公式实例
2020/04/17 Python
Python filter过滤器原理及实例应用
2020/08/18 Python
Django2.1.7 查询数据返回json格式的实现
2020/12/29 Python
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
英国电器零售商:PRC Direct
2018/06/21 全球购物
客户代表实习人员自我鉴定
2013/09/27 职场文书
毕业生就业推荐信范文
2013/12/01 职场文书
团员个人的自我评价
2013/12/02 职场文书
仓管员岗位责任制
2014/02/19 职场文书
2016中秋节晚会开场白
2015/11/26 职场文书
安全生产培训心得体会
2016/01/18 职场文书
Python利用FlashText算法实现替换字符串
2022/03/31 Python
vue代码分块和懒加载非必要资源文件
2022/04/11 Vue.js