jquey的not 选择器

2024-03-11 13:38
文章标签 选择器 jquey

本文主要是介绍jquey的not 选择器,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在jquery中,not被用来选择所有与选择器不匹配的元素。

例如:

1 $(‘p:not(.class-p1)’) —选择所有不含类名为class1-p1 的p标签。

2 $(‘li:not(:only-child)’)—选择不是其父标签的唯一子标签的所有li标签

3 $(‘li:not(:first-child)’)—选择不是其父标签的第一个子标签的所有li标签

 

具体事例:

一个简单的实例展示了jquery的not选择器,点击按钮会有相应的反馈。


<html><head><title>jquery not example</title><script type="text/javascript" src="../jquery-1.11.1.min.js"></script></head><body><h1>jquery not example</h1><u1 class="class-u1"><li>class-u1-#1</li><li>class-u1-#2</li><li>class-u1-#3</li><li>class-u1-#4</li><li>class-u1-#5</li></u1> <u1 id="id1"><li>id1-#1</l1></u1><p class="class-p1">class-#p1</p><p class="class-p2">class-#p2</p><button>p:not(.class-p1)</button><button>li:not(:only-child)</button><button>li:not(:first-child)</button><script type="text/javascript">$("button").click(function(){var str=$(this).text();$("li,p").css("background","white");$(str).css("background","coral");});</script></body>
</html>

效果1:


点击按钮1:


点击按钮2:


点击按钮3:




这篇关于jquey的not 选择器的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/797956

相关文章

css选择器和xpath选择器在线转换器

具体前往:Css Selector(选择器)转Xpath在线工具

ExtMvc store不能通过xtype选择器得到的办法

store 不能通过xtype选择器得到,  init : function() {         this.control({                 'smsmenu gridpanel[name='company'] : {                                         render:function(grid,opts){

SFC CSS 功能:深层选择/插槽选择器/动态绑定

深层选择器​ 如果您希望样式中的选择器scoped“深入”,即影响子组件,则可以使用:deep()伪类: <style scoped>.a :deep(.b) {/* ... */}</style> 以上内容将被编译为: .a[data-v-f3f3eg9] .b {/* ... */} 提示 创建的 DOM 内容v-html不受范围样式的影响,但您仍然可以使用深

前端面试:浏览器是怎样解析CSS选择器的?

浏览器解析CSS选择器的过程是一个复杂而高效的过程,涉及多个步骤。以下是浏览器解析CSS选择器的基本流程: 构建DOM树: 浏览器首先解析HTML文档,构建DOM(文档对象模型)树。DOM树是HTML元素的层次结构表示。 构建CSS规则树: 浏览器解析CSS样式表,构建CSS规则树。每个CSS规则包含选择器和相应的样式声明。 选择器匹配: 浏览器遍历DOM树中的每个节点,并将其与CSS

div+css 选择器分组 属性选择器 css插入方法 css背景属性

1、CSS 概述: CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一 2、选择器的分组 你可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。用

css 类选择器 id选择器 html选择器 通配符选择器 父子选择器

1、css使用的基本语法: 选择器 { 属性1:属性值; 属性2:属性值; 属性3:属性值;          .          .          . } 2、Css使用的必要性: (1)、统一网页不同个体的风格 (2)、可以使用滤镜 3、Css中常用的4种选择器: (1)、类选择器,又叫class选择器:          类选择器格式: . 类选择器{

vue 日期选择器 (DateTimePicker 日期时间选择器)

单选          <el-date-pickerv-model="value1"type="date"placeholder="选择日期"value-format="yyyy.MM.dd"@input="changeTime"></el-date-picker> // 日期选择changeTime(e) {console.log(e.replace(/\./g, "-"));},

jQuery 兄弟元素选择器

本篇文章介绍jQuery的兄弟元素选择器 什么是兄弟元素? <ul id="list"><li class="li-1">web-7258</li><li class="li-2">web前端</li><li class="li-3">helang.love@qq.com</li><li class="li-4">web梦之蓝</li><li class="li-5">jQuery之美</li

jQuery 子元素选择器 find() 和 children()

在前面的文章中多次提到了 子元素 和 直接子元素,本篇文章来说明这两者的区别。 <div id="list"><div name="a"><div name="c">web前端</div><div name="d">梦之蓝</div></div><div name="b">web-7258</div></div> 上面的HTML代码中,通过name值给div命名 console.log($

Css:css的属性选择器vs关系选择器及css中伪元素

css的属性选择器: 注:属性值只能由数字,字母,下划线,中划线组成,并且不能以数字开头。 1、[属性] 选择含有指定属性的元素,用[]中括号表示。 <style>[title]{color:red;}p[title]{color:blue;}</style><p title="titleValue">属性选择器p标签含有title属性测试</p><p title="Titlev