最近的项目中有这么一个需求，点击一排图片中的任意一张后底部弹出一个对话框，要求点击任意地方隐藏对话框

这个时候用not()显然是不现实的，用closest()可以实现差不多的功能

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>选择指定元素外的其他所有元素</title>
  6.         <style>
  7.             *{
  8.                 margin: 0;
  9.                 padding: 0;
  10.             }
  11.             .box{
  12.                 border: 1px solid red;
  13.                 overflow: hidden;
  14.             }
  15.             .box > div{
  16.                 height: 100px;
  17.                 width: 100px;
  18.                 background-color: cadetblue;
  19.                 float: left;
  20.                 margin-left: 10px;
  21.             }
  22.             .box > div > div{
  23.                 height: 50px;
  24.                 width: 50px;
  25.                 background-color: coral;
  26.             }
  27.         </style>
  28.     </head>
  29.     <body>
  30.         <div class="box">
  31.             <div class="num1">
  32.                 <div></div>
  33.             </div>
  34.             <div class="num2">
  35.                 <div></div>
  36.             </div>
  37.             <div class="num3">
  38.                 <div></div>
  39.             </div>
  40.         </div>
  41.         <script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
  42.         <script>
  43.             $(document).click(function(e){
  44.                 if( $(e.target).closest('.num2').length == 0 ){
  45.                     alert("事件触发");
  46.                 }
  47.             });
  48.         </script>
  49.     </body>
  50. </html>

关键知识点：jquery closest()

closest():在DOM树中从当前元素开始向上寻找（包括当前元素），并用匹配元素构建一个新的jquery对象

参考：http://www.w3school.com.cn/jquery/traversing_closest.asp

jquery选择指定元素之外的所有元素的更多相关文章

  1. html表单元素及表单元素详解

    原文 https://www.jianshu.com/p/b427daa8663d 大纲 1.认识表单 2.认识表单元素 3.表单元素的分类 4.表单元素——文本框 5.表单元素button 6.表单 ...

  2. jquery简单原则器（匹配除了指定选择器之外的元素 selector 表示选择器）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. JQUERY选择和操作DOM元素（利用正则表达式的方法匹配字符串中的一部分）

    JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分) 1.匹配属性的开头 $("[attributeName^='value']"); 2.匹配属性的结尾 ...

  4. jquery选择伪元素属性的方法

    CSS伪元素不是DOM元素,因此你无法直接选择到它们 一个方法是为该元素添加新类,并通过设置新类的属性来达到改变伪元素属性的效果: .checkboxWrapper.selected::before{ ...

  5. jQuery移除指定元素后的所有元素

    jQuery 遍历的nextAll() 方法可以搜索 DOM 树中的元素跟随的同胞元素,也就是一个元素后面的所有同级元素,删除可以使用方法remove(),所以连起来为 $(selector).nex ...

  6. jQuery 选择具有特殊属性的元素

    如今有这样一种需求,须要选出全部有背景图片的元素. 这个问题有点棘手.我们无法使用选择表达式来完毕这个问题了. 使用jQuery的DOM过滤方法filter(),能够依据函数中表达的不论什么条件选择元 ...

  7. jQuery选择元素的方法大全

    jQuery选择器其实是一个有些地方比较费解的,如果没有经过多次实验的话,很难得出它的每个操作符到底是干什么的,很容易出错,经过 我的多次测试,终于对一些比较难理解或容易出错的选择操作进行总结,既方便 ...

  8. jQuery碎语(1) 基础、选择要操作的元素、处理DOM元素

    1.基础 jquery对象集: $():jquery对象集合 获取jquery对象集中的元素: 使用索引获取包装器中的javascript元素:var temp = $('img[alt]')[0] ...

  9. jquery根据(遍历)html()的内容/根据子元素的内容（元素文本）来选择（查询），在子元素前加入元素

    <ul> <li>First</li> <li>second</li> <li>third</li> </ul ...

随机推荐

  1. tmux environment keep

    Shell 下 tmux 不能保持 PATH 变量,解决方法如下: 添加如下配置信息到 ~/.tmux.conf 中即可. set-option -ga update-environment PATH ...

  2. visual studio插件 visual assistx

    http://www.wholetomato.com/downloads/CheckForUpdate.asp?v=1925&e=&b=n&r=y&i=10&v ...

  3. 浅谈MDX处理空值NULL及格式化结果

    MDX查询结果中往往会含有"NULL"值,这是某维度下对应的的量值不存在导致的,为了让报表呈现更好的效果,在有些情况下,需要将"NULL"的切片值置换成0,这些 ...

  4. JAVA中，JSON MAP LIST的相互转换

    1 JSON包含对象和数组,对应于JAVA中的JSONObject,JSONArray 2 String 转JSON对象 JSONObject.fromObject("String" ...

  5. MYSQL存储过程注释位置

    MYSQL数据库存储过程,像"#“和”/%%/“注释需要写在BEGIN,END语句块里面,否则保存不了,例如: CREATE PROCEDURE HelloWorld() BEGIN #大家 ...

  6. SQL SERVER 分页方法

    最近项目中需要在SQL SERVER中进行分页,需要编写分页查询语句.之前也写过一些关于分页查询的语句,但是性能不敢恭维.于是在业务时间,在微软社区Bing了一篇老外写的关于SQL SERVER分页的 ...

  7. c++中vector等容器的实现机制

    stl容器区别: vector list deque set map-底层实现 stl容器区别: vector list deque set map (转) 在STL中基本容器有: vector.li ...

  8. 转。webapp开发小tips

     备忘 - Q:  webapp点击一个按钮调用系统拨号: <a href="tel:12345654321">打电话给我</a> <a href=& ...

  9. 怎样使用pyinstaller打包

    安装好pyinstaller后 cd 到pyinstaller.py目录,在命令行输入:python pyinstaller.py 参数 主文件所在目录 如:python pyinstaller.py ...

  10. linux内核学习之一：环境搭建--安装Debian7.3

    本系列文章假设读者已对linux有一定的了解,其实学习linux内核不需要有很深的关于linux的知识,只需要了解以下内容:linux基础知识及基本shell命令:现代操作系统的基本概念:C语言和gc ...