JQ笔记04.Jquery中的事件和动画

$(document).ready() 方法是事件模块中重要的函数，可以极大地提高web应用程序的响应速度。

load()方法：

[code]$(window).load(function(){
//代码……
})

等价于JS中的如下代码：
Window.onload=function(){
//代码……
}

$(document).ready(function(){})相当于$().ready(function(){})相当于$(function(){})

4.1.2【事件绑定】使用bind()方法对对匹配元素进行特定事件的绑定

【代码4.1.2.1】单击菜单展开内容，再次单击合并内容

★使用is()方法判断元素是否显示

【代码4.1.2.2】扩展思维：当鼠标经过的时候出现内容，鼠标离开的时候隐藏内容：

4.1.3【合成事件】hover()方法、toggle()方法，都属于Jquery自定义的方法。

【代码4.1.3.1】

这个方法在测试的时候，jquery-1.9.1.js 和书上写的jquery-1.3.1.js 效果是不一样的，注意区分。

【代码4.1.3.2】

【代码4.1.3.3】

【代码4.1.3.4】加强效果：单击标题后，标题高亮显示。

4.1.4【事件冒泡】

【代码4.1.4.1】什么是事件冒泡——单击内部<span>元素，会输出3条记录。

【代码4.1.4.2】项目中，经常需要做的事“停止事件冒泡”，可以阻止事件中其他对象的事件处理函数被执行，使用stopPropagation()方法。

【代码4.1.4.3】阻止默认行为——preventDefault()方法。项目中经常需要验证表单，当不符合条件时要用此方法。

备注：表单中event.preventDefault()可以替换为 return false;

事件冒泡中 event.stopPropagation()可以替换为 return false;

代码4.1.5【事件对象的属性】

event.Type()方法——获取事件类型

event.preventDefault()方法——阻止默认的事件行为。

event.stopPropagation()方法——阻止事件的冒泡。

event.target()方法——获取到触发事件的元素

event.relatedTarget()方法：

event.pageX()方法和event.pageY()方法——获取光标相对于页面的x坐标和y坐标

event.which()方法——鼠标单击事件中获取鼠标的左中右键；键盘事件中获取键盘的按键。

event.metaKey()方法——键盘事件中获取<Ctrl>按键

4.1.6【移除事件】unbind()方法

【代码4.1.6.1】可以为同一个元素绑定多个事件

【代码4.1.6.1】移除按钮元素上以前注册的事件

【代码4.1.6.2】移除按钮元素其中一个事件

【代码4.1.6.3】one()方法——为元素绑定处理函数，该函数触发一次后立即被删除，即在每个对象上事件处理函数只会被执行一次。

注：使用one()方法为<button>元素绑定单击事件后，只在用户第一次单击按钮时处理函数才执行，之后的单击毫无作用。

4.1.7【模拟操作】

【代码4.1.7.1】常用模拟操作：使用trigger()方法。

$('#btn').trigger("click");可以简写为$('#btn').click();

【代码4.1.7.2】trigger()方法不仅能触发浏览器支持的具有相同名称的事件，也可以触发自定义名称的事件。

【代码4.1.7.3】trigger(type[,data])方法传递参数。第二个参数以数组形式传递，

通常可以通过传递一个参数给回调函数，用来区别这次事件是代码触发的还是用户触发的。

【代码4.1.7.4】执行默认操作：trigger()可以获取焦点，triggerHandler()不能获取焦点。

4.1.8【其他方法】

【代码4.1.8.1】绑定多个事件类型

【代码4.1.8.2】添加事件命名空间，便于管理。（没明白）

【代码4.1.8.3】相同事件名称，不同命名空间执行方法。（没明白）

4.2【Jquery中的动画】2013年4月17日12:00:31

【代码4.2.1.1】show()方法和hide()方法（之前使用过）

【代码4.2.1.2】$(this).next().hide(600);添加速度参数（毫秒），可以让元素动起来

这个参数可以是”slow”(600ms)、”normal”(400ms)、”fast”(200ms) [slow要加引号]

【代码4.2.2】fadeIn()方法和fadeOut()方法——只改变元素的不透明度

【代码4.2.3】slideUp()方法和slideDown()方法——只会改变元素的高度。本例比较常见，实现拉窗帘式。

【代码4.2.4】自定义动画方法animate()…

后面的都不怎么常用，就不看了，有需要的话自己看代码和演示。

【代码4.3】视频展示效果示例，点击箭头切换内容，很经典！

【代码】https://github.com/rxbook/study-jquery-1/tree/master/04.Jquery%E4%B8%AD%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%92%8C%E5%8A%A8%E7%94%BB