第4章 jQuery的事件和动画(1)——事件篇
jQuery扩展了JavaScript的基本事件处理机制,极大增强了事件处理能力
一. jQuery的事件
1. $(document).ready(function(){})加载方式
(1)执行时机
1
|
$(window).load( function (){}) |
(2)多次使用
(3)简写
2. 事件的绑定——bind方法。
某个元素需要绑定一个事件时,需要bind方法。
1
|
bind(type,[.data],fn); |
bind方法三个参数:
第一个是事件类型(包括blur、focus、load、resize.....)——JavaScript的事件把on去掉就是jQuery的事件
(1)效果
【例4.1】在一个FAQ中单击标题显示内容。
1
2
3
4
5
6
7
8
|
< div id = "panel" > < h5 class = "head" >bind(type,[data],fn)意味着什么?</ h5 > < div class = "content" > < p >< strong >type:</ strong > 含有一个或多个事件类型的字符串,由空格分隔多个事件。比如"click"或"submit",还可以是自定义事件名。</ p > < p >< strong >data:</ strong >作为event.data属性值传递给事件对象的额外数据对象</ p > < p >< strong >fn:</ strong >绑定到每个匹配元素的事件上面的处理函数</ p > </ div > </ div > |
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
*{ margin:0; padding:0; } #panel{ width: 600px; border:1px solid #ccc; margin: 50px auto; } h5{ line-height: 40px; font-size: 20px; background: rgb(123,192,244); padding-left: 10px; } .content{ display: none; padding: 10px; } |
jq
1
2
3
4
5
6
7
8
9
10
11
|
$(document).ready( function (){ var bShow= false ; $( '#panel h5.head' ).bind( 'click' , function (){ if (bShow== false ){ $( '.content' ).show(); } else { $( '.content' ).hide(); } bShow=!bShow; }) }) |
(2)加强效果
上一段jq代码用了一个布尔值来实现点击显示隐藏。在jq中有自己的办法is(
':visible'
)
。同时让内容换成next()函数。
1
2
3
4
5
6
7
8
9
|
$(document).ready( function (){ $( '#panel h5.head' ).bind( 'click' , function (){ if ($( this ).next().is( ':visible' )){ $( this ).next().hide(); } else { $( this ).next().show(); } }) }) |
(3)改变绑定事件的类型。
例4.1中,运用的是click点击事件,同样可以换成其它。比如mouseover/mouseout。
(4)简写
前面前面章节的案例中已经用过简写,诸如xxx.bind(事件,function(){})都可以简写为
1
2
3
|
xxx.事件( function (){ do sth }) |
唯一的区别就是代码量。
3.合成事件
hover和toggle——后者在1.8+版本不再支持。
(1)hover()方法
hover(fn1,fn2)
hover用于模拟鼠标悬停/离开的过程,悬停时触发fn1,离开时触发fn2。如果我想把例4.1的代码改写成悬停离开的形式,可以使用hover
1
2
3
4
5
6
7
8
9
|
$(document).ready( function (){ $( '#panel h5.head' ).hover( function (){ $( this ).next().show(); }, function (){ $( this ).next().hide(); } ) }) |
hover的目标不是替代mouseover和mouseout。hover是指分别当鼠标指针进入和离开元素时被执行的事件相当于mouseenter+mouseleave。而mouseover鼠标进入某个元素或其子元素时触发。
(2)toggle()方法(已废弃,稍微了解下)
toggle(fn1,fn2,fn3....)
第一次单击触发fn1,第二次触发fn2...
4. 事件对象的属性
jq引入也event参数————它其实是一个只有事件处理函数才能访问的事件对象。函数执行完毕后,event将被销毁。
(1)event.type——可以获取事件的类型
(2)event.preventDefault()方法—阻止默认行为
jq提供了preventDefaut方法。
表单是阻止默认行为最多的地方之一。
1
2
3
4
|
用户名:< input type = "text" name = "user" /> 密码:< input type = "password" name = "pass" /> < input type = "submit" value = "提交" /> |
这里的代码中,点击提交按钮,就会跳转到form预定的网址。我们需要在用户名和密码为空的时候,阻止跳转。
1
2
3
4
5
6
7
8
|
$( function (){ $( ':submit' ).click( function (event){ if ($( '#form1 :text' ).val()== '' ||$( '#form1 :password' ).val()== '' ){ alert( '用户名或密码不得为空!' ); event.preventDefault(); } }) }) |
这二者如果要同时进行,或者不影响彼此的话,可以return false。
(3)event.stopPropagation()方法———阻止事件冒泡
理解事件冒泡
简单地说就是多个有直系从属关系的对象响应同一个事件。子集发生事件后不断往父级传递。最具体的对象首先被响应。事件冒泡给实际应用带来麻烦。
阻止事件冒泡在js中运用的是cancelBubble方法。通过引入event——
1
2
|
var oEvent=ev||event; oEvent.cancelBubble= true ; |
在jQuery中,提供了stopPropagation。
1
|
event.sotpPropagation(); |
(4)event.target——获取触发事件的元素
比如一个超链接中href指向一个网址。以此对象采用$('a').target得到的是这个网址。
(5)event.relatedTarget
(6)event.pageX和event.pageY
获取鼠标相对于页面的x和y坐标。在js中通常是event.clientX和event.clientY。注意:如果有滚动条,还需要加上滚动条的高度。这里的event可以理解为就是光标。
(7)event.which
有三个值1,2,3,分别代表获取鼠标点击的左中右键。
(8)event.metaKey
获取键盘事件中的ctrl键。
5. 如何移除事件——unbind()方法
1
|
unbind(type,[data|fn]]) |
第一个参数type表示事件类型,第二个表示要移除的函数。
如果什么参数都不写,直接移除所有的绑定事件。假设绑定的点击事件有fn1和fn2两个函数,如下:
1
|
$( '#btn' ).unbind( 'click' ,fn1); |
按钮btn在被点击时,不再执行名字为fn1的函数。fn2依然在点击时继续执行。
对于仅仅执行一次的函数,可以不用bind方法来绑定。而用one()方法。
1
|
$( '#btn' ).one( 'click' ,fn1); |
btn在被点一次之后,再怎么点都不会执行fn1了。
6.模拟操作————trigger()方法
(1)trigger()方法介绍
常见的比如当用户鼠标划过某处就加载页面时弹出第二个页面,或者按下enter执行发送信息。就调用了模拟click的方法。
1
|
$( '#btn' ).trigger( 'click' ); |
按钮btn在没被点击时(也许页面加载同时),就发生了click事件——很讨厌对吧。
(2)自定义事件
trigger()方法相当有意思。你可以自行DIY一个事件,然后用trigger()执行。
1
2
|
$( '#btn' ).bind( 'haha' , function (){...}); $( '#btn' ).trigger( 'haha' ); |
(3)参数的传递
1
|
<input id= "btn" type= "button" value= "haha" /> |
1
2
3
4
5
6
|
$( function (){ $( '#btn' ).bind( 'haha' , function (event,a,b){ $( 'html' ).append( '<p>两者之和是:' +(a+b)+ '</p>' ) }); $( '#btn' ).trigger( 'haha' ,[1,1]); }) |
显示结果:
这跟调用函数又好像没什么区别了。
(4)默认行为
trigger可以模拟操作。得到不一样的体验。设想一个场景,当你在web聊天室发送消息,可以通过ctrl+enter模拟点击发送按钮。
但是有个问题,比如说使用focus事件,会导致焦点移动到事件对象处——这时需要阻止。应采用
triggerHandler()方法,用法和trigger一样。
7.bind的其它用法
(1)多个事件类型绑定:
1
2
3
4
5
|
$( function (){ $( '#btn' ).bind( 'mouseover mouseout' , function (event,a,b){ $( this ).toggleClass( 'hover' ) }); }) |
也就是说,相同的函数,不同的事件,可以写在一起。
(2)命名空间
也就是前面说的DIY一个事件,其实可以作为命名空间。
1
2
3
4
5
6
7
8
|
$( function (){ $( '#btn1' ).bind( 'click.haha dbclick' , function (){ do something }); $( '#btn2' ).click( function (){ $( '#btn1' ).unbind( '.haha' ) }); }) |
以上代码只取消了click事件(通过命名空间)但不取消dbclick事件。
(3)相同事件,不同命名空间
把上面的代码改一改;
1
2
3
4
5
6
7
|
$( function (){ $( '#btn1' ).bind( 'click.haha' ,fn1) .bind( 'click' ,fn2); $( '#btn2' ).click( function (){ $( '#btn1' ).trigger( 'click!' ); }); }) |
如果单击btn1,click和click.haha两个函数都发生。单击btn2,只发生没有命名空间的click事件。因此fn1不会发生。
第4章 jQuery的事件和动画(1)——事件篇的更多相关文章
- 第三章 jQuery中的事件与动画
第三章jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.wind ...
- 第三章 jQuery事件和动画
1.什么是事件:事件指的是用于对网页操作的时候,网页做出的一个回应. 2.JQuery中的事件:JQuery事件是对JavaScript事件的封装,常用事件的分类如下:(1)基础事件:window事件 ...
- JQuery制作网页—— 第七章 jQuery中的事件与动画
1. jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件 ...
- 第4章 jQuery中的事件和动画
4.1 jQuery中的事件 4.1.1 加载DOM jQuery就是用 `$(document).ready()方法来代替传统JavaScript的window.onload方法的. 1.执行时机 ...
- 第3章 jquery中的事件和动画
一,jquery中的事件 (1).执行时机 $(document).ready()和window.onload方法有相似的功能,但是在执行时机方面有区别,windwo.onload在网页中所有的元素包 ...
- 第七章 jQuery中的事件与动画
事件的分类 基础事件: 鼠标事件 键盘事件 window事件 表单事件 复合事件: 鼠标光标悬停 鼠标连续点击 基础事件: 实例: mouseenter()和mouseover()用法的区别: mou ...
- jQuery中的事件和动画——《锋利的jQuery》(第2版)读书笔记2
第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){ // 编写代码... }); 可以简写成: $(function( ...
- jQuery_第五章_事件和动画
Jquery中的事件与动画 一.window.onload和$(document).read()的细微差别 (1)执行时机 window.onload:所有元素(包括元素的所有关联文件)完全加载到浏览 ...
- jQuery系列 第五章 jQuery框架动画特效
第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...
随机推荐
- 美发屋App-业余爱好
出于个人爱好, 自行设计了一款APP,由于时间有限,APP目前只做了3天,现大四,急求一份实习工作,月薪3K左右即可! 软件UI设计到编码,全部又我一人完成,所以工作量比较大 底部采用·Fragmen ...
- git 高级命令
git bisect 运行git bisect 通常是为了找出某个导致版本库产生倒退或bug的特殊提交 例如:你的版本库已经从一个已知的"好"状态过渡到一个已知的"坏&q ...
- XML与 HTML
XML是E4X中定义的一个重要的新类型,侧重于如何结构化描述信息,用它来表现XML结构中任何独立的部分,是一种用于标记电子文件使其具有结构性的标记语言. XML语言被设计用来描述数据,它的焦点是数据的 ...
- javaweb写的在线聊天应用
写这个玩意儿就是想练练手, 用户需要登陆才能在线聊天,不要依赖数据库, 不需要数据库的操作, 所有的数据都是保存在内存中, 如果服务器一旦重启,数据就没有了: 登录界面: 聊天界面: 左侧是在线的用户 ...
- MVVM: 通过 Binding 或 x:Bind 结合 Command 实现,通过 ButtonBase 触发命令
介绍背水一战 Windows 10 之 MVVM(Model-View-ViewModel) 通过 Binding 或 x:Bind 结合 Command 实现,通过 ButtonBase 触发命令 ...
- 60.Android通用流行框架大全
转载:https://segmentfault.com/a/1190000005073746 Android通用流行框架大全 1. 缓存 名称 描述 DiskLruCache Java实现基于LRU的 ...
- [poj2406] Power Strings
Description 对于两个字符串a,b,定义a×b为将b接到a的末尾组成新的字符串.对于一个字符串a的幂运算的定义与我们在数学中的定义一样:a0=''(空字符),an+1=an×a. Input ...
- 【poj2122】 Optimal Milking
http://poj.org/problem?id=2112 (题目链接) 题意 有K个能挤M头奶牛的挤奶机和C头奶牛,告诉一些挤奶机和奶牛间距离,求最优分配方案使最大距离最小. Solution 先 ...
- Security configuration of SSH login entry - enterprise security practice
catalog . 引言 . 修改ssh端口 . 禁用root远程ssh登录 . 只使用SSH v2 . 限制用户的SSH访问 . 禁用.rhosts文件 . 禁用基于主机的身份验证 . 基于公私钥的 ...
- Discuz! x3.1 /utility/convert/index.php Code Execution Vul
catalog . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 Discuz! x3.1的插件/utility/convert/inde ...