jQuery的高级事件处理
jQuery的事件委托
操作案例
建立一个简单的影集，影集中会显示一组照片，点击添加连接会有更多的图片
当用户把光标移动到每一张照片时，会显示对应的文字
相关html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.4.1.js"></script>
<style> #container{
margin: 0 auto;
width: 1000px;
background-color: #ccc;
}
#gallery>.photo>img{
height: 160px;
width: 158px;
}
#gallery{
width: 800px;
margin:0 auto;
height: 1200px;
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
align-content: space-around;
}
#gallery>.photo{
border: 9px solid #fff;
border-radius: 12px;
height: 160px;
width: 158px;
position: relative;
}
#gallery>.photo>.details{
position: absolute;
top:0;
left:0;
opacity: 0 ;
}
</style>
</head>
<body> <div id="container">
<h1>Photo Gallery</h1>
<div id="gallery"> <div class="photo">
<img src="/img/phone3.jpg" alt="">
<div class="details">
<div class="description">
amet consectetur
</div>
<div class="date">
voluptatem culpa
</div>
<div class="photographer">
modi molestias
</div>
</div>
</div>
<div class="photo">
<img src="/img/phone4.jpg" alt="">
<div class="details">
<div class="description">
Lorem ipsum
</div>
<div class="date">
recusandae dicta,
</div>
<div class="photographer">
elit. Hic ut velit
</div>
</div>
</div>
<div class="photo">
<img src="/img/phone.jpeg" alt="">
<div class="details">
<div class="description">sectetur adipisicing
</div>
<div class="date">
aperiam voluptate
</div>
<div class="photographer">
dolore nisi molestias
</div>
</div>
</div>
<div class="photo">
<img src="/img/flower.jpg" alt="">
<div class="details">
<div class="description">
dolor, sit
</div>
<div class="date">
voluptatem culpa
</div>
<div class="photographer">
olore nisi
</div>
</div>
</div>
<div class="photo">
<img src="/img/phone3.jpg" alt="">
<div class="details">
<div class="description">
amet consectetur
</div>
<div class="date">
voluptatem culpa
</div>
<div class="photographer">
modi molestias
</div>
</div>
</div>
<div class="photo">
<img src="/img/phone4.jpg" alt="">
<div class="details">
<div class="description">
Lorem ipsum
</div>
<div class="date">
recusandae dicta,
</div>
<div class="photographer">
elit. Hic ut velit
</div>
</div>
</div>
<div class="photo">
<img src="/img/phone.jpeg" alt="">
<div class="details">
<div class="description">sectetur adipisicing
</div>
<div class="date">
aperiam voluptate
</div>
<div class="photographer">
dolore nisi molestias
</div>
</div>
</div>
<div class="photo">
<img src="/img/flower.jpg" alt="">
<div class="details">
<div class="description">
dolor, sit
</div>
<div class="date">
voluptatem culpa
</div>
<div class="photographer">
olore nisi
</div>
</div>
</div>
<div class="photo">
<img src="/img/phone3.jpg" alt="">
<div class="details">
<div class="description">
amet consectetur
</div>
<div class="date">
voluptatem culpa
</div>
<div class="photographer">
modi molestias
</div>
</div>
</div>
<div class="photo">
<img src="/img/phone4.jpg" alt="">
<div class="details">
<div class="description">
Lorem ipsum
</div>
<div class="date">
recusandae dicta,
</div>
<div class="photographer">
elit. Hic ut velit
</div>
</div>
</div>
<div class="photo">
<img src="/img/phone.jpeg" alt="">
<div class="details">
<div class="description">sectetur adipisicing
</div>
<div class="date">
aperiam voluptate
</div>
<div class="photographer">
dolore nisi molestias
</div>
</div>
</div>
<div class="photo">
<img src="/img/flower.jpg" alt="">
<div class="details">
<div class="description">
dolor, sit
</div>
<div class="date">
voluptatem culpa
</div>
<div class="photographer">
olore nisi
</div>
</div>
</div>
<div class="photo">
<img src="/img/phone3.jpg" alt="">
<div class="details">
<div class="description">
amet consectetur
</div>
<div class="date">
voluptatem culpa
</div>
<div class="photographer">
modi molestias
</div>
</div>
</div>
<div class="photo">
<img src="/img/phone4.jpg" alt="">
<div class="details">
<div class="description">
Lorem ipsum
</div>
<div class="date">
recusandae dicta,
</div>
<div class="photographer">
elit. Hic ut velit
</div>
</div>
</div>
<div class="photo">
<img src="/img/phone.jpeg" alt="">
<div class="details">
<div class="description">sectetur adipisicing
</div>
<div class="date">
aperiam voluptate
</div>
<div class="photographer">
dolore nisi molestias
</div>
</div>
</div> </div>
<a id="more-photos" href="pages/1.html">More Photos</a>
</div>
</body>
</html>
对应的js代码: 追加数据页面
$(document).ready(function(){
var pageNum=1;
$('#more-photos').click(function(event){
event.preventDefault();
var $link=$(this);
var url=$link.attr('href');
if(url){
$.get(url,function(data){
$('#gallery').append(data);
});
pageNum++;
if(pageNum<=3){
$link.attr('href','pages/'+pageNum+'.html');
}else{
$link.remove();
}
}
});
}
悬停时显示数据：
1 $('div.photo').on('mouseenter mouseleave',function(event){
2 var $details=$(this).find('.details');
3 if(event.type=='mouseenter'){
4 $details.fadeTo('fast',0.7);
5 }else{
6 $details.fadeOut('fast');
7 }
8 });
实现效果
出现上述问题的原因：事件处理程序只会添加到调用on()方法时已经存在的元素上。
解决以上问题的方法：事件委托
jQuery的委托方法：
在把div.photo作为第二个参数的情况下，.on方法会把this关键字映射为#gallery中与该选择符匹配的元素
$('#gallery').on('mouseenter mouseout','div.photo',function(event){
var $details=$(this).find('.details');
if(event.type=='mouseenter'){
$details.fadeTo('fast',0.7);
}else{
$details.fadeOut('fast');
}
})
选择委托的作用域：
照片元素的任何祖先元素都可以作为委托的作用域
$(document).on('mouseenter mouseleave','div.photo',
function(event){
var $details=$(this).find('.details');
if(event.type=='mouseenter'){
$details.fadeTo('fast',0.7);
}else{
$details.fadeOut('fast');
}
});
早委托：
我们选择docoment作为委托作用域，document元素是随着页面加载
几乎立即就可以调用的，绑定在document处理程序如果放在$(document).ready()中
就要等待整个DOM构建完成才能执行绑定，使用立即被调用的函数表达式可以在整
个文档未就绪的情况下，确保所有的div.photo元素只要呈现在页面上就可以应用上
mouseover和mouseleave行为。
(function($){
$(document).on('mouseenter mouseleave','div.photo',
function(event){
var $details=$(this).find('.details');
if(event.type=='mouseenter'){
$details.fadeTo('fast',0.7);
}else{
$details.fadeOut('fast');
}
}
)
})(jQuery);
早委托的好处：
假设一个click事件绑定在一个链接上，这个事件处理程序要执行
某些操作，同时要阻止链接的默认行为。如果等文档就绪之后，再绑定它，那很可能
在绑定处理程序之前用户已经点击该链接离开了当前页面。
jQuery的高级事件处理的更多相关文章
- 第一百七十一节，jQuery，高级事件，模拟操作,命名空间,事件委托,on、off 和 one
jQuery,高级事件,模拟操作,命名空间,事件委托,on.off 和 one 学习要点: 1.模拟操作 2.命名空间 3.事件委托 4.on.off 和 one jQuery 不但封装了大量常用的事 ...
- 译：DOM2中的高级事件处理（转）
17.2. DOM2中的高级事件处理(Advanced Event Handling with DOM Level 2) 译自:JavaScript: The Definitive Gu ...
- Jquery remove 高级用法
Jquery remove 高级用法 html 代码 <div class="file-image">abc1111</div><div class= ...
- jQuery基础之事件处理
jQuery基础之事件处理方法,如下图: 代码实现: <script src="JS/jquery-1.12.4.min.js"></script> < ...
- jQuery中的事件处理
1.页面载入完毕响应事件所谓页面载入完毕是指DOM元素载入就绪了,能够被读取和操作了.①jQuery中的$(doucument).ready()事件ready(fn)是jQuery事件模块中最重要的一 ...
- jquery事件之事件处理函数
一.事件处理 方法名 说明 语法 (events 事件类型,data数据,handler 事件处理函数,selector 选择器) Bind( 为每一个匹配元素的特定事件(像click)绑定一个事件处 ...
- JQuery学习高级
## 今日内容: 1. JQuery 高级 1. 动画 2. 遍历 3. 事件绑定 4. 案例 5. 插件 ## ...
- jquery 选择器 -高级使用 新的 心得
jQuery的each函数: each函数等同于c语言中的for函数: 里面每次循环的 "context 上下文" == 当前的dom ,可以使用this, 也可以使用$(this ...
- jQuery动画高级用法（上）——详解animation中的.queue()动画队列插队函数
决定对animate方面做一些总结,希望能给大家一些启发和帮助 从一个实际应用谈起 今天不谈animate().fadeIn().fadeOut().slideUp().show().hide()诸如 ...
- jQuery Grid高级指南
上周以为已经把jqgrid 表格这部分已经搞得差不多了,没想到在实际用的时候,出现了不少问题,重新把这块知识整理一下. 问题一:设置表格的自动刷新 问题的原因: 使用表格自带的增删改查的功能,编辑完数 ...
随机推荐
- 从传统搜索到智能问答：自研 RAG 系统的技术实践与工程落地
一.引言 在数字化转型浪潮下,企业知识服务体系正经历着深刻变革.如何让用户高效获取所需信息,成为提升产品竞争力和用户满意度的关键.葡萄城作为企业级开发工具与解决方案提供商,长期致力于知识服务体系的建设 ...
- SecureCRT 8.5 配置自动记录日志
两种方式记录日志 1.手动记录日志 文件--会话日志 选择需要保存的位置和文件名 2.全局自动记录所有日志 选项--全局选项 常规--默认会话--编辑默认设置 类别--终端--日志文件 配置日志文件名 ...
- Apache JMeter压力测试工具的安装与使用
官网下载 https://jmeter.apache.org/download_jmeter.cgi 然后解压即可 运行 双击bin/jmeter.bat 汉化 在软件里选择语言重启就会还原,所以这里 ...
- 启智树提高组day3T1 3479 : A：climb 树
启智树提高组day3T1 3479 : A:climb 树 题目描述 DoubleDuck山是X省的著名旅游景点.这一天,淘淘慕名而来,打算爬到山顶处. DoubleDuck山的构造是十分特殊的.在这 ...
- [译]MIT6.824_1.1分布式系统介绍——驱动力与挑战
这是6.824分布式系统课程,我会开始用简明的介绍我所认为的分布式系统. 分布式系统的核心是通过网络以完成一致任务的一组协作计算机. 因此我们将在本课程中重点介绍各种实例,例如大型网站的存储或MapR ...
- async与defer的区别
`async` 和 `defer` 是两种不同的JavaScript特性,它们的主要区别在于它们的执行顺序和时间点. `async` 意味着函数或代码块会被异步执行.当浏览器遇到带有 `async` ...
- 18.Java源码分析系列笔记-JDK1.8的ConcurrentHashMap
目录 1. 是什么 2. 如何使用 3. 原理分析 3.1. 构造方法 3.1.1. Node 3.2. put方法[有加锁] 3.2.1. 计算key的hash 3.2.2. 死循环 3.2.3. ...
- k8s一、基本概念
目录 Kubernetes的设计架构 Master Node 组件简的基本交互流程 Kubernetes的核心对象 Pod 控制器 Replication Controller 和 ReplicaSe ...
- Blazor学习之旅(9)用MudBlazor重构Todo
大家好,我是Edison. 在之前的学习之旅(3)开发一个Todo应用中,我们开发了一个简单版的Todo,这次我们基于MudBlazor来重构这个Todo应用. Todo V1回顾 在Blazor入门 ...
- 好用的文档工具👉smart-doc
好用的文档工具smart-doc smart-doc不得不说是一款非常好用的文档工具,尤其是它几乎不与项目耦合的特性十分值得所有java开发人员日常使用它~ 之前及现在用的 我从事开发以来,用过形形色 ...