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 相关文章推荐
Jquey拖拽控件Draggable使用方法(asp.net环境)
Sep 28 Javascript
js获取键盘按键响应事件(兼容各浏览器)
May 16 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 Javascript
Bootstrap Table使用方法详解
Aug 01 Javascript
react.js 翻页插件实例代码
Jan 19 Javascript
webpack独立打包和缓存处理详解
Apr 03 Javascript
js获取浏览器的各种属性
Apr 27 Javascript
使用JavaScript实现链表的数据结构的代码
Aug 02 Javascript
webpack v4 从dev到prd的方法
Apr 02 Javascript
vue异步axios获取的数据渲染到页面的方法
Aug 09 Javascript
Angular实现svg和png图片下载实现
May 05 Javascript
vue的列表交错过渡实现代码示例
May 05 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 调用远程url的六种方法小结
2009/11/02 PHP
WordPress中用于获取搜索表单的PHP函数使用解析
2016/01/05 PHP
jquery 简短右键菜单 多浏览器兼容
2010/01/01 Javascript
jQuery :first选择器使用介绍
2013/08/09 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
2013/11/07 Javascript
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
jQuery菜单插件用法实例
2015/07/25 Javascript
jquery中val()方法是从最后一个选项往前读取的
2015/09/06 Javascript
利用python分析access日志的方法
2016/10/26 Javascript
Jquery中attr与prop的区别详解
2017/05/27 jQuery
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
2018/09/27 Javascript
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
JS闭包原理与应用经典示例
2018/12/20 Javascript
JS使用H5实现图片预览功能
2019/09/30 Javascript
基于Vue中使用节流Lodash throttle详解
2019/10/30 Javascript
JQuery常用简单动画操作方法回顾与总结
2019/12/07 jQuery
Vue学习之组件用法实例详解
2020/01/06 Javascript
python实现忽略大小写对字符串列表排序的方法
2014/09/25 Python
5款Python程序员高频使用开发工具推荐
2019/04/10 Python
Python对接六大主流数据库(只需三步)
2019/07/31 Python
使用pycharm和pylint检查python代码规范操作
2020/06/09 Python
tensorflow与numpy的版本兼容性问题的解决
2021/01/08 Python
英国在线药房:Chemist.co.uk
2019/03/26 全球购物
Timberland俄罗斯官方网上商店:全球领先的户外品牌
2020/03/15 全球购物
C#笔试题集合
2013/06/21 面试题
儿科主治医生个人求职信
2013/09/23 职场文书
幼儿园庆六一游园活动方案
2014/01/29 职场文书
业绩考核岗位职责
2014/02/01 职场文书
刑事辩护授权委托书格式
2014/10/13 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
高三英语复习计划
2015/01/19 职场文书
2015年环境监察工作总结
2015/07/23 职场文书
酒吧七夕情人节宣传语
2015/11/24 职场文书
2016年母亲节广告语
2016/01/28 职场文书
《绝招》教学反思
2016/02/20 职场文书