jQuery学习之路(3)- 事件
▓▓▓▓▓▓ 大致介绍
jQuery增加了并扩展了基本的事件处理机制,不但提供了更加优雅的事件处理语法,而且极大地增强了事件处理能力
▓▓▓▓▓▓ jQuery中的事件
▓▓▓▓▓▓ 加载DOM
在jQuery中是用$(document).ready()方法来替代JavaScript中的window.onload方法的,但是他们也有一些不同点
1、执行时机
例如我们有一个有很多图片的网页
$(document).ready()方法是在这个网页的DOM树加载完就可以执行的,而window.onload方法必须在DOM树加载完和图片都加载完才执行
如果使用jQuery我们想要在整个页面加载完在执行可以使用load()方法
下面两段代码的功能是一样的
// jQuery
$(window).load(function(){
// 代码1
});
// JavaScript
window.onload = function(){
// 代码2
};
2、多次使用
JavaScript的onload事件一次只能保存对一个函数的引用,而$(document).ready()可以保存多个
function one(){
alert('1');
} function two(){
alert('2');
} // JavaScript
window.onload = one;
window.onload = two;//只执行two() // jQuery
$(document).ready(function(){
one();
});
$(document).ready(function(){
two();
});//one() 和 two()都会执行
3、简写方式
$(document).ready(function(){});可以简写为$(function(){});
▓▓▓▓▓▓ 事件绑定
bind()函数的语法:bind(type,[.data],fn)
第一个参数是事件类型
第二个参数是可选参数,作为event.data属性值传递给事件对象的额外数据对象
第三个参数是用来绑定的处理函数
用例子来看,有两个div,第二个div隐藏,当我们点击第一个div时,第二个div显示
<div id="div1"></div>
<div id="div2"></div>
<script type="text/javascript">
$(function(){ $('#div1').bind('click',function(){
$(this).next().show();
}); });
增加功能,当点击div1时如果div2是显示的,则隐藏它,否则就显示它
$(function(){ $('#div1').bind('click',function(){ if($(this).next().is(':visible')){
$(this).next().hide();
}else{
$(this).next().show();
} }); });
简写:
$('#div1').click(function(){
if($(this).next().is(':visible')){
$(this).next().hide();
}else{
$(this).next().show();
} })
▓▓▓▓▓▓ 合成事件
1、hover()方法
用于模拟光标悬停事件。当光标移动到元素上时触发第一个函数,当光标移出元素时,会触发第二个函数
$('#div1').hover(function(){
$(this).next().show();
},function(){
$(this).next().hide();
});
2、toggle()方法
用于模拟鼠标连续单击事件,当鼠标第一次点击元素,触发第一个函数,当鼠标点击同一个函数时触发第二个函数
$('#div1').toggle(function(){
$(this).next().show();
},function(){
$(this).next().hide();
});
▓▓▓▓▓▓ 阻止事件冒泡和阻止默认行为
1、阻止事件冒泡
stopPropagation()方法
2、阻止默认行为
preventDefault()方法
注意:1、return false 在jQuery中是即阻止事件冒泡又阻止默认行为
2、jQuery不支持事件捕获
▓▓▓▓▓▓ 事件对象的属性
1、event.type
改方法的作用是获取到事件的类型
$('#div1').click(function(ev){
alert(ev.type);//click
})
2、event.target
获取到触发事件的元素
$('#div1').click(function(ev){
alert(ev.target.id);//div1
})
3、event.relatedTarget
获取相关元素
4、event.pageX和event.pageY
获取到光标相对于页面的x的坐标和y的坐标
$('#div1').click(function(ev){
alert(ev.pageX + ',' + ev.pageY);//275,181
})
5、event.which
该方法的作用是在鼠标单击事件中获取到鼠标的左、中、右键;在键盘事件中获取键盘的按键
$('#div1').click(function(ev){
alert(ev.which);//1是鼠标左键,2是鼠标中见,3是鼠标右键
})
▓▓▓▓▓▓ 移除事件
unbind()方法语法: unbind([type],[data]);
第1个参数是事件类型,第2个参数是将要移除的函数
看一个例子,为div1绑定如下事件
$('#div1').bind('click',function(){
alert('1');
}).bind('click',function(){
alert('2');
}).bind('mouseover',function(){
alert('3');
})
1、如果没有参数,则删除所有绑定的事件
$('#div1').unbind();//删除所有事件
2、如果提供了事件类型作为参数,则只删除该类型的绑定事件
$('#div1').unbind('mouseover');//删除mouseover事件
3、如果把绑定时传递的处理函数作为第2个参数,则只有这个特定的时间处理函数会被删除
▓▓▓▓▓▓ 模拟操作
1、常用模拟
在jQuery中可以使用trigger()方法完成模拟操作,例如可以使用下面的代码来触发id为btn的按钮的click事件
$('#btn').trigger('click');
2、触发自定义事件
trigger()方法不仅能触发浏览器支持的具有相同名称的事件,也可以触发自定义名称的事件。
$('#btn').bind('myclick',function(){
alert('1');
});
$('#btn').trigger('myclick');
3、传递数据
$('#btn').bind('myclick',function(event,message1,message2){
alert(message1 + message2);
});
$('#btn').trigger('myclick',["1","2"]);
4、执行默认操作
$('input').trigger('focus');
以上代码会触发input元素的focus事件,也会使<input>元素本身得到焦点
如果只想触发<input>元素上绑定的特定事件,同时取消浏览器对此事件的默认操作可以使用triggerHandler()方法
▓▓▓▓▓▓ 其他用法
添加事件命名空间,便于管理
例如可以把元素绑定的多个事件类型用命名空间规范起来
$('div').bind('click.plugin',function(){
alert('1');
});
$('div').bind('mouseover.plugin',function(){
alert('2');
});
$('div').bind('dbclick.plugin',function(){
alert('3');
});
$('button').click(function(){
$('div').unbind('.plugin');
})
jQuery学习之路(3)- 事件的更多相关文章
- jQuery学习之路(1)-选择器
▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...
- jquery学习笔记(三):事件和应用
内容来自[汇智网]jquery学习课程 3.1 页面加载事件 在jQuery中页面加载事件是ready().ready()事件类似于就JavaScript中的onLoad()事件,但前者只要页面的DO ...
- jQuery学习小结1-CSS操作+事件
一.DOM对象和jQuery 对象互换 1.jQuery对象 就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的,其可以使用jQuery里的方法.比如: $(&quo ...
- jQuery 学习之路(4):事件
一.文档载入事件 二.事件绑定 三.事件对象 四.浏览器事件 五.表单事件 六.键盘事件 七.鼠标事件
- jQuery学习之路(8)- 表单验证插件-Validation
▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...
- jQuery学习之路(7)- 用原生JavaScript实现jQuery的某些简单功能
▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...
- jQuery 学习之路(1):引子
一.主流 javascript 库 除 jQuery 外,还有 Prototype.Dojo.YUI.ExtJS.MooTools ,其中 Prototype 较老,结构设计较为松散,ExtJS 界面 ...
- jQuery学习之路(6)- 简单的表格应用
▓▓▓▓▓▓ 大致介绍 在CSS技术之前,网页的布局基本都是依靠表格制作,当有了CSS之后,表格就被很多设计师所抛弃,但是表格也有他的用武之地,比如数据列表,下面以表格中常见的几个应用来加深对jQue ...
- jQuery学习之路(2)-DOM操作
▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看 ...
随机推荐
- .NET Core全新路线图
.NET Core / ASP.NET Core 1 RTM发布两周后,社区也很积极,收到了非常多的反馈,上周五微软的scott Hunter 在dotnet团队官方博客上发布了.NET Core全新 ...
- Linux CentOS 配置JDK环境
一.下载JDK 下载JDK的方式有两种: 1.Linux中使用wget下载 1.使用命令安装wget yum install wget 2.下载 wget 'http://download.oracl ...
- 渗透测试工具BurpSuite做网站的安全测试(基础版)
渗透测试工具BurpSuite做网站的安全测试(基础版) 版权声明:本文为博主原创文章,未经博主允许不得转载. 学习网址: https://t0data.gitbooks.io/burpsuite/c ...
- Python列表去重
标题有语病,其实是这样的: 假设有两个列表 : L1 = [1,2,3,4] ; L2 = [1,2,5,6] 然后去掉L1中包含的L2的元素 直接这样当然是不行的: def removeExists ...
- python程序生成平均脸
简介 项目代码https://github.com/LiuRoy/pokerface 原文链接http://www.cnblogs.com/lrysjtu/p/5492547.html 写这个项目的本 ...
- 2013 Asia Changsha Regional Contest---Josephina and RPG(DP)
题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=4800 Problem Description A role-playing game (RPG and ...
- jquery.each()
$(selector).each(function(index,element)) index - 选择器的 index 位置 element - 当前的元素(也可使用 "this" ...
- 深入理解css3中nth-child和 nth-of-type的区别
在css3中有两个新的选择器可以选择父元素下对应的子元素,一个是:nth-child 另一个是:nth-of-type. 但是它们到底有什么区别呢? 其实区别很简单::nth-of-type为什么要叫 ...
- Android MVP+Retrofit+RxJava实践小结
关于MVP.Retrofit.RxJava,之前已经分别做了分享,如果您还没有阅读过,可以猛戳: 1.Android MVP 实例 2.Android Retrofit 2.0使用 3.RxJava ...
- maven的pom.xml关系依赖书写顺序
今天遇到了一个情况,以前代码编译没有问题,升级了hbase客户端phoenix驱动,又调整了thrift的关系依赖的位置,放到了这个驱动后面. 如下: 导致了一个thrift接口类编译报错: 检查这个 ...