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插件 autoComboBox 下拉框
Dec 22 Javascript
Jquery 的outerHeight方法使用介绍
Sep 11 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 Javascript
JS实现消息来时让网页标题闪动效果的方法
Apr 20 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
Aug 10 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
Oct 18 Javascript
vue-router 中router-view不能渲染的解决方法
May 23 Javascript
AngularJS中ng-class用法实例分析
Jul 06 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
Jul 19 Javascript
Angular4学习笔记之根模块与Ng模块
Sep 09 Javascript
浅谈super-vuex使用体验
Jun 25 Javascript
在Vue中获取组件声明时的name属性方法
Sep 12 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 正则表达式小结
2009/08/31 PHP
关于查看MSSQL 数据库 用户每个表 占用的空间大小
2013/06/21 PHP
字符串长度函数strlen和mb_strlen的区别示例介绍
2014/09/09 PHP
PHP中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
DEDECMS首页调用图片集里的多张图片
2015/06/05 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
tp5(thinkPHP5框架)时间查询操作实例分析
2019/05/29 PHP
使用GruntJS链接与压缩多个JavaScript文件过程详解
2013/08/02 Javascript
禁止页面刷新让F5快捷键及右键都无效
2014/01/22 Javascript
浅谈JavaScript Array对象
2014/12/29 Javascript
jQuery中:animated选择器用法实例
2014/12/29 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
2016/06/21 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
2016/09/19 Javascript
bootstrap datetimepicker日期插件使用方法
2017/01/13 Javascript
详解在Angular项目中添加插件ng-bootstrap
2017/07/04 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
2018/08/22 Javascript
vue使用高德地图根据坐标定位点的实现代码
2019/08/22 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
2020/02/09 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
对python实现二维函数高次拟合的示例详解
2018/12/29 Python
Pytorch的mean和std调查实例
2020/01/02 Python
Python连接HDFS实现文件上传下载及Pandas转换文本文件到CSV操作
2020/06/06 Python
css3学习心得分享
2013/08/19 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
2018/04/23 HTML / CSS
amazeui时间组件的实现示例
2020/08/18 HTML / CSS
家用个人磨皮机:Trophy Skin
2017/03/30 全球购物
Ajax和javascript的区别
2013/07/20 面试题
写好自荐信需做到的5要点
2014/03/07 职场文书
学习雷锋精神心得体会范文
2014/03/12 职场文书
大学同学会活动方案
2014/08/20 职场文书
2016党员干部政治学习心得体会
2016/01/23 职场文书
个人业务学习心得体会
2016/01/25 职场文书
小学生作文之《压岁钱的烦恼》
2019/09/27 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书