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 相关文章推荐
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
js post提交调用方法
Feb 12 Javascript
javascript跨域的4种方法和原理详解
Apr 08 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
Oct 02 Javascript
php利用curl获取远程图片实现方法
Oct 26 Javascript
jQuery继承extend用法详解
Oct 10 Javascript
VsCode新建VueJs项目的详细步骤
Sep 23 Javascript
JavaScript设计模式之建造者模式实例教程
Jul 02 Javascript
Vue项目History模式404问题解决方法
Oct 31 Javascript
js对象数组和对象的使用实例详解
Aug 27 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 Javascript
小程序实现图片移动缩放效果
May 26 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基础设计模式大全(注册树模式、工厂模式、单列模式)
2015/08/31 PHP
Zend Framework教程之前端控制器Zend_Controller_Front用法详解
2016/03/07 PHP
Yii框架表单模型和验证用法
2016/05/20 PHP
PHP实现登录搜狐广告获取广告联盟数据的方法【附demo源码】
2016/10/14 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
Javascript中的数学函数
2007/04/04 Javascript
基于JQuery的cookie插件
2010/04/07 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
2014/01/08 Javascript
javascript实现文本域写入字符时限定字数
2014/02/12 Javascript
jQuery实现鼠标滑过点击事件音效试听
2015/08/31 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
2015/12/13 Javascript
使用JQuery实现智能表单验证功能
2016/03/08 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
2016/05/09 Javascript
easyui form validate总是返回false的原因及解决方法
2016/11/07 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
浅谈JavaScript中promise的使用
2017/01/11 Javascript
JS+Ajax实现百度智能搜索框
2017/08/04 Javascript
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
vue之父子组件间通信实例讲解(props、$ref、$emit)
2018/05/22 Javascript
Layui实现主窗口和Iframe层参数传递
2019/11/14 Javascript
详解Vue的watch中的immediate与watch是什么意思
2019/12/30 Javascript
浅谈python中set使用
2016/06/30 Python
关于阿里云oss获取sts凭证 app直传 python的实例
2019/08/20 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
Python爬虫库BeautifulSoup的介绍与简单使用实例
2020/01/25 Python
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
canvas 绘图时位置偏离的问题解决
2020/09/16 HTML / CSS
保护环境建议书400字
2014/05/13 职场文书
部门群众路线教育实践活动对照检查材料思想汇报
2014/10/07 职场文书
四风查摆问题及整改措施
2014/10/10 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
初中毕业生自我评价
2015/03/02 职场文书
幼儿园感恩节活动总结
2015/03/24 职场文书
护理自荐信
2019/05/14 职场文书
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL