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. #define使用方法

    1.简单的define定义 #define MAXTIME 1000 一个简单的MAXTIME就定义好了,它代表1000,假设在程序里面写 if(i<MAXTIME){.........} 编译 ...

  2. [Effective C++ --029]为“异常安全”而努力是值得的

    假设有个class用来表现夹带背景图案的GUI菜单单,这个class用于多线程环境,所以它有个互斥器(mutex)作为并发控制用: class PrettyMenu{ public: ... void ...

  3. php生成excel或php生成csv

    一.php生成excel 使用phpexcel类文件生成 二.php生成csv <?php$action ="make";if ($action=='make'){ $fp ...

  4. 利用 Composer 完善自己的 PHP 框架(二)——发送邮件

    本教程示例代码见 https://github.com/johnlui/My-First-Framework-based-on-Composer 回顾 上一篇文章中,我们手工建造了一个简易的视图加载器 ...

  5. poj 3252 Round Numbers 【推导·排列组合】

    以sample为例子 [2,12]区间的RoundNumbers(简称RN)个数:Rn[2,12]=Rn[0,12]-Rn[0,1] 即:Rn[start,finish]=Rn[0,finish]-R ...

  6. 为Mono安装MySql连接驱动

    为Mono安装MySql连接驱动(转) 2013 年 1 月 24 日.NETmono.MySql DOTNET and Mono by default only support database c ...

  7. 基于BaseHTTPServer的简单存储服务器

    服务器代码: from BaseHTTPServer import BaseHTTPRequestHandler from BaseHTTPServer import HTTPServer impor ...

  8. JDBC的批量批量插入

    本文部分转载于:http://blog.itpub.net/29254281/viewspace-1151785/ http://www.cnblogs.com/chenjianjx/archive/ ...

  9. poj 3565 二分图最优匹配

    思路: 将ant与tree之间用距离来做权值,求最小权匹配就可以了.可以想到,如果有两条线段相交,那么将这两个线段交换一个顶点,使其不相交,其权值和一定会更小. 就像斜边永远比直角边长一样的道理. # ...

  10. chrome浏览器取消置顶的方法

    这两天在使用google chrome浏览器的时候,发现chrome被默认置顶,取消chrome默认的方法为在浏览器上按 “ALT + Space + C”,然后再重开chorme就可以了.