jQuery中的事件与动画
一、事件
1、加载Dom事件
执行时机
$(document).ready()方法和window.onload方法有相似的功能，但在执行时机方面是有区别的。
window.onload:在网页中所有的元素（包括元素所有的关联文件）完全加载到浏览器后才执行，即javascript此时才可以访问网页中的任何元素，只执行一次。
$(document).ready():通过$(document).ready处理，DOM完全就绪后可以被任意调用，可执行多次。
2、事件绑定和移除事件
事件绑定
Bind()的调用格式：Bind( type [,data] , fn);
第1个参数是事件类型，类型包括：blur、focus 、load 、resize 、scroll 、unloand 、click 、dblclick 、mousedown 、mouseup 、mousemove 、
mouseover 、mouseout 、mouseenter 、mouseleave 、change 、select 、submit 、keydown 、keypress 、keyup 和error等，也可以是自定义名称
第2个参数为可选参数，作为event.data属性值传递给事件对象的额外数据对象
第3个参数则是用来绑定的处理函数，Fn
使用 .bind() 时，选择器匹配的元素会附加一个事件处理函数，而以后再添加的元素则不会有。也就是说，只处理已存在的事件，后面动态添加的就不处理了。
注意：在jQuery中的事件绑定类型比普通的JavaScript事件中少了“on” 如:click与onclick()函数
例：
$(function() {
$("#panel h5.head").bind("mouseout", function() {
$(this).next("div.content").hide();
});
$("#panel h5.head").bind("mouseover", function() {
$(this).next("div.content").show(); }) })
这样，当我们用鼠标指上标题时，内容就会显示，当鼠标移开标题是，内容就会自动收缩。
事件移除:
移除按钮上以前注册的事件:unbind([type],[data])
同时移除多个事件:unblind(type1).unbind(type2)......unbind(typeN)
3、合成事件
a、hover()方法
$(function(){
$("#panel h5.head").hover(function(){
$(this).next("div.content").show();
},function(){
$(this).next("div.content").hide();
});
});
b、Toggle()方法
$(funcion){
$("#panel h5.head").toggle(function(){
$(this).addclass("highlight").show();
},function(){
$(this).remove("highlight");
$(this).next("div.content").hide();
});
});
4、事件冒泡
定义:子元素和父元素绑定同样的事件,子元素该事件被触发了,父元素也相应的触发,事件按照特定顺序由里往外响应
引发的问题及解决方案: 问题:引起预料之外的结果 解决方案:1 事件注册之后return false; 2 event.stopPropagation(); 注:event是由函数中传下来的
阻止默认行为:preventDefault() 或者 return false
停止事件冒泡
$("span").bind("click", function(even) {
var txt = $('#msg').html() ;
$('#msg').html(txt);
even.stopPropagation();//停止
5、事件对象的属性
1. Event.type()方法. 可以获取到事件的类型
2. Event.preventDefault().方法 阻止默认的事件行为.
获取到触发事件的元素.jQuery对其封装后
避免了w3c.IE和safari浏览器不同标准的差异.
例子： $(“#panle h5.head”).toggle(function(){
$(this).next(“div.content”).hide(600);//在600毫秒内隐藏起来
},function(){
$(this).next(“div.content”).show(600);//在600毫秒内显示出来起来
});
这样，元素就动起来了，除了可以直接写数字外，还有速度参数，eg：slow（600毫秒）normal（400毫秒），fast（200毫秒）
注意：在用show()方法和hide()方法时，一般把css样式display属性的值设置为none
2、fadeln()方法和fadeOut()方法
定义：这两种方法只改变元素的不透明度，fadeout()方法会在指定的一段时间内降低元素的不透明度，直到元素完全消失（“display:none”）,
fadeln()方法则相反。
例子：$(“#panle h5.head”).toggle(function(){
$(this).next(“div.content”).fadeOut();//单击连接后，“内容”慢慢的消失了（淡出），
},function(){
$(this).next(“div.content”).fadeIn()//当再次单击连接，“内容”又慢慢的显示出了（淡入）
});
3、slideUp()方法和slideDown()方法
$(this).next(“div.content”).slideUp();
},function(){
$(this).next(“div.content”).slideDown()
});
当使用关键字时要加引号，如：show（slow），如果用数字作为时间参数时就不需要加引号，如：show（1000）。
4、自定义动画方法animate(动画参数，执行时间，回调函数)
注意要执行元素的移动 position: absolute;
下面是关于animate的代码：
<!DOCTYPE html>
<html> <head>
<title></title>
<style type="text/css">
#panel{
position: relative;height: 100px; border: 1px solid #0050D0;background: #96E555; cursor: pointer; 100px; }
</style>
<script type="text/javascript" src="jquery-1.4.1-vsdoc.js"></script>
<script type="text/javascript">
$(function(){
//图片向右运动 /* $("#panel").click(function(){ $(this).animate({left:"+=500px"},3000); });*/
//图片向左运动 /* $("#panel").click(function(){ $(this).animate({left:"-=500px"},3000); });*/
//同时执行多个动画 /*$("#panel").click(function(){ $(this).animate({left:"500px",height:"200px"},3000);});*/
//综合动画
/* $("#panel").css("opacity","0.5");
$("#panel").click(function(){
$(this).animate({left:"400px",height:"200px",opacity:"1"},3000)
.animate({top:"400px","200px"},3000)
.fadeOut("slow"); });*/
//动画回调函数
/* $("#panel").css("opacity","0.5");
$("#panel").click(function(){
$(this).animate({left:"400px",height:"200px",opacity:"1"},3000)
.animate({top:"400px","200px"},3000,function(){
$(this).css("border","5px solid blue");}) });*/
//停止元素的动画
$("#panel").hover(function(){
$(this).stop(true)
.animate({"150"},200)
.animate({"300"},300);
},function(){
$(this).stop()
.animate({height:"22"},300)
.animate({"60"},300); }); });
</script> </head>
<body><div id="panel"></div> </body> </html>
5、其他的jQuery的动画方法
总结：学了这一章之后，做了两个小的测试，一个是视频展示效果（点击按钮，电影或者视频列表会左右滚动），另一个是淘宝商城商品类别列表的效果。虽然这
两个做得都不是很完整（比如说：样式没有调好.....），但基本效果还是有的，还是有一点点的成就感。另外，在做动画的过程中，需要特别注意动画的执
行顺序，也要注意非动画方法会捅对，可以通过动画方法的回调函数解决这个问题。
2013 EMC新产品网络发布大会[演示文档下载]
大会简介
IT风潮瞬息万变，技术革新迅速更迭。当前，我们正处在以局域网、服务器、互联网为依托的第二平台。面向未来，以云服务、移动宽带网络、大数据分析、社交网络技术为依托的第三代平台即将迅速崛起。数据中心体系结构也将需要顺应趋势，充分将Intel多核技术及闪存等颠覆性技术与虚拟化进行融汇贯通。
如何既能满足第二平台的"性能+效率"，又能顺利过渡到"Web+移动"的未来平台？2013年10月22日，"EMC新产品网络发布大会"将为您率先演示创新产品和变革技术，助您开辟新天地！
大会主题及重量级演讲嘉宾
叶成辉 EMC全球高级副总裁、大中华区总裁
大数据时代已经来临,企业如何管理和利用激增的数据?数据中心基础架构不仅需要提供更高的性能和效率，同时也要能满足下一代移动及Web应用的需求。通过全面接受和采用Intel多核、虚拟化、闪存等颠覆性技术，EMC重新发明中端存储，增强了VSPEX配置并隆重发布ViPR和尼罗河方案帮助IT部门进行转型，应对第二和第三平台的数据管理挑战!
周震刚 IDC中国企业级系统与软件研究部高级研究经理
以云计算、大数据、移动及社交等第三平台为基础的技术领域正在不断向各个行业渗透，同时也带动了相关硬件、软件及服务市场的高速成长。中国这四个领域未来五年的复合增长率都会在30%以上，将继续引领中国IT市场增长。步入第三平台，需要企业积极面对变革，数据中心作为企业业务的基石，而存储作为数据中心的核心系统，正在面临革新与转型以应对设备和数据爆炸式增长的挑战。
会议主题：主题演讲：超越．致胜
第三平台引领存储系统变革——云计算、大数据、移动以及社交网络的发展
主题演讲：
-
重新发明中端存储
演讲人介绍：
-
EMC全球高级副总裁及大中华区总裁叶成辉
-
IDC 企业系统与软件研究组高级研究经理周震刚
-
EMC中国区高级产品经理李君鹏
[演示文档下载]
Keynote 1 超越致胜叶成辉 EMC全球高级副总裁及大中华区总裁.pdf
keynote 3 李君鹏 EMC企业存储部高级产品经理.pdf
会议主题：引领基础架构转型分会场
-
EMC ViPR – 软件定义的存储
-
新一代VNX统一存储
-
EMC VSPEX - 灵活的私有云基础架构
演讲人介绍：
-
EMC中国区高级产品经理李君鹏
-
EMC中国区资深产品经理王伟
-
EMC商业部售前工程师徐石磊
[演示文档下载]
breakout 1-1 EMC ViPR – 软件定义的存储.pdf
breakout 1-3 EMC VSPEX - 灵活的私有云基础架构.pdf
会议主题：引领应用程序转型分会场
-
加速应用系统虚拟化之旅
-
Flash重新定义可能
演讲人介绍：
-
EMC资深咨询顾问陈亮
-
EMC资深咨询顾问余航
[演示文档下载]
会议主题：解决数据保护之忧分会场
-
备份变革－与您共创数据保护新时代
-
EMC VPLEX双活数据中心解决方案
演讲人介绍：
-
EMC 备份与恢复系统部高级支持经理李岩
-
EMC中国区高级产品经理李君鹏
[演示文档下载]
breakout 3-1 备份变革－与您共创数据保护新时代.pdf
breakout 3-2 EMC VPLEX双活数据中心解决方案.pdf
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
EMC其它资料下载
http://www.pipipan.com/u/1899168/3423828
不会下载的，看这里
更多资源下载，请关注的我共享主页：