锋利的jQuery读书笔记-第4章 jQuery中的事件和动画
来源：互联网 发布：php转盘抽奖程序 编辑：程序博客网 时间：2024/05/29 18:32
一、jQuery中的事件：
1.window.onload() 与$(document).ready()之间的区别
（1）执行时机上的区别：
window.onload()是网页中所有元素完全加载完之后才执行的；
$(document).ready()在DOM就绪之后就可以被调用，此时所有网页内的元素对jQuery而言都是可以访问的，但并不一定所有的关联文件下载完毕。 --使用$(document).ready()可以极大地提高Web应用的响应速度。
（2）使用次数上的区别：
window.onload()如果编写多个这样的函数，只有后面的触发，前面的不触发。这是因为JavaScript的onload事件只能保存对一个函数的引用，按照加载顺序自动用后面一个覆盖前一个，因此无法多次执行；
$(document).ready()可以编写多个，浏览器会按照顺序加载执行。
2.$(document).ready()有两种简写方式：
（1）
$(function () { //alert("hello jQuery");})（2）$().ready( function() { //alert("hello jQuery"); })3.事件绑定：bind(type, [data] , function)
jQuery的绑定事件有三个参数：
（1）事件类型：focus、load、unload、click等等
（2）可选参数，传入额外数据对象
（3）绑定对应的处理函数
写一个简单的例子,我们先写一个简单的HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery Learning </title></head><body> <script src ="./lib/jquery.js"> </script> <script src ="./JS/Chapter4.js"> </script> <h1>Hello Every One!</h1> <div id = "panel"> <h5 class="head">什么是jQuery</h5> <div class = "content"> jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由John Resig 创建于2006年1月的开源项目。 </div> </div></body></html>
$(function () { $(".content").hide(); $("#panel h5.head").bind("click",function () { var content = $(this).next(); if(content.is(":visible")) { content.hide(); } else { content.show(); } })})两者合并之后就可以看到一个点击隐藏/显示的jQuery事件效果
4.两个常用的行为事件函数：
(1)hover(fn1，fn2)： 鼠标移入执行fn1，鼠标移除执行fn2
(2)toggole(fn1,fn2,...) 鼠标点击一次执行fn1，点击第二次执行fn2，以此类推直到从头再来。
//改用Toggle函数实现鼠标点击后显示/隐藏事件function titleToggle(){ $("#panel h5.head").toggle(function() { $(this).next().show(); },function() { $(this).next().hide(); })}//使用Hover事件实现内容的显示/隐藏function titleHover(){ $("#pane2 h5.head").hover(function () { $(this).next().show(); },function () { $(this).next().hide(); })}4.事件冒泡
事件冒泡是指父子元素同时绑定一个相同的响应事件，子元素触发响应事件时，父元素也会同时触发响应事件。
看个简单的示例：
<h1>关于冒泡事件</h1> <div id = "bubbleDiv"> <span> 事件冒泡示例 </span> </div>
function bubbleTest(){ $("span").click(function() { alert("我是span响应事件"); }) $("div").click(function() { alert("我是Div响应事件"); }) $("body").click(function() { alert("我是Body响应事件"); })}此时点击span，三个alert事件都会触发。 之所以叫冒泡，是因为事件会按照DOM的层次结构像水泡一样不断向上一直到最顶层。这样一来就会带来一些预期之外的页面效果，在jQuery中针对冒泡事件有对应的处理方法：
首先引入一个概念：“事件对象”，在响应事件的时候给对应事件添加一个事件对象参数，该参数在事件结束时销毁。利用这个事件对象，我们可以进行针对一个行为进行处理。
停止事件冒泡： event.stopPropagation()； 利用事件对象，在span的click事件最后执行停止事件冒泡操作，整个事件冒泡就会终止。
还有一个简化的写法，同时用于终止事件冒泡和默认行为的执行：
$("span").click(function() { alert("我是span响应事件"); return false; })5.移除事件
$("xxxx").unbind(); // unbind([type],[data]);
第一个参数为需要删除的事件类型，如果不传参数则删除对应元素的全部绑定事件；
第二个参数为 绑定时传入的特定函数，那么就只有此处再传入的这个函数会被删除（有点绕，意思就是bind的时候传了一个fn，unbind的时候又传了一遍，那么就是只删这个函数事件，其他事件不影响）
jQuery特别增加了只执行一次的绑定事件函数 one()，所有用法与bind相同，这是这个函数只执行第一次后就会失效。
6.模拟操作
以上说到的都是用户实际操作的场景，但是有时候我们需要直接模拟用户的操作，那么也可以直接用jQuery来实现
(1)点击事件 ： $("xxx").triger("click"); 实现模拟用户点击元素事件，简写方式: $("xxx").click();
(2)触发自定义事件
比如元素绑定了一个行为函数 $("#btn").bind("myClick",function(){xxxxxxxxx}); 模拟触发就可以使用 $("#btn").trigger("myClick");
(3)传递参数： trigger(type,[data]), 触发函数本身支持传递参数，用法与bind的传递参数相同
7.其他操作
1.绑定多个行为 bind("mouseover mouseout",function(){}); 这里只需要将多个行为用空格隔开即可。
2.添加命名空间：
$("div").bind("click.kewen",function(){xxxxxxxxxxxxx});
$("div").bind("mouseout.kewen",function(){xxxxxxxxxxxxx});
$("div").bind("xxxxxx.kewen",function(){xxxxxxxxxxxxx});
这个时候.kewen 这个命名空间就可以用来统一操作上述定义的所有行为，例如同时解除绑定。
当然还可以给同一个事件添加不同的命名空间，然后按照需要执行
function nameSpaceTest(){ $("#bubbleSpan").bind("click",(function() { alert("我是click响应事件"); return false; })) $("#bubbleSpan").bind("click.plugin",(function() { alert("我是click.plugin响应事件"); return false; })) $("#nameSpaceSpan").click(function() { $("#bubbleSpan").trigger("click!"); })}二、jQuery中的动画
1.animate(）执行动画效果
鼠标的Hover事件，最佳实践是在animate触发之前加上stop(）事件，避免反复触发时，页面显示效果比较差。
$(function(){ $("#panel").hover(function() { $(this).stop().animate({height : "150",width : "300"} , 200 ); },function() { $(this).stop().animate({height : "22",width : "60" } , 300 ); });});这样可以主动触发终结上一次没有执行完的函数，显示效果更佳。
如果是组合动画的animate(）事件，就需要用stop(true)来清除动画队列
$(function(){ $("#panel").hover(function() {$(this).stop(true).animate({height : "150" } , 200 ).animate({width : "300" } , 300 )},function() {$(this).stop(true).animate({height : "22" } , 200 ).animate({width : "60" } , 300 )});});判断动画是否在执行中：
if(!$.(element).is(":animated")){ // 如果某个元素没有处于动画状态中，则....}2.著名的toggle动画
$(function(){ $("#panel h5.head").click(function(){ $(this).next().toggle();})})这个动画效果是我们最最常用的一种动画，点击某处 显示/隐藏 。
动画概括：
实际上动画只需要记清楚页面元素显示有3个重要属性： 高度(height) 宽度(width)和不透明度(opacity)
所有的动画行为只是在动态的修改某个元素的这三个属性：
hide() / show() - 同时修改高度、宽度和不透明度
fadeIn() / fadeOut() -只改变不透明度
slideUp() /slideDown() -只改变高度
fadeto() 只改变不透明度
toggle() 替换hide() 和 hide()
slideToggle() 替代slideUp()和slideDown()
fadeToggle() 替代fadeIn() 和 fadeOut()
animate() 自定义动画方法，上面的这些方法都是animate(）的扩展，内部都是由animate实现，自己还可以修改其他属性样式，例如left、scrollTop等等
0 0
- 《锋利的jQuery》读书笔记 第4章 jQuery中的事件和动画
- 锋利的jQuery读书笔记-第4章 jQuery中的事件和动画
- 锋利的Jquery【读书笔记】 -- 第四章 jQuery中的事件和动画
- 《锋利的jQuery》第四章、 jQuery中的事件和动画
- 《锋利的jQuery》读书笔记第四章(事件和动画)
- (锋利的jquer)第四章 jquery中的事件和动画
- 学习笔记《锋利的jQuery》-jQuery中的事件和动画
- 【锋利的jQuery阅读笔记】jQuery中的事件和动画
- 锋利的jquery(jQuery中的事件和动画)
- 《锋利的jQuery》要点归纳（三） jQuery中的事件和动画（下：动画篇）
- 《锋利的jQuery》要点归纳（三） jQuery中的事件和动画（下：动画篇）
- 【锋利的JQuery】0x04 JQuery中的事件与动画
- 《锋利的jQuery》要点归纳（三） jQuery中的事件和动画（上：事件篇）
- 《锋利的jQuery》要点归纳（三） jQuery中的事件和动画（上：事件篇）
- 《锋利的jQuery》读书笔记 第1章 认识jQuery
- 《锋利的jQuery》读书笔记 第2章 jQuery选择器
- 锋利的jQuery读书笔记-第1章 认识jQuery
- 锋利的jQuery读书笔记-第2章 jQuery选择器
- 拉丁方正
- 通过实例理解AOP
- 关于php项目的开发回顾总结第六章-----性能决定高低
- 魔术师发牌问题
- C++——NOIP模拟题——中位数
- 锋利的jQuery读书笔记-第4章 jQuery中的事件和动画
- 开源12通道2.4G遥控制作-接收机
- [Utils]时间工具类--DateUtil
- ArrayList中动态删除结点（连续删除易出错）
- 致使百度搜索引擎不收录你网站的原因及解决方法
- 适配器的缓存
- JS完美运动框架
- selenium:Element is not visible
- mongodb基本操作
