jQuery中:not选择器用法实例
更新时间：2014年12月30日 10:04:26 投稿：shichen2014
这篇文章主要介绍了jQuery中:not选择器用法,以实例形式分析了:not选择器的功能、定义及移除元素的用法,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了jQuery中not选择器用法。分享给大家供大家参考。具体分析如下：
此选择器能够移除元素集合中与给定选择器匹配的元素。
语法结构:
复制代码 代码如下:
$(":not(selector)")
此选择器一般也要和其他选择器配合使用，比如类选择器和元素选择器等等。例如:
复制代码 代码如下:
$("li:not(.second)").css("color","green")
以上代码是将li元素集合中，类名不为second的li中的字体颜色设置为绿色。
如果不和其他选择器配合使用，则默认状态是和*选择器配合使用，例如$(":not")等同于$("*:not")。
参数列表:
实例代码:
实例一:
复制代码 代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="https://www.jb51.net/" />
<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://www.jb51.net/" />
<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选择器相关内容感兴趣的读者可查看本站专题：《jquery选择器用法总结》
希望本文所述对大家的jQuery程序设计有所帮助。
相关文章
下面是个应用的小例子用来统一处理ajax请求中利用完全透明遮罩层组织用户和界面元素交换，当ajax出错时提示用户2010-08-08
这篇文章主要为大家详细介绍了jquery实现拖拽table表头改变列宽，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
接下来看一段代码，我会给大家详细介绍DWZ中table分页的使用方式，以下是在MVC中实现的方式。2013-03-03
jquery bankInput插件是银行卡进行格式化显示，能控制文本框输入最小最大个数、控制只能输入数字、控制不能粘贴不能使用输入法。同时插件能实现自动加载格式化显示和支持非输入框的格式话显示2012-08-08
jQuery使用有一段时间了，但是有一些API的实现实在想不通。小编参考相关资料源码，现在把我的学习过程和收获分享给大家2016-05-05
这篇文章主要为大家详细介绍了基于jquery实现弹幕效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
使用jquery获取网页中图片的高度其实很简单，目前有两种不错的方法可以实现，下面为大家详细介绍下，有所疑惑的你可以参考下2013-09-09
这篇文章主要介绍了jquery siblings获取同辈元素用法,结合实例形式分析了jQuery使用siblings遍历同级元素的相关技巧,需要的朋友可以参考下2016-07-07
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
下面小编就为大家带来一篇对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-04-04
JQuery DataTable删除行后的页面更新利用Ajax解决
使用Jquery的DataTable进行数据表处理非常方便，常遇到的一个问题就是删除一行后页面必须进行更新，下面与大家分享下使用Ajax的解决方法2013-05-05
最新评论