<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <title>新功能测试</title>
</head>
<style type="text/css">
.demo {padding: 30px; height: 300px; position: relative; }
.floatLayer{ position: absolute; top:50px; left: 100px; width: 200px;height: 200px; border: 10px solid #FF3300; padding: 10px }
ol,ul{list-style:none; margin:0; padding:0}
.topic-list li{ float:left; margin-right:15px}
</style>
<body>
   <div id="main">
      <h1>jQuery判断一个元素是否为另一个元素的子元素的实例页面</h1>
      <div id="body" class="light">
         <div id="content" class="show">
            <h3>演示</h3>
            <div class="demo">
               <div class="floatLayer"><h4>这是一个浮层</h4> 点击浮层内部警告true<br />点击浮层外部警告false</div>
            </div>
         </div>
      </div>
   </div>
   <script src="https://lib.baomitu.com/jquery/1.9.1/jquery.min.js"></script>

   <script type="text/javascript">
        //判断:当前元素是否是被筛选元素的子元素
        jQuery.fn.isChildOf = function(b){
            return (this.parents(b).length > 0);
        };
        //判断:当前元素是否是被筛选元素的子元素或者本身
        jQuery.fn.isChildAndSelfOf = function(b){
            return (this.closest(b).length > 0);
        };
   </script>

   <script type="text/javascript">
        $(document).click(function(event){
            alert($(event.target).isChildOf(".floatLayer"));
        });
   </script>
   </body>
</html>

jQuery判断一个元素是否为另一个元素的子元素(或者其本身)的更多相关文章

  1. 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...

  2. ie7 父元素宽度自适应且为浮动的话 子元素的宽度将不能按比例设置问题

    好久没切图,昨天遇到个浏览器兼容的老问题,在ie7下,父元素设置浮动后,其宽度是自适应的,子元素的宽度若没有确定则将显示最小宽度,即文本所占的宽度. 正常其他浏览器显示如下: ie7中显示效果如下: ...

  3. jQuery——子元素筛选器

    子元素筛选器 名称 :first-child JQ语法 jQuery( "selector:first-child" ) 说明 :first-child选择器用于匹配作为父元素的第 ...

  4. [jquery]高级篇--获取div子元素

    参考: http://zhidao.baidu.com/link?url=IfeQQBn1xMLqWvwdkKbQYJ8mC6ciGi_8M1NYkm6iQ-kXBMX2f2ylN-ckzFLiynn ...

  5. jQuery 对页面元素的搜索包括父元素、同辈元素、子元素的搜索

    1.父元素搜索 (1)parents([selector]) 方法 $("p").parents().css("border","1px solid ...

  6. 父元素相对定位后，子元素在ie下被覆盖的问题！

    <div id="append_parent" style="position: relative;"> <div id="zoom ...

  7. 子元素margin-top属性传递给父元素的问题 转！

    问题描述:一个父包含框包含一个子元素.给正常流的子元素一个垂直外边距margin-top就会使得父元素跟着往下走,而子元素和父元素的边距则没有发生变化. html结构:<div class=&q ...

  8. 子元素用margin-top 为什么反而作用在父元素上？对使用margin-top 的元素本身不起作用？

    在这个说明中,“collapsing margins”(折叠margin)的意思是:2个或以上盒模型之间(关系可以是相邻或嵌套)相邻的margin属性(这之间不能有非空内容.padding区域.bor ...

  9. 深入子元素的width与父元素的width关系

    深入理解父元素与子元素的width关系 对于这一部分内容,如果理解准确,可以更容易控制布局,节省不必要的代码,这里将简单研究. 第一部分:父子元素都是内联元素 代码演示如下: <!DOCTYPE ...

  10. Javascript事件模型（二）：Javascript事件的父元素和子元素

    DOM事件标准定义了两种事件流,分别是捕获和冒泡.默认情况下,事件使用冒泡事件流,不使用捕获事件流.你可以指定使用捕获事件流,方法是在注册事件时传入useCapture参数,将这个参数设为true. ...

随机推荐

  1. jqGrid 编辑完数据后能返回到当前位置的方法

    jqGrid 是一个js的jquery组件,虽然不轻便,但功能还是蛮强大的,也比较方便使用.在数据加载后,经常需要对其中的记录进行编辑,修改完后再返回时需要看到修改后的数据,一般采取重新加载的方法re ...

  2. iOS View

    创建: 2018/04/19 完成: 2018/04/20 View的创建  创建  storyboard上操作  与代码连接 ● 目的: 通过代码控制view ● 按住option拖动 View的坐 ...

  3. Codeforces - 1114B - Yet Another Array Partitioning Task - 构造 - 排序

    https://codeforces.com/contest/1114/problem/B 一开始叫我做,我是不会做的,我没发现这个性质. 其实应该很好想才对,至少要选m个元素,其中m个作为最大值,从 ...

  4. POJ2446【建图建图】

    题意: 给你一个n*n的矩阵,然后再给你几个坑,然后问你能否被1*2的长方形给覆盖: -弱知道了是二分匹配的做法,但是弱还是不会转化,又是在建图上GG了 分析: 从国际象棋的那个黑白色理解,这是一张二 ...

  5. C++ C# 默认对齐是8字节

    C++ C# 默认对齐是8字节 以上,一直以为是4字节,尼玛

  6. 黑客攻防技术宝典web实战篇：攻击访问控制习题

    猫宁!!! 参考链接:http://www.ituring.com.cn/book/885 随书答案. 1. 一个应用程序可能通过使用 HTTP Referer 消息头实施访问控制,但它的正常行为并没 ...

  7. 手机测试用例-STK测试用例

    ID 功能描述 操作步骤 预期结果 test time P/F comment tester test time P/F comment tester STK服务 SIM卡适应性测试 1.选取支持ST ...

  8. pycharm命令行快捷启动

    打开 本用户目录下的.bashrc文件 vim .bashrc 在末尾添加一行 alias pycharm="the-path-to-pycharm.sh" 最后保存退出 然后更新 ...

  9. wpf 中AxShockwaveFlash重写以及屏蔽鼠标右键

    在wpf中需要用到flash播放swf或者图片,需要使用 AxShockwaveFlashObjects.dll和ShockwaveFlashObjects.dll 在项目中使用的时候遇到 问题1.使 ...

  10. 4-redis数据过期策略

    1 基本 redis也许只是用来存放临时数据.比如股市行情.游戏中一个持续一个月的活动等,都属于缓存数据,过了一段就没用了.如果没有过期策略,就会有大量垃圾数据在内存中堆积. 2 TTL time t ...