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 相关文章推荐
为你的网站增加亮点的9款jQuery插件推荐
May 03 Javascript
JQueryEasyUI Layout布局框架的使用
Apr 08 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
May 07 Javascript
详解Javascript事件驱动编程
Jan 03 Javascript
javascript动态获取登录时间和在线时长
Feb 25 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
Sep 05 Javascript
jquery实现折叠菜单效果【推荐】
Mar 08 Javascript
Three.js利用dat.GUI如何简化试验流程详解
Sep 26 Javascript
解决vue-cli webpack打包后加载资源的路径问题
Sep 25 Javascript
详解React 条件渲染
Jul 08 Javascript
基于原生JS封装的Modal对话框插件的示例代码
Sep 09 Javascript
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
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
基于PHPExcel的常用方法总结
2013/06/13 PHP
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
ThinkPHP提示错误Fatal error: Allowed memory size的解决方法
2015/02/12 PHP
详解PHP执行定时任务的实现思路
2015/12/21 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
laravel 框架配置404等异常页面
2019/01/07 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
javascript 面向对象编程基础:封装
2009/08/21 Javascript
js中将具有数字属性名的对象转换为数组
2011/03/06 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
2015/03/13 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
2015/06/18 Javascript
jquery带动画效果幻灯片特效代码
2015/08/27 Javascript
js自定义select下拉框美化特效
2016/05/12 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
Centos6.8下Node.js安装教程
2017/05/12 Javascript
js图片轮播插件的封装
2017/07/21 Javascript
你有必要知道的10个JavaScript难点
2017/07/25 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
vue+webpack实现异步加载三种用法示例详解
2018/04/24 Javascript
详解React之key的使用和实践
2018/09/29 Javascript
javascript实现计算指定范围内的质数示例
2018/12/29 Javascript
小程序中canvas的drawImage方法参数使用详解
2019/07/04 Javascript
[03:55]2016国际邀请赛中国区预选赛首日TOP10精彩集锦
2016/06/27 DOTA
python爬虫获取淘宝天猫商品详细参数
2020/06/23 Python
解决pandas .to_excel不覆盖已有sheet的问题
2018/12/10 Python
python paramiko利用sftp上传目录到远程的实例
2019/01/03 Python
基于Python函数和变量名解析
2019/07/19 Python
利用ImageAI库只需几行python代码实现目标检测
2019/08/09 Python
艺龙旅行网酒店预订:国内、港澳台酒店
2018/06/26 全球购物
教你怎样写好自我评价
2013/10/05 职场文书
小学生田径运动会广播稿
2014/09/11 职场文书
css让页脚保持在底部位置的四种方案
2022/07/23 HTML / CSS