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 相关文章推荐
获取JavaScript用户自定义类的类名称的代码
Mar 08 Javascript
自己动手制作jquery插件之自动添加删除行的实现
Oct 13 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
Jan 23 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
Jun 08 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
May 06 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 Javascript
loading动画特效小结
Jan 22 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
Feb 07 Javascript
JavaScript实现五子棋游戏的方法详解
Jul 08 Javascript
vue路由守卫,限制前端页面访问权限的例子
Nov 11 Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 Javascript
Vue实现开关按钮拖拽效果
Sep 22 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/06/14 PHP
yii框架builder、update、delete使用方法
2014/04/30 PHP
yii实现创建验证码实例解析
2014/07/31 PHP
对PHP依赖注入的理解实例分析
2016/10/09 PHP
thinkPHP3.2.3结合Laypage实现的分页功能示例
2018/05/28 PHP
利用jQuery 实现GridView异步排序、分页的代码
2010/02/06 Javascript
js替换字符串的所有示例代码
2013/07/23 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
javascript Promise简单学习使用方法小结
2016/05/17 Javascript
JavaScript事件学习小结(三)js事件对象
2016/06/09 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
2016/06/14 Javascript
AngularJS基础 ng-readonly 指令简单示例
2016/08/02 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
vue 设置路由的登录权限的方法
2018/07/03 Javascript
jQuery.parseJSON()函数详解
2019/02/28 jQuery
Vue中UI组件库之Vuex与虚拟服务器初识
2019/05/07 Javascript
jquery实现下载图片功能
2019/07/18 jQuery
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
python实现目录树生成示例
2014/03/28 Python
python高效过滤出文件夹下指定文件名结尾的文件实例
2018/10/21 Python
Python实现的合并两个有序数组算法示例
2019/03/04 Python
详解pandas删除缺失数据(pd.dropna()方法)
2019/06/25 Python
简单了解Django ContentType内置组件
2019/07/23 Python
python多线程同步实例教程
2019/08/11 Python
Python 列表的清空方式
2020/01/13 Python
Python字典添加,删除,查询等相关操作方法详解
2020/02/07 Python
增大python字体的方法步骤
2020/07/05 Python
Pytorch之扩充tensor的操作
2021/03/04 Python
HTML5语音识别标签写法附图
2013/11/18 HTML / CSS
HTML5 Blob对象的具体使用
2020/05/22 HTML / CSS
AmazeUI 点击元素显示全屏的实现
2020/08/25 HTML / CSS
萨克斯第五大道精品百货店: Saks Fifth Avenue
2017/04/28 全球购物
证婚人经典证婚词
2014/01/09 职场文书
优秀辅导员事迹材料
2014/02/16 职场文书
2019年个人工作总结范文(3篇)
2019/08/27 职场文书
Jupyter Notebook 如何修改字体和大小以及更改字体样式
2021/06/03 Python