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 相关文章推荐
仿百度输入框智能提示的js代码
Aug 22 Javascript
jQuery实现图片预加载效果
Nov 27 Javascript
json的使用小结
Jun 08 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
Aug 10 Javascript
浅析JS中对函数function的理解(基础篇)
Oct 14 Javascript
jQuery与JavaScript节点创建方法的对比
Nov 18 Javascript
JS访问DOM节点方法详解
Nov 29 Javascript
详解VUE的状态控制与延时加载刷新
Mar 27 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
Jul 18 Javascript
详解vue静态资源打包中的坑与解决方案
Feb 05 Javascript
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
解决微信授权成功后点击按返回键出现空白页和报错的问题
Jun 08 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初学者常见问题集合 修正版(21问答)
2010/03/23 PHP
zend framework中使用memcache的方法
2016/03/04 PHP
详解PHP处理字符串类似indexof的方法函数
2017/06/11 PHP
基于jquery+thickbox仿校内登录注册框
2010/06/07 Javascript
通过DOM脚本去设置样式信息
2010/09/19 Javascript
Jquery中getJSON在asp.net中的使用说明
2011/03/10 Javascript
jQuery输入城市查看地图使用介绍
2013/05/08 Javascript
jQuery EasyUI datagrid实现本地分页的方法
2015/02/13 Javascript
jQuery实现简易的天天爱消除小游戏
2015/10/16 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
2016/04/17 Javascript
JS产生随机数的用法小结
2016/12/10 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
angularjs实现搜索的关键字在正文中高亮出来
2017/06/13 Javascript
nodejs 搭建简易服务器的图文教程(推荐)
2017/07/18 NodeJs
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
2017/08/04 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
2018/04/12 jQuery
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
DatePickerDialog 自定义样式及使用全解
2019/07/09 Javascript
vue+AI智能机器人回复功能实现
2020/07/16 Javascript
Python最基本的输入输出详解
2015/04/25 Python
详解JavaScript编程中的window与window.screen对象
2015/10/26 Python
Python实现App自动签到领取积分功能
2018/09/29 Python
python实现键盘控制鼠标移动
2020/11/27 Python
Pytorch 定义MyDatasets实现多通道分别输入不同数据方式
2020/01/15 Python
使用卷积神经网络(CNN)做人脸识别的示例代码
2020/03/27 Python
python 读取二进制 显示图片案例
2020/04/24 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
幼师专业毕业生自荐信
2013/09/29 职场文书
上班睡觉检讨书
2014/01/09 职场文书
优秀求职信
2014/05/29 职场文书
志愿者爱心公益活动策划方案
2014/09/15 职场文书
行政助理岗位职责
2015/02/10 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
JS实现扫雷项目总结
2021/05/19 Javascript
SQL使用复合索引实现数据库查询的优化
2022/05/25 SQL Server