锋利的jQuery总结（三）

第四章，jQuery中的事件和动画

24. $(document).ready(function(){}) 简写 $(function(){})

25. 事件绑定

bind( type [ ,data],fn);

第一个参数为事件类型，e.g. blurfocus click load……

第二个参数为可选参数，作为event.data属性值传递给事件对象的额外参数

第三个参数为绑定的处理函数

简写绑定函数：$.bind(“click”,function(){}) ----- $.click(function(){})

26. 合成事件

i hover() hover(enter,leave); 模拟光标悬停事件

$.hover(function(){ } , function(){ })

ii toggle() toggle(fn1,fn2,…fnN); 模拟鼠标连续单击事件

toggle()在jQuery中还有另外一个作用：切换元素可见状态 $.toggle();

27. 事件冒泡

i 事件对象（防止事件冒泡到上一级）

$(“element”).bind(“click”,function(event){ });

ii 停止事件冒泡 stopPropagation()

iii 阻止默认行为 preventDefault()

如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false

Returnfalse;

28. 事件对象的属性

event.type 事件类型

event.preventDefault(); event.stopPropagation()

event.target 获取触发事件的元素 event.relatedTarget 相关元素

event.pageX event.pageY 获取光标相对于页面的x坐标和y坐标

event.which 在鼠标点击事件中获取鼠标左（1），中（2），右键（3）

event.metaKey 在键盘事件中获取ctrl键

29. 移除事件 unbind([type],[data]);

第一个参数为事件类型，第二个参数为将要移除的函数

i 如果没有参数，则删除所有绑定事件

ii 如果提供了事件类型作为参数，则只删除该类型的绑定事件

iii 两个参数都有时，只有这个特定的事件处理函数会被删除

30. 只需要触发一次的事件 one( type,[data],fn);

31. 模拟操作

i 常用模拟 $.trigger(“click”)

ii 触发自定义事件 $.trigger(“myClick”)

iii 传递数据 $.tigger(“myClick”,[“自定义”，“事件”])；

iv 如果只想触发绑定的focus事件，而不想执行浏览器默认操作，triggerHandler()

32. 其他方法

i 为元素一次性绑定多个事件，

$(“div”).bind(“mouseovermouseout”,function(){ $(this).toggleClass(“over”)});

ii 添加事件命名空间

$(“div”).bind(“mouseover.plugin”,function(){$(this).toggleClass(“over”)}); 【Page.119】

33. show() show(“slow / normal/fast”) show(“1000”)

hide() hide(“slow / normal/fast”) hide(“1000”)

34. fadeIn() 升高不透明度, fadeOut()降低不透明度

35. slideUp()元素由下到上缩短隐藏， slideDown()元素由上至下延伸显示

36. 自定义动画方法animate()

animate(params, speed, callback)

i params 一个包含样式属性及值的映射

ii speed 速度参数，可选

iiicallback 在动画完成时执行的函数，可选

e.g. $(this).animate({left:”50px”},300);

累加动画：$(this).animate({left:”+=50px”},300);

多重动画：$(this).animate({left:”+=50px”，height:”200px”},300); (同时发生的)

$(this).animate({left:”50px”},300)；

$(this).animate({height: ”200px”},300);（按顺序进行，先向左，后放高）

37. 综合动画，通过联是方式对这些效果进行排队

38. 动画回调函数, 实现动画的排队，将动画写在animate() 中的callback()函数中即可

39. 停止元素的动画 stop([clearQueue],[gotoEnd]), 参数可取值为true/false

ClearQueue 是否清空未执行完的动画队列，gotoEnd 是否将正在执行的动画跳转到末状态

如果直接$element.stop()，立即停止正在执行的动画，以当前状态执行接下来的动画

Stop(false,true),可以让动画直接到最终状态（正在执行的）

40. 判断元素是否处于动画状态 $element.is(“:animated”)

41. 延迟动画　delay(ms)

42. 其他动画，slideToggle() 通过高度变化切换匹配元素的可见性，

fadeTo() 把元素的不同明度以渐进方式调整到指定的值 fadeTo(ms ocpacity)

fadeToggle() 通过不透明度变化来切换匹配元素的可见性

锋利的jQuery总结（三）相关推荐

锋利的jquery 知识点总结
由于看的是锋利的jQuery(第二版)部分内容可能没更新, 推荐看jquery API中文文档第一个jquery程序 // 网页中所有DOM结构绘制完成后就执行, 可能DOM元素关联的东西并没有加载 ...
读书笔记：锋利的JQuery
本文首发于我的个人博客:cherryblog.site/ 最近开启了阅读源码之旅,有兴趣的童靴可以持续关注,这几天再看 Zepto.js 的源码,估计博文过几天就会出来~另外,买的十几本书陆陆续续的在 ...
一本书——《锋利的jQuery》
概述不得不说自己看书的速度真的很慢,这本<锋利的jQuery>看了整整一个月.不过话说回来这本书真心很赞,讲得很基础很全面,同时代码部分也基本没有错误.看完这本书基本上应付一般的网站特效 ...
《锋利的jQuery》学习总结
通过对<锋利的jQuery>(第二版)一书的学习,发现此书讲解通俗易懂,是学习jQuery的一本很好的指导书,特作如下总结.此书主要讲解了jQuery的常用操作,包括认识jQuery,jQ ...
锋利的jQuery学习总结
通过对<锋利的jQuery>(第二版)一书的学习,发现此书讲解通俗易懂,是学习jQuery的一本很好的指导书,特作如下总结.此书主要讲解了jQuery的常用操作,包括认识jQuery,jQ ...
【读书笔记】锋利的 jQuery
本文首发于我的个人网站: http://cherryblog.site/ 本文作者: Cherry 本文链接: http://cherryblog.site/sharp-jquery.html 版权声 ...
锋利的Jquery【读书笔记】 -- 第四章 jQuery中的事件和动画
锋利的Jquery读书笔记第三章 jQuery中的DOM操作 jQuery中的事件事件绑定 bind方法合成事件 hover方法 toggle方法事件冒泡事件对象停止事件冒泡阻止默认行为 ...
JQuery 基础 || 目前 jQuery 有三个大版本||JQuery快速入门
1. 概念: 一个JavaScript框架.简化JS开发 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScrip ...
jQuery的三种bind/One/Live/On事件绑定使用方法
转载自 jQuery的三种bind/One/Live/On事件绑定使用方法 jQuery是一款优秀的JavaScript框架,在旧版里主要用bind()方法,在新版里又多了两种One(),Liv ...
《锋利的jQuery》bug总结（1）
我所用的所用编程软件:DW CC2014 系统为:win 7 家庭版测试浏览器:火狐 47.0 <锋利的jQuery>第二版bug总结: 本书第二章2.3小节 jQery选择器中,即第 ...

锋利的jQuery总结（三）

锋利的jQuery总结（三）相关推荐

最新文章

热门文章