jq中的事件委托：closest，parent，parents，delegate
closest
.closest(selector)
从当前元素开始沿 DOM 树向上，获得匹配第一个符合选择器的祖先元素，返回零个或一个元素的 jQuery 对象。
.parents() 和 .closest() 方法类似，沿 DOM 树向上遍历，直到文档的根元素为止，将每个祖先元素添加到一个临时的集合；如果应用了选择器，则会基于该选择器对这个集合进行筛选，返回包含零个、一个或多个元素的 jQuery 对象
.parent()：当前匹配元素集合中每个元素的父元素，使用选择器进行筛选是可选的。
示例：
html
<ul id="one" class="level-1">
<li class="item-i">I</li>
<li id="ii" class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
使用：closest
$('li.item-a').closest('ul').css('border', '1px solid red');
结果：找到第一个父级ul
使用parents：
$('li.item-a').parents('ul').css('border', '1px solid red');
结果：
事件委托场景举例：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<style>
li { margin: 3px; padding: 3px; background: #EEEEEE; }
li.hilight { background: yellow; }
</style>
</head>
<body>
<ul>
<li class="a"><b>Click me!</b></li>
<li class="a">You can also <b>Click me!</b></li>
</ul>
<script>
$( document ).bind("click", function( e ) {
$( e.target ).closest("li").toggleClass("hilight");
});
</script>
</body>
</html>
事件绑定在文档上，点击每个li分别实现下面效果：
另一个使用delegate实现事件委托：
delegate事件委托
jq中的事件委托：closest，parent，parents，delegate的更多相关文章
- 【Unity3D技巧】在Unity中使用事件/委托机制（event/delegate）进行GameObject之间的通信 (二) : 引入中间层NotificationCenter
作者:王选易,出处:http://www.cnblogs.com/neverdie/ 欢迎转载,也请保留这段声明.如果你喜欢这篇文章,请点[推荐].谢谢! 一对多的观察者模式机制有什么缺点? 想要查看 ...
- 怎么理解js中的事件委托
怎么理解js中的事件委托 时间 2015-01-15 00:59:59 SegmentFault 原文 http://segmentfault.com/blog/sunchengli/119000 ...
- js和jquery中的事件委托
[转+自己的修改] 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却 ...
- js实例分析JavaScript中的事件委托和事件绑定
我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...
- JQuery中的事件委托
JQuery 中的事件委托 定义 事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作,事件委托首先可以极大减少事件绑定次数,提高性能:其次可以让新元素的子元素也可以拥 ...
- js中的事件委托或是事件代理
JavaScript(jQuery)中的事件委托 https://www.cnblogs.com/zhoushengxiu/p/5703095.html js中的事件委托或是事件代理详解 https: ...
- 简单说 JavaScript中的事件委托(下)
说明 上次我们说了一些,关于 JavaScript中事件委托的 基础知识,这次我们继续来看. 解释 先来一段代码 <!doctype html> <html lang="e ...
- JavaScript中的事件委托机制跟深浅拷贝
今天聊下JavaScript中的事件委托跟深浅拷贝 事件委托 首先呢,介绍一下事件绑定 //方法一:通过onclick <button onclick="clickEvent()&qu ...
- javascript中的事件委托
这几天看到一个面试题,大概就是,让你给1000个li都添加一个click事件,应该怎么添加?大多数人第一开始的感觉可能就是,每个li上边都添加一个呗,那要是这样的话,估计面试的时候就会GG了,这里就是 ...
随机推荐
- touch-paint
效果如下 代码如下: //index.html <!DOCTYPE html> <html lang="zh-CN"> <head> <m ...
- NCBI通过氨基酸位置查看相邻SNP
进入NCBI网站 在SNP的搜索框中输入SNP位点,比如“rs52811957” 在弹出的对话框中选择“Gene View” 进入以后会显示该变异相邻SNP.原始氨基酸.变异后的氨基酸.positio ...
- Day013--Python--内置函数一
一.作用域相关(2) 1. globals() 查看全局空间作用域中的内容. 函数会以字典的类型返回全部全局变量. 2. locals() 查看当前空间作用域中的内容. 函数以字典的类型返回当前位 ...
- Educational Codeforces Round 53 (Rated for Div. 2) A Diverse Substring
传送门 https://www.cnblogs.com/violet-acmer/p/10163375.html 题意: 给出串是多态的定义“长度为 n 的串 s ,当串 s 中所有字母出现的次数严格 ...
- JAVA核心技术I---JAVA基础知识（映射Map）
一:映射Map分类 二:Hashtable(同步,慢,数据量小) –K-V对,K和V都不允许为null –同步,多线程安全 –无序的 –适合小数据量 –主要方法:clear, contains/con ...
- HDU - 5071 Chat（模拟）
原题链接 题意:有各种操作,模拟这个程序并输出每次操作的信息 分析:恶心模拟题...用个map记录一下各个等级女孩的谈话数,同时也便于查找权值为u的在不在队列里.因为n很小,其他就暴力模拟了. #in ...
- nginx配置fcgi
1.刚开始用网上最多的方式,perl脚本实现cgi,配置最后都完成,一直是504错误,看日志是perl脚本连接超时,可能是版本太旧了吧,nginx更新用不了那种方式了,搞不清楚.貌似那种帖子都是13年 ...
- [Android] Android 卡片式控件CardView的优雅使用
[Android] Android 卡片式控件CardView的优雅使用 CardView是在安卓5.0提出的卡片式控件 其具体用法如下: 1.在app/build.gradle 文件中添加 comp ...
- 服务器部署全程记录（centos6.5）
1.安装nginx 上传安装包:put E:\yz_index\installPackage\nginx-1.14.0.tar.gz 解压:tar zxvf nginx-1.14.0.tar.gz 切 ...
- 启动aspx文件错误
有一次,为了模仿翻页效果,设置的启动也是aspx文件.当时因为重装系统的原因,我的系统暂时不支持aspx文件的发布访问.所以,我就在MIME Type里面添加了对aspx文件的访问,如下图: 这样就可 ...