首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在jQuery中选择既不是div的父级也不是其同级的div

在jQuery中,可以使用选择器来选择既不是div的父级也不是其同级的div元素。以下是一种方法:

代码语言:txt
复制
$("div:not(:parent):not(:has(div))")

这个选择器使用了三个伪类选择器来过滤元素:

  • :not(:parent):选择不是其他元素的父级的div元素。
  • :not(:has(div)):选择不包含其他div元素的div元素。

这样,我们就可以选择到既不是div的父级也不是其同级的div元素。

关于jQuery的更多信息和用法,可以参考腾讯云的jQuery产品介绍页面:jQuery产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

继续死磕前端

1.1 jquery 选择器 还记到大明湖畔(CSS)夏雨荷(选择器)吗?选择器可以快速定位到元素并为应用样式效果。jquery 选择选择规则与 CSS 相同,只是目的是为添加操作。...id是box元素元素 $('#box').parent(); //选择id是box元素所有子元素 $('#box').children(); //选择id是box元素同级元素 $(...,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象对象传播,从里到外,直至它被处理(对象所有同类事件都将被激活),或者它到达了对象层次最顶层...答:事件冒泡允许多个操作被集中处理(把事件处理器添加到一个元素上,避免把事件处理器添加到多个子元素上),它还可以让你在对象层同级别捕获事件。...,把事件加到上,通过判断事件来源子集,执行相应操作,事件委托首先可以极大减少事件绑定次数,提高性能;其次可以让新加入子元素可以拥有相同操作。

2.8K10

浅谈JavaScript

id是box元素上一个同级元素 $('#box').prevAll(); //表示选择id是box元素上面所有同级元素 $('#box').next(); //表示选择id是box元素下一个同级元素...$('#box').nextAll(); //表示选择id是box元素下面所有同级元素 $('#box').parent(); //表示选择id是box元素元素 $('#box').children...()鼠标进入(进入子元素触发) mouseout()鼠标离开 ready()DOM加载完成 示例代码请私信作者哦 事件代理 1、事件代理介绍 事件代理就是利用事件冒泡原理(事件冒泡就是事件会向它传递...),把事件加到上,通过判断事件来源,执行相应子元素操作,事件代理首先可以极大减少事件绑定次数,提高性能;其次可以让新加入子元素可以拥有相同操作。...$div = $("div"); $btn.click(function(){ alert('我是按钮'); //扩展:取消事件冒泡,就是不让事件向控件传递

3.2K30

JQuery

jquery选择jquery选择器可以快速地选择元素,选择规则和css样式相同,使用length属性判断是否选择成功。...(); //选择id是box元素元素 $('#box').children(); //选择id是box元素所有子元素 $('#box').siblings(); //选择id是box元素同级元素...,避免把事件处理器添加到多个子元素上),它还可以让你在对象层同级别捕获事件。.../根标签 追加节点:同级追加和自己追加(前面 后面) 步骤: 声明变量保存节点数据 使用追加函数追加节点 子追加: append()和appendTo():在现存元素内部,从后面放入元素 prepend...()和prependTo():在现存元素内部,从前面放入元素 追加: after()和insertAfter():在现存元素外部,从后面放入元素 before()和insertBefore():

94621

JQuery

xx,执行了命令 find选中子集执行了命令 下面的选择器很重要 .parent()选择元素元素 可以先用一个this,然后找到这个元素。....siblings()选择元素同级别元素 -----排他思想:只许州官放火不许百姓点灯 先将自己控制一遍,然后调用siblings再把除了自己其他同级元素控制一遍 这个 this jq中使用this...) mouseout()鼠标离开(离开子元素触发) mouseenter()鼠标进入(进入子元素不触发) mouseleave()鼠标离开(离开子元素不触发) 上面的这些鼠标移入和离开,触发和不触发指的是不再次触发...验证两组不一样时候,鼠标先进入,再进入子,然后没有再次触发,验证成功。如果是直接进入子的话,因为子是一体,会触发。 <!...那么让登录。

7.7K20

前端之jquery函数库

