第78天:jQuery事件总结(一)
jQuery事件总结(一)
现在就一点一点积累自己的知识体系,记录自己学到的和自己所理解的jQuery。
JavaScript和HTML之间的交互式通过用户和浏览器操作页面时引发的事件机制来处理的。当文档或者它的某些元素发生某些变化或操作时,浏览器就会自动生成一个事件。当然使用传统的JavaScript也能完成这些交互,但是jQuery增加并扩展了基本的事件处理机制。jQuery不仅提供了更加优雅的事件处理语法,而且极大的增强了事件处理能力。
一、jQuery中的事件
1、加载DOM:
执行时机:在常规的JavaScript中,通常使用window.onload方法,而在jQuery中,使用的是$(document).ready()方法,通过使用此方法,可以在DOM载入就绪时就对其进行操纵兵调用执行它所绑定的函数。
注意以上两种方法的区别:
window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行,也即在此时JavaScript才可以访问网页中的任何元素;
$(document).ready()方法注册的事件处理程序,在DOM完全就绪时就可以被调用,也即此时网页的所有元素对jQuery都是可以访问的,但是并不是这些元素关联的文件都已经下载完毕。
根据上述描述,显然使用jQuery的$(docum).ready()方法时会出现一个问题。由于在该方法内注册的事件,只要DOM就绪就会被执行,因此可能此时元素的关联文件未下载完。例如与图片相关的HTML下载完毕,并且已经解析为DOM树了,但是很有可能图片还未完全加载,所以例如图片的高度和宽度等属性就不一定有效。
要解决这个问题,可以使用jQuery中的另一个关于页面加载的方法——load()方法。load()方法会在元素的onload事件中绑定一个处理函数。如果处理函数绑定给window对象,则会在所有的内容(包括窗口、框架、对象和图像等)加载完毕后触发,除过处理函数绑定在元素上,则会在元素的内容加载完毕后触发。
jQuery代码如下:
$(document).ready(function(){ //code... }) 等价于javascript中的 window.onload = function(){ //code... }
window.onload()不能多次调用,jQuery的$(document).ready()方法就可以很好的解决这种问题——每次调用$(document).ready()方法都会在现有的行为上追加新的行为,这些行为函数会根据注册的顺序依次执行。例如,上面的JavaScript代码就可以用jQuery来很好的实现:
function func1(){
//code...
}
function func1(){
//code...
} //下面的jQuery代码就可以顺序执行上面的两个函数,并且如果还有其他的绑onload函数也可以这样绑定
$(document).ready(function(){
10 func1();
});
$(document).ready(function(){
13 func2();
14 });
2、事件绑定
文档装载完成了,接着就是为元素绑定事件来完成某些操作了,所使用的是bind()方法。bind()方法的调用格式为:
bind(type, [data], fn);
其中type是事件类型,包括:click,keypress,load,submit,dblclick,keydown,change,resize,mouseenter,keyup,scroll,focus,mouseleave,blur,unload等,也可以是自定义事件名称。第二个参数是可选参数,作为event.data属性值传递给事件对象的额外数据对象。第三个参数则是用来绑定的处理函数。举个实际的例子,下面网页中,单击“标题”链接将显示内容。
HTML代码如下:
<div id="container">
<h4 class="head">jQuery事件机制</h4>
<div class="content">
jQuery是目前使用最广泛的javascript函数库。据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQuery作为他们的官方库。
</div>
</div>
按照需求,需要完成以下几个步骤:
(1)等待DOM装载完毕;
(2)找到“标题”所在的元素,绑定click事件;
(3)找到“内容”元素,将“内容”显示出来。
根据分析的步骤,写出jQuery代码如下:
$(function(){
$("#container h4.head").bind("click", function(){
$(this).next().show(); //获取并显示“内容”元素
})
})
当然可以加强效果,并且改变绑定事件的类型,比如鼠标悬停时显示“内容”,鼠标离开时隐藏“内容”。jQuery代码如下:
$(function(){
$("#container h4.head").bind("mouseover", function(){
$(this).next().show(); //获取并显示“内容”元素
}).bind("mouseout", function(){
$(this).next().hide();
});
})
这里需要知道的一点是,jQuery中bind方法是可以多次调用的,并且可以简化为将上面的第二个bind去掉。
第78天:jQuery事件总结(一)的更多相关文章
- JQuery选择器JQuery 事件
JQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") ...
- HTML Select 标签选择后触发jQuery事件代码实例
页面设计原由: 因为很多客户不知道如何来到我们公司,领导想让我在微信公众号上面做一个链接,客户可以直接通过微信公众号打开地图并导航到我们公司的办公地点. 实现起来并不难,但由于公司有很多办事处,所以需 ...
- jquery事件核心源码分析
我们从绑定事件开始,一步步往下看: 以jquery.1.8.3为例,平时通过jquery绑定事件最常用的是on方法,大概分为下面3种类型: $(target).on('click',function( ...
- 解密jQuery事件核心 - 委托设计(二)
第一篇 http://www.cnblogs.com/aaronjs/p/3444874.html 从上章就能得出几个信息: 事件信息都存储在数据缓存中 对于没有特殊事件特有监听方法和普通事件都用ad ...
- 解密jQuery事件核心 - 模拟事件(四)
前几章已经把最核心的实现都分解过了,这一章我们看看jQuery是如何实现事件模拟的 在Internet Explorer 8和更低,一些事件change 和 submit本身不冒泡,但jQuery修改 ...
- 深入学习jQuery事件对象
× 目录 [1]获取 [2]事件类型 [3]事件目标[4]当前元素[5]事件冒泡[6]默认行为[7]命名空间[8]返回值[9]键值 前面的话 在触发DOM上的某个事件时,会产生一个事件对象event, ...
- 深入学习jQuery事件绑定
× 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...
- jquery 事件冒泡的介绍以及如何阻止事件冒泡
在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级 ...
- jQuery源代码学习之九—jQuery事件模块
jQuery事件系统并没有将事件坚挺函数直接绑定在DOM元素上,而是基于事件缓存模块来管理监听函数的. 二.jQuery事件模块的代码结构 //定义了一些正则 // // //jQuery事件对象 j ...
随机推荐
- 20155227 2016-2017-2 《Java程序设计》第六周学习总结
20155227 2016-2017-2 <Java程序设计>第六周学习总结 教材学习内容总结 InputStream与OutputStream 串流设计 流(Stream)是对「输入输出 ...
- 【LOJ121】「离线可过」动态图连通性
[LOJ121]「离线可过」动态图连通性 题面 LOJ 题解 线段树分治的经典应用 可以发现每个边出现的时间是一个区间 而我们每个询问是一个点 所以我们将所有边的区间打到一颗线段树上面去 询问每个叶子 ...
- OpenStack入门篇(一)之云计算的概念
1.云计算 云计算是一种按使用量付费的模式,这种模式提供可用的.便捷的.按需的网络访问, 进入可配置的计算资源共享池(资源包括网络,服务器,存储,应用软件,服务),这些资源能够被快速提供,只需投入很少 ...
- WPF DataGridTable
由于项目要显示表头合并,而数据源列随时变更,又不想重复的画表格,就实现动态数据(dynamic)绑定和配置数据列模板的方式 编辑DataGridColumnHeader样式实现表头合并:效果如下 实现 ...
- ABP中module-zero快速集成微信用户认证
https://personball.com/abp/2019/01/01/introduce-abp-module-zero-external-authenticate
- meta标签的常见用法
一.定义和用法 <meta> 标签始终位于 head 元素中.<meta> 元素可提供有关页面的元信息(meta-information),元数据不会显示在页面上,但是对于机器 ...
- 使用PHP写ajax接口
使用PHP写ajax接口 之前有学过php都是前后端没有分离的,所以也想去了解后端是怎么写出ajax接口的,可能问了别人或者上网找了很多资料都很有有点懵,或者说直接用TP或者lavarel这些后端框架 ...
- Egret入门(三)--创建HelloWorld项目(4.0-使用Egret Wing)
准备 编辑器: Egret Wing3(4.0.3) 需要下载安装 语言: TepyScript(JS的超集,参考手册http://bbs.egret.com/thread-1441-1-1.html ...
- 微信 msg_sec_check接口PHP 调用
$checkContent = '要检测的内容'; $url = 'https://api.weixin.qq.com/wxa/msg_sec_check?access_token='. $res[& ...
- LibLas学习笔记
LibLas学习笔记 las 什么是Las格式 LAS文件格式是数据用户之间交换三维点云数据的公共文件格式. 虽然这种格式主要用于交换激光雷达点云数据,但是它支持交换任何三维的x.y.z 数组. 这 ...