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+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 Javascript
jQuery中校验时间格式的正则表达式小结
Sep 22 Javascript
JavaScript简单实现网页回到顶部功能
Nov 12 Javascript
jquery form 隐藏的input 选择
Apr 29 Javascript
用json方式实现在 js 中建立一个map
May 02 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
Sep 29 Javascript
微信小程序 form组件详解及简单实例
Jan 10 Javascript
React学习笔记之列表渲染示例详解
Aug 22 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
Sep 14 Javascript
Vue集成Iframe页面的方法示例
Dec 12 Javascript
超轻量级的js时间库miment使用解析
Aug 02 Javascript
关于JavaScript轮播图的实现
Nov 20 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中的错误处理、异常处理机制分析
2012/05/07 PHP
PHP下打开phpMyAdmin出现403错误的问题解决方法
2013/05/23 PHP
PHP rawurlencode与urlencode函数的深入分析
2013/06/08 PHP
php记录代码执行时间(实现代码)
2013/07/05 PHP
ThinkPHP3.2.2的插件控制器功能简述
2014/07/09 PHP
php计算指定目录下文件占用空间的方法
2015/03/13 PHP
php简单日历函数
2015/10/28 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
js DOM模型操作
2009/12/28 Javascript
jQuery+jqmodal弹出窗口实现代码分明
2010/06/14 Javascript
javascript Event对象详解及使用示例
2013/11/22 Javascript
通过JS来判断页面控件是否获取焦点
2014/01/03 Javascript
详谈javascript中的cookie
2015/06/03 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
微信小程序 引入es6 promise
2017/04/12 Javascript
Vue列表页渲染优化详解
2017/07/24 Javascript
vue中七牛插件使用的实例代码
2017/07/28 Javascript
bootstrap table表格插件之服务器端分页实例代码
2018/09/12 Javascript
Vue 中如何正确引入第三方模块的方法步骤
2019/05/05 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
在antd Form表单中select设置初始值操作
2020/11/02 Javascript
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
python实现RSA加密(解密)算法
2016/02/17 Python
Python set常用操作函数集锦
2017/11/15 Python
Python编程使用*解包和itertools.product()求笛卡尔积的方法
2017/12/18 Python
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
Python3.5局部变量与全局变量作用域实例分析
2019/04/30 Python
pandas将多个dataframe以多个sheet的形式保存到一个excel文件中
2019/10/10 Python
关于python中的xpath解析定位
2020/03/06 Python
python 还原梯度下降算法实现一维线性回归
2020/10/22 Python
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
计算机大学生的自我评价
2013/10/15 职场文书
优秀小学生家长评语
2014/01/30 职场文书
会计入职心得体会
2016/01/22 职场文书
当你找不到方向的时候,不妨读读刘备的一生
2019/08/05 职场文书
基于Redis的List实现特价商品列表功能
2021/08/30 Redis