jQuery中:not选择器用法实例


Posted in Javascript onDecember 30, 2014

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

此选择器能够移除元素集合中与给定选择器匹配的元素。

语法结构:

$(":not(selector)")

此选择器一般也要和其他选择器配合使用,比如类选择器和元素选择器等等。例如:
$("li:not(.second)").css("color","green")

以上代码是将li元素集合中,类名不为second的li中的字体颜色设置为绿色。
如果不和其他选择器配合使用,则默认状态是和*选择器配合使用,例如$(":not")等同于$("*:not")。

参数列表:

参数 描述
selector 用于筛选的选择器。

实例代码:

实例一:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8"/>

<meta name="author" content="https://3water.com/" />

<title>:not选择器-三水点靠木</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:not(.second)").css("color","green")

  })

})

</script>

</head>

<body>

<div>

  <ul>

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

    <li class="second">div+css专区</li>

    <li class="third">jQuery专区</li>

    <li class="fourth">Javascript专区</li>

  </ul>

</div>

<div>

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

  <span class="second">太阳出来了</span>

</div>

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

</body>

</html>

以上代码可以将li元素集合中,class属性值不为second的li元素中的字体颜色设置为绿色。

实例二:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8"/>

<meta name="author" content="https://3water.com/" />

<title>:not选择器-三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

    $(":not(.second)").css("color","green")

  })

})

</script>

</head>

<body>

<div>

  <ul>

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

    <li class="second">div+css专区</li>

    <li class="third">jQuery专区</li>

    <li class="fourth">Javascript专区</li>

  </ul>

</div>

<div>

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

  <span class="second">太阳出来了</span>

</div>

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

</body>

</html>

由于以上代码并没有指定与:not选择器相配合使用的选择器,所以就默认和*选择器配合使用,由于color属性具有继承性,所以所有元素的文本都会被设置为绿色了。

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

Javascript 相关文章推荐
个人总结的一些关于String、Function、Array的属性和用法
Jan 10 Javascript
javascript 写类方式之四
Jul 05 Javascript
jQuery EasyUI NumberBox(数字框)的用法
Jul 08 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
Nov 04 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
Dec 10 Javascript
JavaScript中连接操作Oracle数据库实例
Apr 02 Javascript
javascript数组常用方法汇总
Sep 10 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
Web制作验证码功能实例代码
Jun 19 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
Jul 21 Javascript
在vue中通过axios异步使用echarts的方法
Jan 13 Javascript
vue2和vue3的v-if与v-for优先级对比学习
Oct 10 Javascript
JavaScript中使用Object.create()创建对象介绍
Dec 30 #Javascript
JavaScript中对象property的读取和写入方法介绍
Dec 30 #Javascript
jQuery中:last选择器用法实例
Dec 30 #Javascript
JavaScript中对象property的删除方法介绍
Dec 30 #Javascript
JavaScript中检查对象property的存在性方法介绍
Dec 30 #Javascript
JavaScript中遍历对象的property的3种方法介绍
Dec 30 #Javascript
JavaScript语言对Unicode字符集的支持详解
Dec 30 #Javascript
You might like
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
浅谈php中curl、fsockopen的应用
2016/12/10 PHP
YII框架中搜索分页jQuery写法详解
2016/12/19 PHP
PHP中的自动加载操作实现方法详解
2019/08/06 PHP
php设计模式之单例模式用法经典示例分析
2019/09/20 PHP
js模仿html5 placeholder适应于不支持的浏览器
2013/01/13 Javascript
JS仿百度搜索自动提示框匹配查询功能
2013/11/21 Javascript
使用js如何实现全选与全不选
2013/12/30 Javascript
jquery操作checkbox示例分享
2014/07/21 Javascript
JavaScript实现列出数组中最长的连续数
2014/12/29 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
2016/07/24 Javascript
JavaScript实现url参数转成json形式
2016/09/25 Javascript
nodeJs链接Mysql做增删改查的简单操作
2017/02/04 NodeJs
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
koa上传excel文件并解析的实现方法
2018/08/09 Javascript
微信小程序实现上传图片裁剪图片过程解析
2019/08/22 Javascript
[00:18]天涯墨客三技能展示
2018/08/25 DOTA
Python中的默认参数实例分析
2018/01/29 Python
30秒轻松实现TensorFlow物体检测
2018/03/14 Python
python实现批量图片格式转换
2020/06/16 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
浅析python3中的os.path.dirname(__file__)的使用
2018/08/30 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
Python Django模板之模板过滤器与自定义模板过滤器示例
2019/10/18 Python
详解Django admin高级用法
2019/11/06 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
增大python字体的方法步骤
2020/07/05 Python
python软件测试Jmeter性能测试JDBC Request(结合数据库)的使用详解
2021/01/26 Python
CSS3 3D旋转rotate效果实例介绍
2016/05/03 HTML / CSS
Shell如何接收变量输入
2012/09/24 面试题
校长先进事迹材料
2014/02/01 职场文书
毕业生欢送会主持词
2014/03/31 职场文书
保护环境倡议书100字
2014/05/19 职场文书
简历自荐信范文
2015/03/09 职场文书
Win10服务主机占用内存怎么办?Win10服务主机进程占用大量内存解决方法
2022/09/23 数码科技