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 相关文章推荐
本地对象Array的原型扩展实现代码
Dec 04 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
May 25 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 Javascript
Angular.js指令学习中一些重要属性的用法教程
May 24 Javascript
js实现鼠标跟随运动效果
Aug 02 Javascript
react-native-tab-navigator组件的基本使用示例代码
Sep 07 Javascript
JS实现遍历不规则多维数组的方法
Mar 21 Javascript
Vue创建头部组件示例代码详解
Oct 23 Javascript
基于Vue实现图片在指定区域内移动的思路详解
Nov 11 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
Apr 15 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
Jul 10 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
Laravel框架中扩展函数、扩展自定义类的方法
2014/09/04 PHP
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
2010/04/20 Javascript
说明你的Javascript技术很烂的五个原因
2011/04/26 Javascript
Extjs NumberField后面加单位实现思路
2013/07/30 Javascript
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
JavaScript中push(),join() 函数 实例详解
2016/09/06 Javascript
jQuery异步提交表单的两种方式
2016/09/13 Javascript
js实现省份下拉菜单效果
2017/02/15 Javascript
React Native之TextInput组件解析示例
2017/08/22 Javascript
[48:52]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第一局
2016/02/25 DOTA
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
Python多线程爬虫简单示例
2016/03/04 Python
玩转python selenium鼠标键盘操作(ActionChains)
2020/04/12 Python
pandas 使用apply同时处理两列数据的方法
2018/04/20 Python
Python登录注册验证功能实现
2018/06/18 Python
对python list 遍历删除的正确方法详解
2018/06/29 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
Python读取Pickle文件信息并计算与当前时间间隔的方法分析
2019/01/30 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
Prometheus开发中间件Exporter过程详解
2020/11/30 Python
HTML5添加鼠标悬浮音响效果不使用FLASH
2014/04/23 HTML / CSS
为什么使用接口?
2014/08/13 面试题
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
入股协议书范本
2014/04/14 职场文书
建筑工地门卫岗位职责
2014/04/30 职场文书
化学专业毕业生求职信
2014/07/28 职场文书
2014年法院工作总结
2014/11/24 职场文书
租赁协议书
2015/01/27 职场文书
个人委托书范文
2015/01/28 职场文书
综合素质评价自我评价
2015/03/06 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
python使用XPath解析数据爬取起点小说网数据
2021/04/22 Python
Docker安装MySql8并远程访问的实现
2022/07/07 Servers