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参数值中含有单引号或双引号问题的解决方法
Nov 06 Javascript
AngularJS基础学习笔记之指令
May 10 Javascript
详解AngularJS中的表单验证(推荐)
Nov 17 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
Dec 17 Javascript
js实现移动端微信页面禁止字体放大
Feb 16 Javascript
js轮播图的插件化封装详解
Jul 17 Javascript
JS验证码实现代码
Sep 14 Javascript
使用watch监听路由变化和watch监听对象的实例
Feb 24 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
原生JS实现微信通讯录
Jun 18 Javascript
原生js实现滑块区间组件
Jan 20 Javascript
JS实现简单的九宫格抽奖
Jun 28 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 curl 伪造IP来源的实例代码
2012/11/01 PHP
Codeigniter中mkdir创建目录遇到权限问题和解决方法
2014/07/25 PHP
CMS中PHP判断系统是否已经安装的方法示例
2014/07/26 PHP
PHP实现按之字形顺序打印二叉树的方法
2018/01/16 PHP
PHP实现一个轻量级容器的方法
2019/01/28 PHP
PHP并发场景的三种解决方案代码实例
2021/02/27 PHP
可输入的下拉框
2006/06/19 Javascript
jQuery产品间断向下滚动效果核心代码
2014/05/08 Javascript
node.js中的fs.lchmodSync方法使用说明
2014/12/16 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
2015/08/04 Javascript
js鼠标点击图片切换效果代码分享
2015/08/26 Javascript
javascript设置和获取cookie的方法实例详解
2016/01/05 Javascript
详解nodejs与javascript中的aes加密
2016/05/22 NodeJs
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
jQuery中的AjaxSubmit使用讲解
2016/09/25 Javascript
原生JS实现的放大镜效果实例代码
2016/10/15 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
js实现常见的工具条效果
2017/03/02 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
微信小程序 textarea 层级过高问题简单解决方案
2019/10/14 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
2020/03/05 Javascript
js实现文字头像的生成代码
2020/03/07 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
[02:55]含熏伴清风,风行者至宝、屠夫身心及典藏宝瓶二展示
2020/09/08 DOTA
Python同时向控制台和文件输出日志logging的方法
2015/05/26 Python
Python对象转JSON字符串的方法
2016/04/27 Python
详解python3百度指数抓取实例
2016/12/12 Python
python实现一个函数版的名片管理系统过程解析
2019/08/27 Python
Python3和pyqt5实现控件数据动态显示方式
2019/12/13 Python
New Balance澳大利亚官网:运动鞋和健身服装
2019/02/23 全球购物
计算机专业应届毕业生自荐信
2013/09/26 职场文书
2014年社区卫生工作总结
2014/12/18 职场文书
保留意见审计报告
2015/06/05 职场文书
你喜欢篮球吗?Python实现篮球游戏
2021/06/11 Python