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 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤
Apr 23 Javascript
一个关于jqGrid使用的小例子(行按钮)
Nov 04 Javascript
JS比较两个时间大小的简单示例代码
Dec 20 Javascript
JS实现根据出生年月计算年龄
Jan 10 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
Dec 03 Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 Javascript
vue 使用ref 让父组件调用子组件的方法
Feb 08 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
Oct 07 Javascript
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
浅谈一种让小程序支持JSX语法的新思路
Jun 16 Javascript
微信小程序实现批量倒计时功能
Nov 01 Javascript
vue打包npm run build时候界面报错的解决
Aug 13 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,ajax实现分页
2008/03/27 PHP
PHP syntax error, unexpected $end 错误的一种原因及解决
2008/10/25 PHP
基于PHP实现短信验证码接口(容联运通讯)
2016/09/06 PHP
PHP 表单提交及处理表单数据详解及实例
2016/12/27 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
javascript Keycode对照表
2009/10/24 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
2012/02/16 Javascript
js二级地域选择的实现方法
2013/06/17 Javascript
js计算任意值之间随机数的方法
2015/01/16 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
使用JavaScript+canvas实现图片裁剪
2015/01/30 Javascript
使用Javascript监控前端相关数据的代码
2016/10/27 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
webpack独立打包和缓存处理详解
2017/04/03 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
JavaScript引用类型Function实例详解
2018/08/09 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
2018/09/13 Javascript
关于layui flow loading占位图的实现方法
2019/09/21 Javascript
Vue SPA 首屏优化方案
2021/02/26 Vue.js
[58:59]完美世界DOTA2联赛PWL S3 access vs CPG 第一场 12.13
2020/12/16 DOTA
PYTHON压平嵌套列表的简单实现
2016/06/08 Python
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
python opencv之SURF算法示例
2018/02/24 Python
PyTorch的深度学习入门之PyTorch安装和配置
2019/06/27 Python
win10下python2和python3共存问题解决方法
2019/12/23 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
python代码xml转txt实例
2020/03/10 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
python中for in的用法详解
2020/04/17 Python
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
使用html5 canvas 画时钟代码实例分享
2015/11/11 HTML / CSS
文明和谐家庭事迹材料
2014/05/18 职场文书
消防安全宣传标语
2014/06/07 职场文书
2014年“世界无车日”活动方案
2014/09/21 职场文书
写给老师的保证书
2015/05/09 职场文书