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 相关文章推荐
动态修改DOM 里面的 id 属性的弊端分析
Sep 03 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
Apr 28 Javascript
javascript中数组array及string的方法总结
Nov 28 Javascript
Javascript中浏览器窗口的基本操作总结
Aug 18 Javascript
JQuery学习总结【一】
Dec 01 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
Jul 02 Javascript
微信小程序实现页面跳转传值的方法
Oct 12 Javascript
微信小程序网络封装(简单高效)
Aug 06 Javascript
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
node.js事件轮询机制原理知识点
Dec 22 Javascript
Vue中this.$nextTick的作用及用法
Feb 04 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
May 13 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调用三种数据库的方法(1)
2006/10/09 PHP
ubuntu 编译安装php 5.3.3+memcache的方法
2010/08/05 PHP
调整优化您的LAMP应用程序的5种简单方法
2011/06/26 PHP
PHP中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
Drupal读取Excel并导入数据库实例
2014/03/02 PHP
php+xml编程之xpath的应用实例
2015/01/24 PHP
在jquery boxy中添加百度地图坐标拾取注意流程
2014/04/03 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
jQuery中closest和parents的区别分析
2015/05/07 Javascript
举例讲解Node.js中的Writable对象
2015/07/29 Javascript
JS特效实现图片自动播放并可控的效果
2015/07/31 Javascript
JavaScript取得键盘按下方向键是哪个的方法
2015/08/04 Javascript
详解Vue组件实现tips的总结
2017/11/01 Javascript
vue刷新和tab切换实例
2018/02/11 Javascript
基于iScroll实现内容滚动效果
2018/03/21 Javascript
Node.Js中实现端口重用原理详解
2018/05/03 Javascript
js 实现在2d平面上画8的方法
2018/10/10 Javascript
vue+elementUi图片上传组件使用详解
2019/08/20 Javascript
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
实例探究Python以并发方式编写高性能端口扫描器的方法
2016/06/14 Python
Python实现的中国剩余定理算法示例
2017/08/05 Python
Python日期时间Time模块实例详解
2019/04/15 Python
python中while和for的区别总结
2019/06/28 Python
Pyside2中嵌入Matplotlib的绘图的实现
2021/02/22 Python
HTML5注册页面示例代码
2014/03/27 HTML / CSS
公务员培训自我鉴定
2013/09/19 职场文书
自我鉴定 电子商务专业
2014/01/30 职场文书
优秀医生事迹材料
2014/02/12 职场文书
小学班主任培训方案
2014/06/04 职场文书
机械机修工岗位职责
2014/08/03 职场文书
2014年医院个人工作总结
2014/12/09 职场文书
2015年毕业实习工作总结
2015/05/29 职场文书
观看安全警示教育片心得体会
2016/01/15 职场文书
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS
Oracle 死锁的检测查询及处理
2021/09/25 Oracle