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 相关文章推荐
基于jquery循环map功能的代码
Feb 26 Javascript
JsRender for object语法简介
Oct 31 Javascript
node.js中的fs.rename方法使用说明
Dec 16 Javascript
javascript中clipboardData对象用法详解
May 13 Javascript
详细分析JavaScript函数定义
Jul 16 Javascript
JavaScript实现非常简单实用的下拉菜单效果
Aug 27 Javascript
Angular4如何自定义首屏的加载动画详解
Jul 26 Javascript
JS中定位 position 的使用实例代码
Aug 06 Javascript
JavaScript基础之流程控制语句的用法
Aug 31 Javascript
vue 强制组件重新渲染(重置)的两种方案
Oct 29 Javascript
基于javascript实现贪吃蛇小游戏
Nov 25 Javascript
npm全局环境变量配置详解
Dec 15 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数组去重实例及分析
2013/11/26 PHP
php计算几分钟前、几小时前、几天前的几个函数、类分享
2014/04/09 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
简单实现PHP留言板功能
2016/12/21 PHP
Laravel 不同生产环境服务器的判断实践
2019/10/15 PHP
jquery 双色表格实现代码
2009/12/08 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
2014/12/18 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
JavaScript判断是否为数组的3种方法及效率比较
2015/04/01 Javascript
js编写贪吃蛇的小游戏
2020/08/24 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
2016/01/04 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
2016/04/26 Javascript
jQuery实现可兼容IE6的遮罩功能详解
2017/09/19 jQuery
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
bootstrap可编辑下拉框jquery.editable-select
2017/10/12 jQuery
VUE长按事件需求详解
2017/10/18 Javascript
javascript高级模块化require.js的具体使用方法
2017/10/31 Javascript
jQuery.validate.js表单验证插件的使用代码详解
2018/10/22 jQuery
JS温故而知新之变量提升和时间死区
2019/01/27 Javascript
微信小程序获取用户信息并保存登录状态详解
2019/05/10 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
vue 解决computed修改data数据的问题
2019/11/06 Javascript
python 排序算法总结及实例详解
2016/09/28 Python
Python 逐行分割大txt文件的方法
2017/10/10 Python
Python之批量创建文件的实例讲解
2018/05/10 Python
Django Admin实现三级联动的示例代码(省市区)
2018/06/22 Python
python 画条形图(柱状图)实例
2020/04/24 Python
Python pip install如何修改默认下载路径
2020/04/29 Python
python安装读取grib库总结(推荐)
2020/06/24 Python
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
新员工试用期自我鉴定
2014/04/17 职场文书
社团活动总结报告
2014/06/27 职场文书
讲座开场白台词和结束语
2015/05/29 职场文书
安全生产会议制度
2015/08/06 职场文书
pytorch 中autograd.grad()函数的用法说明
2021/05/12 Python