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 ...
随机推荐
- C# 数学运算符
运算符大致分为如下3类: 一元运算符,处理一个操作符 二元运算符,处理两个操作数 三元运算符,处理三个操作数 大多数运算符都是二元运算符,只有几个一元运算符和一个三元运算符,即条件运算符(条件运算符是 ...
- svn服务器的配置步骤
1.安装客户端: TortoiseSVN-1.9.3.27038-x64-svn-1.9.3.msi下载地址:http://jaist.dl.sourceforge.net/project/torto ...
- c - 对数组进行排序(通过指针的指针)
通过指针的指针,以及一个指针数组,对实际数组元素进行排序,有一个优点,就是排序过程交换的只有指针数组中的值,而不是实际的数组的元素.当实际元素中的对象很大,特别是结构体等类型时,这样做是很有好处. 下 ...
- 解析c语言背后的汇编代码
源码 很简单的c语言代码,作用是交换两个数: #include <stdio.h> void swap(int * a, int * b) { *a = *a + *b - (*b = * ...
- iOS基础框架的搭建 / 及国际化操作
1.基础框架的搭建 1.1 pod引入常用的第三方类库 1.2 创建基础文件夹结构/目录结构 Resource———存放声音/图片/xib/storyboard 等资源文件 Define——宏定义, ...
- 你好，C++（18） 到底要不要买这个西瓜？4.1.6 操作符之间的优先顺序
4.1.6 操作符之间的优先顺序 在表达一些比较复杂的条件判断时,在同一个表达式中,有时可能会存在多个操作符.比如,我们在判断要不要买某个西瓜时,不仅要判断它的总价(单价8.2元/斤,一共10.3斤) ...
- js拖动层
模仿网易彩票网(http://caipiao.163.com/)的登陆框自己做了一个拖动层,不过有点小问题——在谷歌浏览拖动的时候鼠标状态变成了文字状态(cursor:text;) <!DOCT ...
- php代码生成二维码
//引用范例 1 public function index() { 2 echo "<img src='http://qr.liantu.com/api.php?bg=f3f3f3& ...
- build.prop修改详细说明
用RE进入/system/挂载读写,找到build.prop复制到/sdcarrd进行修改比较保险.也可以挂载读写后,直接选择用文本编辑器打开,进行编辑.乱改有风险,修改需谨慎.1.# begin b ...
- append与remove的简单使用
点击Add More按钮页面会自动添加一个输入框和Remove按钮,点击Remove按钮则此行元素将被移除. <!DOCTYPE html> <html lang="en& ...