id是box元素元素 $('#box').children(); //选择id是box元素所有子元素 $('#box').siblings(); //选择id是box元素同级元素 $('#...box').find('.myClass'); //选择id是box元素内class等于myClass元素 判断是否选择到了元素    jquery有容错机制,即使没有找到元素,不会出错,可以用...,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象对象传播,从里到外,直至它被处理(对象所有同类事件都将被激活),或者它到达了对象层次最顶层...事件冒泡作用  事件冒泡允许多个操作被集中处理(把事件处理器添加到一个元素上,避免把事件处理器添加到多个子元素上),它还可以让你在对象层同级别捕获事件。...,把事件加到上,通过判断事件来源子集,执行相应操作,事件委托首先可以极大减少事件绑定次数,提高性能;其次可以让新加入子元素可以拥有相同操作。

5.2K20

JQuery高级

jQuery定义变量时候,一般命名用$开头。同事一看就知道是使用了jQuery,然后使用jQuery语法。 其实$是jQuery一个函数。...***事件冒泡 现象:父子标签 触发子事件,这个事件会逐层向传递。 子集执行了某一事件,会逐层向上触发相同事件,直到被处理或者遇到return。...比如子有单击事件,那么如果有单击事件会被触发,如果有单击事件会被触发。 任何一个操作,计算机或者浏览器都会去处理。不管你有没有设置对应事件。...class="father"> 1 3.事件委托 把子事件委托给:最近能包含住将来发生事件所有子...(目的地) prepend()向前面加 prependTo(目的地) 加: after()在同级后面加 insertAfter(目的地)在同级后面加 before()在同级别的前面加 insertBefore

1.5K50

何在已有的 Web 应用中使用 ReactJS

当我们学习一项新技术,可能是一个 JavaScript 框架,可能是一个 CSS 方法,我们将面对这样挑战 如何在旧网站上运用这项新技术?。很多教程讲述了如何从头开始,但却很难运用到实际工作。...下面的代码是一个典型 jQuery 应用,我们选择元素 .mood-container ,然后动态改变内容。 以下是例子 HTML: <!...这并不是使用 jQuery 更改 DOM 唯一策略,但很常见。...用 ReactJS 实现独立状态 使用 React 好处之一就是可以将上面的 JavaScript 和 HTML 封装成一个组件 component 。...因为我们希望组件之间通信,所以我们将它们放置在组件,然后向下传递属性来更新每个子组件。这是 ReactJS 最基本工作方式。 这种方式适用于多个 UI 组件被一个组件包裹情况。

14.5K00

【CSS】323- 深度解析 CSS “浮动”

我觉得很多人连float是啥意识都不知道,要知道很多特性原理是和命名单词或者字母有密切关联不是随便命名。从名字可以看到一些当初设计初衷。...第二个方向:解决元素内部浮动元素对同级元素影响,我比喻成解决内部矛盾。...同时,元素同级元素会正常排列在伪元素形成元素后面,而不受浮动影响。 ---- 下面是干掉clear属性后截图: ?...同时给这个块子容器设置 clear 属性来清除浮动,这样这个子容器就能排列在浮动元素后面,同时元素高度撑起来了。那么元素同级元素能正常排列了。...元素使用 bfc 清除浮动,外部矛盾解决,内部矛盾还存在 ? 通过给元素浮动元素后面的第一个同级元素设置 clear 清除浮动,内部矛盾解决,外部矛盾解决。 ?

96420

jQuery对象查找

jQuery,我们可以使用各种方法来查找和选择特定元素或元素集合。这些查找方法使我们能够根据不同选择器、属性、关系等条件来定位和操作元素。...常用jQuery对象查找方法:find()方法在当前元素集合查找匹配指定选择后代元素,并返回新元素集合。...parent()方法选择当前元素集合每个元素元素,并返回新元素集合。下面是parent()方法使用示例:$("li").parent();上述示例将选择所有元素直接元素。...siblings()方法选择当前元素集合每个元素所有同级元素,并返回新元素集合。...例如,使用parent()方法选择$listItems元素,并通过is()方法判断是否为元素;使用parents()方法选择$listItems.container祖先元素;使用siblings

70210

JQuery_

