1 注册事件的触发时机
在jquery中,$(window).load(function(){})
注册在window下的事件等待页面所有资源加载完成(包括dome树的加载和图片视频的资源的加载)
$(document).ready(function(){})
注册在document下的事件等待DOM树加载完成立即执行,不需要等待其他资源的加载
注册在元素上的事件,则会再元素内容加载完成后触发。
2 多次使用
window.onload=function(){}事件只可以挂载一次,挂载多次事件,则会后面一次事件覆盖前面一次事件
$(document).ready(function(){})事件可以多次挂载
3 合成事件(hover())
.hover(enter,leave);
4 事件对象
由事件源开始先祖先元素冒泡,依次触发祖先元素的该相同事件;
①jquery事件对象;event
②jquery事件源;event.target;
jquery对其进行了封装,避免了各浏览器的兼容性
③js事件源:e.srcElement;(IE)
e.target;
e.currentTarget;④停止事件冒泡
e.stopPropagation()
⑤阻止事件的默认行为
e.preventDefault()
⑥jquery中同时停止冒泡和阻止默认行为
return flase
⑦事件对象的类型;
event.type;
⑧event.relatedTarget相当于IE下的fromElement/toElement
常用于onmouseout和onmouseover事件中,相当于,event.target;
jquery对事件做了封装;能兼容各种浏览器
⑨取得光标坐标
event.pageX/event.pageY获取页面光标相对于页面的X、Y坐标;
jquery封装了IE下的event.x/event.y和FF下的event.PageX/event.PageY;和页面有滚动条时的情况;能兼容各种浏览器;
鼠标事件
A:event.which
在鼠标单击和按下键盘时获取键值。
B : event.metaKey/event.shiftKey/event.altKey
metaKey为jquery封装的ctrl按键
 
5 移除事件
①绑定事件
$("#id").bind("click",function(){}).bind("click",function()){}
使用此方法可以连续绑定多个相同事件
②移除事件
$("#id").unbind("click");使用该方法可以移除该id上绑定的所有click事件;如果没有参数,则移除该id上所有事件;
③绑定带有名称的事件函数;
$("#id").bind("click",myFun=function(){})
④移除某个元素上的某类事件的某一个事件函数;
$("#id").unbind("click",myFun)
⑤对于只触发一次就解除绑定的事件,使用one方法代替bing方法
6模拟操作
① 在某一个函数执行结束后,模拟用户的操作;
$(function(){
$("#btn").trigger("click");
})
以上为在DOM树加载完成后模拟用操作了btn元素的click事件
②触发自定义事件
A:自定义事件;
$("#btn").bind("myClick",function(){});
B : 触发自定义事件
$("#btn").trigger("myClick")
C : 触发事件后不执行默认行为
$("#btn").triggerHandler("focus");
D :为元素绑定多个事件
$("div").bind("mouseover mouseout",function(){})
在鼠标移入移除时都会触发该事件
7 自定义动画animate()
show(),hide();会修改元素的宽高,透明度;
fadeOut(),fadeIn()会修改元素的不透明度
slideDown(),slideUp()会修改元素的高度
除了这些还可以用animate()方法自定义动画;
可以通过对animate的宽高,位置(left/right),透明度(opacity)(0~1)的改变 来设置动画,还可以通过链式调用对动画进行排队;
 
 

