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>[attribute=value]选择器</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=third]").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属性值为third的li元素中的文本颜色设置为蓝色。

实例二:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>[attribute=value]选择器</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=thi]rd]").css("color","blue");

  })

})

</script>

</head>

<body>

<ul>

  <li id="first">html专区</li>

  <li id="second">Jquery专区</li>

</ul>

<ul>

  <li id="thi]rd">欢迎来到三水点靠木</li>

  <li>三水点靠木欢迎您</li>

</ul>

<button>点击查看效果</button>

</body>

</html>

从以上代码可以看出如何代码中含有"["或者"]"的时候,必须要带有引号,否则会造成匹配错误。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery的.live()和.die() 使用介绍
Sep 10 Javascript
JavaScript中的getTime()方法使用详解
Jun 10 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
Jul 27 Javascript
Vue 2.0学习笔记之Vue中的computed属性
Oct 16 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
Oct 23 Javascript
详解VUE2.X过滤器的使用方法
Jan 11 Javascript
如何通过setTimeout理解JS运行机制详解
Mar 23 Javascript
小程序实现锚点滑动效果
Sep 23 Javascript
小程序实现多个选项卡切换
Jun 19 Javascript
vuejs实现下拉框菜单选择
Oct 23 Javascript
vant 解决tab切换插件标题样式自定义的问题
Nov 13 Javascript
JavaScript实现网页留言板功能
Nov 23 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
jQuery中[attribute!=value]选择器用法实例
Dec 31 #Javascript
JavaScript中的Primitive对象封装介绍
Dec 31 #Javascript
You might like
php 页面执行时间计算代码
2008/12/04 PHP
20个PHP常用类库小结
2011/09/11 PHP
关于查看MSSQL 数据库 用户每个表 占用的空间大小
2013/06/21 PHP
php时区转换转换函数
2014/01/07 PHP
php实现的DateDiff和DateAdd时间函数代码分享
2014/08/16 PHP
php实现的CSS更新类实例
2014/09/22 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
拖动一个HTML元素
2006/12/22 Javascript
jQuery Ajax 全解析
2009/02/08 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
jQuery中nextUntil()方法用法实例
2015/01/07 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
2015/02/20 Javascript
js+canvas绘制矩形的方法
2016/01/28 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
Bootstrap CSS组件之按钮组(btn-group)
2016/12/17 Javascript
react-router中的属性详解
2017/06/01 Javascript
js排序与重组的实例讲解
2017/08/28 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
2017/12/18 Javascript
JS实现图片居中悬浮效果
2017/12/25 Javascript
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
微信小程序使用 vant Dialog组件的正确方式
2020/02/21 Javascript
JS实现网页端猜数字小游戏
2020/03/06 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
基于Django静态资源部署404的解决方法
2019/07/28 Python
python使用re模块爬取豆瓣Top250电影
2020/10/20 Python
用Python 执行cmd命令
2020/12/18 Python
HTML5和以前HTML4的区别整理
2013/10/20 HTML / CSS
经贸日语专业个人求职信
2013/12/13 职场文书
党员批评与自我批评总结
2014/10/15 职场文书
MySql 缓存查询原理与缓存监控和索引监控介绍
2021/07/02 MySQL
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS
Vue2.0搭建脚手架
2022/03/13 Vue.js