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 相关文章推荐
从数据结构的角度分析 for each in 比 for in 快的多
Jul 07 Javascript
关于JS中的闭包浅谈
Aug 23 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
Aug 24 Javascript
jQuery $命名冲突解决方案汇总
Nov 13 Javascript
jQuery中noConflict()用法实例分析
Feb 08 Javascript
JavaScript字符集编码与解码详谈
Feb 02 Javascript
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 Javascript
vue axios整合使用全攻略
May 24 Javascript
微信小程序实现折叠展开效果
Jul 19 Javascript
微信公众平台获取access_token的方法步骤
Mar 29 Javascript
JavaScript实现图片上传并预览并提交ajax
Sep 30 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
Sep 16 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 编写大型网站问题集
2010/05/07 PHP
解析php中如何直接执行SHELL
2013/06/28 PHP
PHP中CURL的CURLOPT_POSTFIELDS参数使用细节
2014/03/17 PHP
Zend Framework页面缓存实例
2014/06/25 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
Laravel向公共模板赋值方法总结
2019/06/25 PHP
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
js实现省市联动效果的简单实例
2014/02/10 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
浅谈JavaScript的闭包函数
2016/12/08 Javascript
JQuery ZTree使用方法详解
2017/01/07 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
基于vue2实现左滑删除功能
2017/11/28 Javascript
Angular中管道操作符(|)的使用方法
2017/12/15 Javascript
JS同步、异步、延迟加载的方法
2018/05/05 Javascript
javascript json字符串到json对象转义问题
2019/01/22 Javascript
websocket4.0+typescript 实现热更新的方法
2019/08/14 Javascript
微信小程序 wx:for遍历循环使用实例解析
2019/09/09 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
[01:04:01]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第一场
2014/05/24 DOTA
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
python中MySQLdb模块用法实例
2014/11/10 Python
python交互式图形编程实例(三)
2017/11/17 Python
Django使用Mysql数据库已经存在的数据表方法
2018/05/27 Python
python中验证码连通域分割的方法详解
2018/06/04 Python
python实现朴素贝叶斯算法
2018/11/19 Python
Pycharm 设置默认头的图文教程
2019/01/17 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
Python3 解决读取中文文件txt编码的问题
2019/12/20 Python
python ftplib模块使用代码实例
2019/12/31 Python
ET Mall东森购物网:东森严选
2017/03/06 全球购物
行政助理岗位职责
2013/11/10 职场文书
大学四年学习的自我评价分享
2013/12/09 职场文书
党员四风自我剖析材料
2014/10/07 职场文书