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

这个时候用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选择指定元素之外的所有元素的更多相关文章

  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. .NET程序集签名

    强命名程序集的一个好处是防篡改.假如我有一个程序集MyDll.dll,如果我用我自己的私钥进行签名将程序集中的内容进行哈希处理,其他人如果不知道我的私钥的话,就不能篡改我的这个程序集进行某些恶意的行为 ...

  2. Resharper

    http://baike.baidu.com/link?url=H8DVtrvKV1Cg-Hrz82C6ZiJOUXbi_3BfoROe-RlHhctPna4-BFfglPh2OsR-KmCqRZ7_ ...

  3. 从Ueditor跨域上传，总结的一次跨域上传的爬坑经历

    项目内其中一个管理后台需要发布文章,需要一个富文本编辑器,经过一番选择后,最终选择了百度的Ueditor. 由于上传的文件是上传到另一台专门存放图片等静态资源的服务器上面的,所以就涉及到了跨域上传. ...

  4. oracle 优化——索引与组合索引

    1.索引结构.第一张图是索引的官方图解,右侧是存储方式的图解. 图中很清晰的展示了索引存储的状况. 在leaf 节点中存储了一列,索引所对应项的 :值,rowId,长度,头信息(控制信息) 这样我们就 ...

  5. java下socket传文件

    package cn.stat.p4.ipdemo; import java.io.BufferedReader; import java.io.BufferedWriter; import java ...

  6. MySql事务及隔离级别

    在数据库中,所谓事务是指作为单个逻辑工作单元执行的一系列操作. 事务的操作: 先定义开始一个事务,然后对数据作修改操作, 这时如果提交(COMMIT),这些修改就永久地保存下来 如果回退(ROLLBA ...

  7. hdoj 1233 还是畅通工程---最小生成树---prime算法

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1233 可以用Kruskal来做,不过当图的边比较稠密的时候用prime会更快一些. AC代码:296MS ...

  8. javascript:Array.slice.call 到Array.prototype.slice.call

    举个从对象到数组的例子: var obj={}; obj[1]=1; obj[2]=2; obj.length=2; var arr =Array.prototype.slice.call(obj); ...

  9. 使用“bulk insert ”进行批量插入数据

    本文转自csdn中文章,再次感谢他给我们分享. Bulk Insert命令详细 BULK INSERT以用户指定的格式复制一个数据文件至数据库表或视图中.语法: BULK INSERT [ [ 'da ...

  10. WEB开发中常用的正则表达式

    在计算机科学中,正则表达式用来描述或者匹配一系列符合某个句法规则的字符串的单个字符串.在WEB开发中,正则表达式通常用来检测.查找替换某些符合规则的字符串,如检测用户输入E-mai格式是否正确,采集符 ...