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 相关文章推荐
JavaScript 设计模式 安全沙箱模式
Sep 24 Javascript
javascript测试题练习代码
Oct 10 Javascript
JavaScript父子窗体间的调用方法
Mar 31 Javascript
Javascript获取统一管理的提示语(message)
Feb 03 Javascript
设置jQueryUI DatePicker默认语言为中文
Jun 04 Javascript
JS控制文本域只读或可写属性的方法
Jun 24 Javascript
Bootstrap字体图标无法正常显示的解决方法
Oct 08 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
Apr 01 Javascript
Javasript设计模式之链式调用详解
Apr 26 Javascript
Vue快速实现通用表单验证功能
Dec 05 Javascript
vue实现扫码功能
Jan 17 Javascript
Vue 请求传公共参数的操作
Jul 31 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缓存技术介绍
2006/11/25 PHP
PHP中执行cmd命令的方法
2014/10/11 PHP
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
php生成txt文件实例代码介绍
2016/04/28 PHP
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2013/01/27 Javascript
JavaScript等比例缩放图片控制超出范围的图片
2013/08/06 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
DeviceOne 让你一见钟情的App快速开发平台
2016/02/17 Javascript
js如何准确获取当前页面url网址信息
2020/09/13 Javascript
Bootstrap每天必学之弹出框(Popover)插件
2016/04/25 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
2016/05/05 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
2016/05/05 Javascript
JS使用eval()动态创建变量的方法
2016/06/03 Javascript
AngularJS执行流程详解
2017/02/17 Javascript
vue v-model表单控件绑定详解
2017/05/17 Javascript
初探js和简单隐藏效果的实例
2017/11/23 Javascript
Vue组件通信的四种方式汇总
2018/02/08 Javascript
详解基于Vue/React项目的移动端适配方案
2019/08/23 Javascript
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
Vuex中的Mutations的具体使用方法
2020/06/01 Javascript
Python字符串中查找子串小技巧
2015/04/10 Python
批量获取及验证HTTP代理的Python脚本
2017/04/23 Python
Python编程实现线性回归和批量梯度下降法代码实例
2018/01/04 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
关于numpy.where()函数 返回值的解释
2019/12/06 Python
如何基于Python爬虫爬取美团酒店信息
2020/11/03 Python
抄作业检讨书
2014/02/17 职场文书
《蚂蚁和蝈蝈》教学反思
2014/02/24 职场文书
三关爱志愿服务活动方案
2014/08/17 职场文书
群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
刑事辩护词范文
2015/05/21 职场文书
观看建国大业观后感
2015/06/01 职场文书
贷款收入证明范本
2015/06/12 职场文书
爱国主义电影观后感
2015/06/18 职场文书
Golang 实现 WebSockets 之创建 WebSockets
2022/04/24 Golang
分享几个实用的CSS代码块
2022/06/10 HTML / CSS