jquery选择指定元素之外的所有元素
最近的项目中有这么一个需求,点击一排图片中的任意一张后底部弹出一个对话框,要求点击任意地方隐藏对话框
这个时候用not()显然是不现实的,用closest()可以实现差不多的功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择指定元素外的其他所有元素</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
border: 1px solid red;
overflow: hidden;
}
.box > div{
height: 100px;
width: 100px;
background-color: cadetblue;
float: left;
margin-left: 10px;
}
.box > div > div{
height: 50px;
width: 50px;
background-color: coral;
}
</style>
</head>
<body>
<div class="box">
<div class="num1">
<div></div>
</div>
<div class="num2">
<div></div>
</div>
<div class="num3">
<div></div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script>
$(document).click(function(e){
if( $(e.target).closest('.num2').length == 0 ){
alert("事件触发");
}
});
</script>
</body>
</html>
关键知识点:jquery closest()
closest():在DOM树中从当前元素开始向上寻找(包括当前元素),并用匹配元素构建一个新的jquery对象
参考:http://www.w3school.com.cn/jquery/traversing_closest.asp
jquery选择指定元素之外的所有元素的更多相关文章
- html表单元素及表单元素详解
原文 https://www.jianshu.com/p/b427daa8663d 大纲 1.认识表单 2.认识表单元素 3.表单元素的分类 4.表单元素——文本框 5.表单元素button 6.表单 ...
- jquery简单原则器(匹配除了指定选择器之外的元素 selector 表示选择器)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分)
JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分) 1.匹配属性的开头 $("[attributeName^='value']"); 2.匹配属性的结尾 ...
- jquery选择伪元素属性的方法
CSS伪元素不是DOM元素,因此你无法直接选择到它们 一个方法是为该元素添加新类,并通过设置新类的属性来达到改变伪元素属性的效果: .checkboxWrapper.selected::before{ ...
- jQuery移除指定元素后的所有元素
jQuery 遍历的nextAll() 方法可以搜索 DOM 树中的元素跟随的同胞元素,也就是一个元素后面的所有同级元素,删除可以使用方法remove(),所以连起来为 $(selector).nex ...
- jQuery 选择具有特殊属性的元素
如今有这样一种需求,须要选出全部有背景图片的元素. 这个问题有点棘手.我们无法使用选择表达式来完毕这个问题了. 使用jQuery的DOM过滤方法filter(),能够依据函数中表达的不论什么条件选择元 ...
- jQuery选择元素的方法大全
jQuery选择器其实是一个有些地方比较费解的,如果没有经过多次实验的话,很难得出它的每个操作符到底是干什么的,很容易出错,经过 我的多次测试,终于对一些比较难理解或容易出错的选择操作进行总结,既方便 ...
- jQuery碎语(1) 基础、选择要操作的元素、处理DOM元素
1.基础 jquery对象集: $():jquery对象集合 获取jquery对象集中的元素: 使用索引获取包装器中的javascript元素:var temp = $('img[alt]')[0] ...
- jquery根据(遍历)html()的内容/根据子元素的内容(元素文本)来选择(查询),在子元素前加入元素
<ul> <li>First</li> <li>second</li> <li>third</li> </ul ...
随机推荐
- Linux 开机报 or type Control-D to continue
解决步骤: 1.输入root密码 2.看是哪个盘报的错,我这边是sda3(可能会是不同的盘),就是代码中标为FAIL 输入以下命令fsck -y /dev/sda3
- 读书笔记_Effective_C++_条款二十三:宁以non-member、non-friend替换member函数
有下面一种情况 class A { private: int a; int b; public: A(int x, int y) :a(x), b(y){} void a_display(){ cou ...
- Sphinx编译docs文档
在使用Python.Django的过程中,经常看到docs目录,里面存放着一些txt文本文件,也就是自带的一些帮助文档,里面有make.bat,在dos目录下直接执行make,给出的帮助是可以转换成H ...
- Hdu1097(计算a的b次幂最后一位数值)
#include <stdio.h> #include <math.h> int main() { int Num1,Num2; while(scanf("%d %d ...
- MongoDB学习笔记--基本命令
转自:http://www.cnblogs.com/xusir/archive/2012/12/24/2830957.html 数据库文件默认位置 /var/lib/mongodb 成功启动Mongo ...
- Anisotropic gauss filter
最近一直在做版面分析,其中文本行检测方面,许多文章涉及到了Anigauss也就是各向异性高斯滤波. 顾名思义,简单的理解就是参数不同的二维高斯滤波. 在文章Fast Anisotropic Gauss ...
- Java添加自定义注解
今天在整合MyBatis过程中,我使用扫描的方式去扫描DAO目录下的Java文件,但是在Service层使用Autowired的时候报错,但是工程能正常运行,此处有Bug! 解决方案: 1.创建 an ...
- Javascript 原型注意事项
function abc() {} abc.prototype.xx = { name: "keatkeat" } var x = new abc(); x.xx.name = & ...
- 如何将android studio项目转换成eclipse
更新:虽然本人坚守eclipse很久,但是现在我也不再推荐继续用eclispe了,自己的项目用还没什么问题,但是你如果想用github上的项目,用eclispe会越来越难.如果你仍然感兴趣,继续看下面 ...
- SRM 599 DIV1
A 首先发现对于2操作,每种素因子可以单独考虑,然后取出步数最多的计入答案,然后分别加上对每种素因子的1操作; 第二步我犯了个错误,以为最优方案是把素因子指数按二进制操作,在1的位置执行1操作,0的位 ...