锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)


Posted in Javascript onMarch 24, 2010

一、事件

1 加载DOM

$(document).ready(function(){//...}) 
DOM加载完毕后执行,在可重复使用上区别于window.onload=function(){//...} 
$(window).load(function(){//...}) 
window内所有对象加载完毕后执行,几等同window.onload=function(){//...}。也可针对selector使用此方法

另:$(document).ready(function(){//...})的简写方式:$(function(){//...})或$().ready(function(){//...})

2 事件绑定

$("selector").bind() 
为元素绑定事件,格式:bind(type[,data],fn),可多次调用 
type事件类型包括:blur, focus, load, resize, scroll, unload, click, dbclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error或者自定义事件 
简写方法:$("selector").bind(type,function(){//...})等价于$("selector").type(function(){//...}) 
可传递data参数以供unbind特定事件之用 
$("selector").is() 
判断方法

(外:方法多次重用可定义局部变量 var $x = $("selector").方法())

3 合成事件

$("selector").hover(enter,leave) 
模拟光标悬停事件,鼠标进入时触发enter事件,鼠标移出时触发leave事件(代替的是bind("mouseenter")和bind("mouseleave")) 
使用方法:$("selector").hover(function(){//enter case...},function(){//leave case...}) 
(外:IE6不支持除a标签外css的:hover伪类的问题——可用此hover事件作为hack来解决) 
$("selector").toggle(fn1,fn2,...,fnN) 
模拟鼠标连续单击事件,按照单击顺序按次序循环执行事件 
使用方法:$("selector").toggle(function(){//case1...},function(){//case2...},...,function(){//caseN}) 
特殊用法:切换元素可见状态,如元素隐藏,单击toggle触发元素可使之可见;元素可见,单击toggle触发元素使之隐藏

P108例:
<script> 
$(function(){ 
$("panel h5.head").toggle(function(){ 
$(this).next().toggle(); 
},function(){ 
$(this).next().toggle(); 
}) 
}) 
</script>

4 事件冒泡

$("selector").bind("type",function(event){//event:事件对象...})
event事件对象:只有此函数内部才能访问到,事件处理函数执行完毕后,事件对象就被销毁
event.stopPropagation()
在函数最后用来停止事件冒泡
P111例:

<script> 
$('span').bind("click",function(event){ 
var txt = $('msg').html() + "<p>内层span元素被单击</p>"; 
$('#msg').html(txt); 
event.stopPropagation(); 
}) 
</script> 
event.preventDefault()

阻止元素默认行为
例:验证表单(input为空阻止提交并提示)
<script> 
$(function(){ 
$("#submit").bind("click",function(event){ 
var username=$("#username").val(); 
if(username==""){ 
$("#msg").html("<p> 文本框的值不能为空</p>"); 
event.preventDefault(); 
} 
}); 
}) 
</script>

return false;
同时对对象事件停止冒泡和默认行为,等价于同时调用stopPrapagation()和preventDefault()
(外:事件捕获和事件冒泡是相反的过程,事件捕获是从DOM顶端往下开始触发,jQuery不支持,故本书从略)

5 事件对象的属性

event.type
获取事件类型
例:

<script> 
$("a").click(function(event){ 
alert(event.type); 
return false; 
}) 
</script>

上面返回"click"
event.target
获取触发事件的元素
例:
<script> 
$("a[href=http://baidu.com]").click(function(){ 
alert(event.target.href); 
return false; 
}) 
</script>

上面返回"http://baidu.com"
event.relatedTarget
访问事件相关元素
event.pageX / event.pageY
获取光标相对于页面的x坐标和y坐标
event.which
在鼠标单击事件中获取鼠标的左、中、右键;在键盘事件中获取键盘的按键(返回值1=鼠标左键;2=鼠标中键;3=鼠标右键)
event.metaKey
键盘事件中获取<ctrl>按键
event.originalEvent
指向原始的事件对象

6 移除事件

$("selector").unbind()
移除元素上的事件,格式:$("selector").unbind([type][,data]);(如果没有参数,则删除所有绑定的事件;如果提供了事件类型参数,则只删除该类型的绑定事件;如果把在绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除)
例:

<script> 
$(function(){ 
$('#btn').bind("click",myFun1=function(){ //先绑定 
$('#test').append("..."); 
}); 
}) 
</script> 
<script> 
$('#delOne').click(function(){ 
$('#btn').unbind("click",myFun1); //后删除 
}) 
</script>

$("selector").one()
绑定一个触发一次即被删除的事件,格式:$("selector").one(type[,data],fn);

7 模拟操作

$("selector").trigger("type");
模拟用户交互动作,简写方法:$("#selector").type(); 格式:$("selector").trigger(type[,data])
例:用单击替代鼠标经过

<script> 
$("selector").mouseover(function{//...}); 
$("selector2").click(function(){ 
$("selector").trigger("mouseover"); //或者$("selector").mouseover() 
}) 
</script>

自定义事件的例子
<script> 
$("selector").bind("myClick",function(){//...}); //绑定自定义事件 
$("selector").trigger("myClick"); //触发自定义事件 
</script> 
$("selector").trigger(type[,data])

可以数组形式传递参数给回调函数
P119例:
<script> 
$("#btn").bind("myClick",function(event,message1,message2){ 
$("#test").append("<p>"+message1+message2+"</p>"); 
}); 
$("#btn").trigger("myClick", ["我的自定义","事件"]); 
</script>

8 其他用法

$("selector").bind("type1 type2",function(){//...})
一次性绑定多个事件类型
P119值得一看的例子

<script> 
$(function(){ 
$("div").bind("mouseover mouseout",function(){ 
$(this).toggleClass("over"); //切换class 
}); 
}) 
</script>

$("selector").bind("type.命名空间",function(){//...})
为多个事件添加事件命名空间,便于管理,删除命名空间后,命名空间下的事件同时删除,如:
$("div").bind("mouseover.plugin",function(){//...})
$("div").bind("click.plugin",function(){//...})
$("div").unbind(".plugin");
$("selector").trigger("type!")
"!"用来选择匹配不包含在命名空间中的type方法
Javascript 相关文章推荐
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
May 25 Javascript
jQuery function的正确书写方法
Aug 02 Javascript
Ext GridPanel加载完数据后进行操作示例代码
Jun 17 Javascript
javascript的tab切换原理与效果实现方法
Jan 10 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
Sep 19 Javascript
浅谈 Vue v-model指令的实现原理
Jun 08 Javascript
JS实现字符串翻转的方法分析
Aug 31 Javascript
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
微信小程序实现消息框弹出动画
Apr 18 Javascript
layui表格 列自动适应大小失效的解决方法
Sep 06 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
Sep 06 Javascript
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
jQuery AJAX 调用WebService实现代码
Mar 24 #Javascript
jquery 仿QQ校友的DIV模拟窗口效果源码
Mar 24 #Javascript
Javascript中Eval函数的使用
Mar 23 #Javascript
JavaScript Eval 函数使用
Mar 23 #Javascript
js本身的局限性 别让javascript做太多事
Mar 23 #Javascript
js parentElement和offsetParent之间的区别
Mar 23 #Javascript
Javascript 变量作用域 两个可能会被忽略的小特性
Mar 23 #Javascript
You might like
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
php动态添加url查询参数的方法
2015/04/14 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
JS弹出对话框返回值代码(asp.net后台)
2010/12/28 Javascript
基于jquery的点击链接插入链接内容的代码
2012/07/31 Javascript
jQuery实现3D文字特效的方法
2015/03/10 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
2015/08/12 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
利用原生的JavaScript实现简单拼图游戏
2018/11/18 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
2019/03/28 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
2019/04/17 Javascript
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
python通过get,post方式发送http请求和接收http响应的方法
2015/05/26 Python
利用pyinstaller将py文件打包为exe的方法
2018/05/14 Python
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
利用python求积分的实例
2019/07/03 Python
Python configparser模块操作代码实例
2020/06/08 Python
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
.net面试题
2015/12/22 面试题
什么是托管函数?托管函数有什么用?
2014/06/15 面试题
英文简历中的自我评价
2013/10/06 职场文书
热能动力工程毕业生自荐信
2013/11/07 职场文书
家长给老师的道歉信
2014/01/13 职场文书
迎新晚会邀请函
2014/02/01 职场文书
《油菜花开了》教学反思
2014/02/22 职场文书
生产部厂长职位说明书
2014/03/03 职场文书
领导干部群众路线教育实践活动剖析材料
2014/10/10 职场文书
幼儿园感恩节活动方案2014
2014/10/11 职场文书
财务部会计岗位职责
2015/02/03 职场文书
邮政营业员岗位职责
2015/04/14 职场文书