锋利的jquery-事件和动画的更多相关文章

  1. 锋利的JQuery —— 事件和动画

    大图猛戳

  2. jQuery事件以及动画

    jQuery事件以及动画 一.jQuery事件 加载DOM 在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件. 在常规的 JavaScript 代码中, 通常使用 wi ...

  3. jQuery事件与动画

    一 事件 1 加载DOM事件 $(document).ready():执行时机:DOM元素准备就绪  执行次数:多次  简单写法:原:$(document).ready(function(){})  ...

  4. JQuery 事件与动画

    第一大部分 提纲 事件与动画 一.事件 1.在JavaScript语法中的事件,把onxxxxx中的on去掉,就是JQuery中的事件. onclick - click ondblclick - db ...

  5. 第三章 jQuery事件和动画

    1.什么是事件:事件指的是用于对网页操作的时候,网页做出的一个回应. 2.JQuery中的事件:JQuery事件是对JavaScript事件的封装,常用事件的分类如下:(1)基础事件:window事件 ...

  6. 锋利的jquery 事件 动画

    事件 $(function){} bind(type, [data],function) 事件类型, 传递参数, 处理函数 hover(enter, leave) 光标停留时,函数enter,离开时函 ...

  7. 锋利的jQuery--jQuery事件,动画(读书笔记二)

    1.注意$(document).ready()方法和window.onload方法之间的细微区别 $(document).ready()在DOM树构建完成就会执行,而window.onload是在DO ...

  8. JavaScript jQuery 事件、动画、扩展

    事件 因为JavaScript在浏览器中以单线程模式运行,页面加载后,一旦页面上所有的JavaScript代码被执行完后,就只能依赖触发事件来执行JavaScript代码. 浏览器在接收到用户的鼠标或 ...

  9. 初学jQuery之jQuery事件与动画

    今天我们就谈谈jquery中的事件和简单动画吧,它们毕竟基础是进阶华丽的根本!! 1.事件 1.window事件 ready   准备就绪 2.鼠标事件 方法                      ...

  10. 锋利的jQuery事件

    一:事件 1.鼠标事件 (1)$()是$(document)的简写,默认参数是document. $(function(){}是$(document).ready(function(){})的简写. ...

随机推荐

  1. Ajax条用WebService 5星级

    转:http://www.cnblogs.com/frozenzhang/p/ajax.html 随笔- 2 文章- 0 评论- 5 $.ajax()调用webservice   常规请求基本格式 [ ...

  2. Modified LCS

    Input Output Sample Input 3 5 3 4 15 3 1 10 2 2 7 3 3 100 1 1 100 1 2 Sample Output 4 3 50超时代码,因为K很大 ...

  3. IOS微信中看文章跳转页面后点击返回无效

    经过查找原因发现,下面两种链接,链接1返回不了,链接2可以返回. 链接1:http://mp.weixin.qq.com/s?__biz=MzA5NDY5MzcyNA==&mid=265089 ...

  4. 用bat使用date和time命令

    D:\>date /T 2010-12-10 星期五 D:\>echo %date:~0,10% 2010-12-10 date:命令(别忘记date后面有个冒号) ~0:从索引0开始取内 ...

  5. 为什么Java byte 类型的取值范围是-128~127 (转)

    概念:负数的补码是该 数 绝 对 值 的 原 码 按 位 取 反 ,然 后 对 整个数 加 1 步骤: 1.确定byte是1个字节,也就是8位 2.最大的应该是0111 1111,因为第一位是符号位, ...

  6. Linux 命令 - scp: 远程文件拷贝

    scp 与普通的文件复制命令 cp 类似,而它们之间最大的差别在于 scp 命令的源或目标文件是远程文件. 命令格式 scp [options] [[user@]host1:]file1 ... [[ ...

  7. Linux 命令 - curl: transfer a URL

    命令格式 curl [options] [URL...] 命令参数 -0, --http1.0 强制使用 HTTP/1.0 发送请求 -A, --user-agent 指定用户代理 -b/--cook ...

  8. .net 获取网站根目录总结

    一.获取网站根目录的方法有几种如: Server.MapPath(Request.ServerVariables["PATH_INFO"]) //页面详细路 Server.MapP ...

  9. Is it possible to change the iPhone device name programmatically?

    今天刚好方案公司谈到一个需求方案,要制作一个dvr连接手机,手机能上网的功能. 为了简化,让dvr开机轮询,连接某个iphone设备名字特征的手机,希望在app中提供一个输入框,可以 按dvr可以识别 ...

  10. 百度手机号码归属地查询api与返回json处理

    前天无意间在网上看到百度ApiStore,然后好奇就进去看了看.正好最近在某博培训Android,刚学到java基础.抱着锻炼的心态选择手机号码归属地查询api进行练手.api地址 (http://a ...