提交表单 表单验证 规则: var re = new RegExp(‘规则’,’可选参数’) var re =/规则/参数; 事件冒泡 作用: 事件冒泡允许多个被集中处理(把事件处理器添加到一个元素上...,避免把事件处理器添加到多个子元素上),它还可以让你在对象层同级别捕获事件。.../根标签 追加节点:同级追加和自己追加(前面 后面) 步骤: 声明变量保存节点数据 使用追加函数追加节点 子追加: append()和appendTo():在现存元素内部,从后面放入元素 prepend...()和prependTo():在现存元素内部,从前面放入元素 追加: after()和insertAfter():在现存元素外部,从后面放入元素 before()和insertBefore():...在现存元素外部,从前面放入元素 删除节点:remove()或empty() $(function(){ // 追加节点:同级追加 和 子追加 (前面 后面)

70110

JQuery干货篇之操控DOM

对象,可以是html标签,:return " else if (this.id = 'row2') return newElems...after 在匹配元素集合每个元素后面插入参数所指定内容,作为兄弟节点。...").unwrap(":first"); //这里使用参数来筛选要删除元素的当前元素,这里选择第一个元素 wrapAll 在集合中所有匹配元素外面包裹一个HTML结构,也就是为结果集中所有元素都设置了一个相同元素来包裹所有的元素...>").css("border", 'thick double red'); $("div.drow").wrapAll(div); //这里div成为了他共有的元素,原来元素变成了祖先元素了...$("img").wrapAll(div); //这里img没有共同元素,那么就会强制将所有的元素拉在一起为他们设置一个元素 wrapInner 在匹配元素里内容外包一层结构,也就是为匹配元素后代元素添加一个元素

95510

从编程小白到全栈开发:操控浏览器

从上图右半部分开发者工具栏,我们可以清晰看到这种摆放形态所对应HTML代码:名为container-1标签是在标签下一,3个名为container-2又是在...container-1下一,同时这3个container-2互为同级关系。...直到像Prototype,jQuery,Mootools之类前端JS工具库兴起,它们都自带了一套比较完整用于执行选择API,由于它们太好用了,倒逼了浏览器标准,使得类似的选择器API出现在了现代浏览器...另外,选择语法不止上面提及这3种,还有一些级联、伪类等,这些都留给你们自己去进一步学习了解了。 下面我们来几个例子,看一下怎么选择器API实际运用。...添加边框 我们可以看到,选择器精确获取到了三个class名为container-2DOM节点,并为设置了边框样式。

66030

【UI自动化-2】UI自动化元素定位专题

litter brother 以上面代码为例: 1、通过节点查找子节点 By.xpath("//div...[@id='parent']/div[2]") 2、通过子节点查找节点 By.xpath("//div[@id='B']/..") 3、通过兄弟节点定位 By.xpath("//div[@id='...:F[n]:获取和E元素同级且位于其后第n个F元素 preceding-sibling::F:获取和E元素同级且位于F元素 preceding-sibling::F[n]:获取和E元素同级且位于第...伪类选择器 这种选择器,要求目标元素必须有元素,且符合位置匹配条件,具体如下: E:nth-child(n)和E:nth-last-child(n):两者区别是前者正序计数,后者倒序计数。...其次,这两个选择器定位元素要求必须在某个标签内,且其父标签内对应索引n元素类型必须为E,否则匹配失败。

1.7K30

jquery 事件冒泡、阻止事件冒泡 - event.stopPropagation()

,从里到外,直至它被处理(对象所有同类事件都将被激活),或者它到达了对象层次最顶层,即document对象(有些浏览器是window)。...事件冒泡作用 事件冒泡允许多个操作被集中处理(把事件处理器添加到一个元素上,避免把事件处理器添加到多个子元素上),它还可以让你在对象层同级别捕获事件。...但是也有一个疑问,那就是会不会是因为黄色div位置,在这三个div重叠问题,会不会点击了黄色div包含点击下面两个div呢? 可以编写一个偏移问题后div来看看,如下: ?...好了,现在黄色div已经跟两个元素位置不重叠了。再次点击看看,如下: ? ? ? 事件冒泡示例结论 可以看出点击黄色div,依然会依次弹出三个alert()。...说明这个click()事件传递并不是根据点击位置,而是根据html元素嵌套。

5.6K41
领券