jQuery中[attribute!=value]选择器用法实例


Posted in Javascript onDecember 31, 2014

本文实例讲述了jQuery中[attribute!=value]选择器用法。分享给大家供大家参考。具体分析如下:

此选择器匹配所有不含有指定的属性,或者属性不等于特定值的元素。
此选择器等价于:not[([attr=value])。
要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=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!='second']").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属性值不等于second或者不具有id属性值的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!=sec[ond]").css("color","blue"); 

  }); 

}); 

</script>

</head>

<body>

<ul>

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

  <li id="sec[ond">Jquery专区</li>

</ul>

<ul>

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

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

</ul>

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

</body>

</html>

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

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

Javascript 相关文章推荐
游戏人文件夹程序 ver 3.0
Jul 14 Javascript
List Installed Software Features
Jun 11 Javascript
JavaScript 设计模式之组合模式解析
Apr 09 Javascript
理解Javascript_02_理解undefined和null
Oct 11 Javascript
复选框全选与全不选操作实现思路
Aug 18 Javascript
js验证电话号码与手机支持+86的正则表达式
Jan 23 Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 Javascript
JavaScript Length 属性的总结
Nov 02 Javascript
javascript从定义到执行 你不知道的那些事
Jan 04 Javascript
jQuery实现的自适应焦点图效果完整实例
Aug 24 Javascript
微信小程序画布圆形进度条显示效果
Nov 17 Javascript
还不懂递归?读完这篇文章保证你会懂
Jul 29 Javascript
JavaScript中的Primitive对象封装介绍
Dec 31 #Javascript
JavaScript中的值类型转换介绍
Dec 31 #Javascript
javascript实现滑动解锁功能
Dec 31 #Javascript
JavaScript中number转换成string介绍
Dec 31 #Javascript
JavaScript中string转换成number介绍
Dec 31 #Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
Dec 31 #Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 #Javascript
You might like
php中使用cookie来保存用户登录信息的实现代码
2012/03/08 PHP
PHP+MySQL实现无极限分类栏目的方法
2015/12/23 PHP
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
2013/01/24 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
2015/01/28 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
2015/04/14 Javascript
jquery滚动特效集锦
2015/06/03 Javascript
Jquery实现顶部弹出框特效
2015/08/08 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
基于JavaScript实现的希尔排序算法分析
2017/04/14 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
2017/06/13 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
2017/08/04 Javascript
微信小程序使用navigateTo数据传递的实例
2017/09/26 Javascript
React 组件转 Vue 组件的命令写法
2018/02/28 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
js字符串处理之绝妙的代码
2019/04/05 Javascript
简单实现节流函数和防抖函数过程解析
2019/10/08 Javascript
jquery ajax 请求小技巧实例分析
2019/11/11 jQuery
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
[29:16]完美世界DOTA2联赛决赛日 Inki vs LBZS 第三场 11.08
2020/11/10 DOTA
python使用在线API查询IP对应的地理位置信息实例
2014/06/01 Python
编写Python脚本把sqlAlchemy对象转换成dict的教程
2015/05/29 Python
python实现识别相似图片小结
2016/02/22 Python
Python实现 多进程导入CSV数据到 MySQL
2017/02/26 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
解决flask接口返回的内容中文乱码的问题
2020/04/03 Python
pandas数据选取:df[] df.loc[] df.iloc[] df.ix[] df.at[] df.iat[]
2020/04/24 Python
Python常用base64 md5 aes des crc32加密解密方法汇总
2020/11/06 Python
草莓网美国官网:Strawberrynet USA
2016/12/11 全球购物
初中同学聚会邀请函
2014/02/03 职场文书
社区春季防火方案
2014/06/02 职场文书
情况说明书格式及范文
2019/06/24 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书
Python中Selenium对Cookie的操作方法
2021/07/09 Python
Windows 11要来了?微软文档揭示Win11太阳谷 / Win10有两个不同版本
2021/11/21 数码科技