锋利的Jquery【读书笔记】 -- 第四章 jQuery中的事件和动画

锋利的Jquery读书笔记 第三章 jQuery中的DOM操作
jQuery中的事件
事件绑定
bind方法

合成事件
hover方法

toggle方法

事件冒泡
事件对象

停止事件冒泡

阻止默认行为

事件捕获

事件对象的属性
eventtype

eventpreventDefault方法

eventstopPropagation方法

eventtarget

eventrelatedTarget

eventpageX 和 eventpageY

eventwhich

eventmetaKey

移除事件
移除按钮元素上以前注册的事件

unbind方法

移除元素的其中一个事件

one方法

模拟操作
常用模拟

触发自定义事件

传递数据

其他用法
绑定多个事件

添加事件命名空间便于管理

相同事件名称不同命名空间执行方法

jQuery中的动画
show方法 和 hide方法
show方法 和 hide方法

show方法 和 hide方法 让元素动起来

fadeIn方法 和 fadeOut方法

slideUp方法 和 slideDown方法

自定义动画方法 animate
自定义简单动画

累加累减动画

多重动画

综合动画

动画回调函数

停止动画和判断是否处于动画状态
停止元素的动画

判断元素是否处于动画状态

延迟动画

其他动画方法
toggle方法

slideToggle方法

fadeTo方法

fadeToggle方法

锋利的Jquery【读书笔记】 – 第三章 jQuery中的DOM操作

jQuery中的事件

$(document).ready()方法

可以多次使用；

$(document).ready(function(){
//编写代码
})

也可以简写成：

$(function(){
//编写代码
})

事件绑定

[b]bind()方法[/b]

bind(event,date,function)

第一个参数为事件类型：

blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error。

第二个参数为可选参数：

作为 event.date 属性值传递给事件对象额外数据对象。

第三个参数是用来绑定的处理函数

比如：

$(function(){
$("#panel h5.head").bind("click",function(){
$(this).next().show();
})
})

判断元素是否显示，用 is()方法来完成：

$(function(){
$("panel h5.head").bind("click",function(){
if($(this).next().is(":visible")){     //如果内容显示
$(this).next().hide();
} else {
$(this).next().show();
}
})
})

发现

$(this).next()

多次使用，可以定义一个局部变量：

var $content = $(this).next();

简写绑定事件：

$(function(){
$("panel h5.head").mouseover(function{
$(this).next.show();
}).mouseout(function(){
$(this).next.hide();
})
});

合成事件

[b]hover()方法[/b]

hover(enter,leave);

hover()方法用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第1个函数(enter);当光标移出这个元素，会触发第2个元素(leave)。

上面的例子可以改写成：

$(function(){
$("#panel h5.head").hover(function(){
$(this).next().show;

4000
},function(){
$(this).next().hidden;
})
})

[b]toggle()方法[/b]

toggle(fn1,fn2,fn3 ....)

toggle()方法用于模拟鼠标连续点击事件。

第1次点击元素，触发指定的第1个函数(fn1)；

点击第2此，触发第2个函数；

如果有更多的函数，依次触发，直到最后一个。随后的每次单击都重复对这几个函数轮番调用。

比如这个函数：

$(function(){
$("panel h5.head").bind("click",function(){
if($(this).next().is(":visible")){     //如果内容显示
$(this).next().hide();
} else {
$(this).next().show();
}
})
})

上面这个例子适合使用 toggle()方法，原理是：

$(标题).toggle(function(){
//内容显示
},function(){
//内容隐藏
})

使用toggle()方法来改写上面的例子：

$(function(){
$("#panel h5.head").toggle(function(){
$(this).next().show();
},function(){
$(this).next().hide();
})
})

toggle()方法 在jQuery中还有另外一个作用：切换元素的可见状态。

如果元素可见，切换后隐藏；如果隐藏，切换为可见的

事件冒泡

[b]事件对象[/b]

在程序中使用事件对象非常简单，只需为函数添加一个参数，

$("element").bind("click",function(event){     //event:事件对象
//...
})

[b]停止事件冒泡[/b]

停止事件冒泡可以阻止事件中 其它对象的事件处理函数被执行，jQuery中提供了 stopPropagation()方法 来停止事件冒泡。

$("span").bind("click",function(event){            //event：事件对象
var txt = $('#msg').html() + "<p>内层span元素被单击</p>";
$('#msg').html(txt);
event.stopPropagation();          //停止事件冒泡
})

[b]阻止默认行为[/b]

jQuery中，提供了 preventDefault()方法 来阻止元素的默认行为。

<script>
$("#sub").bind("click",function(event){
var username = $("#username").val();      //获取元素
if(username == ""){                       //判断值是否为空
$("#msg").html("<p>本文框的值不能为空</p>");       //提示信息
preventDefault();                     //阻止默认行为（表单提交）
}
})
</script>
<form action="test.html">
用户名：<input type="text" id="username" />
<br/>
<input type="submit" value="提交" id="sub"/>
</form>

<div id="msg"></div>

当用户名为空，提交时，会提示表单不能提交

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

表单中 的例子可以把：

event.preventDefault();         //阻止默认行为

改写为：

return false;

可以把事件冒泡例子：

event.topPropagation();         //停止事件冒泡

改写为：

return false;

[b]事件捕获[/b]

jQuery不支持事件捕获，使用事件捕获，直接使用原生的JavaScript。

事件对象的属性

[b]event.type[/b]

该方法的作用可以获取到事件的类型。

$("a").click(function(event){
alert(event.type);      //获取事件类型
return false;          //阻止链接跳转
})

代码会输出     // click

[b]event.preventDefault()方法[/b]

阻止默认的事件行为。

[b]event.stopPropagation()方法[/b]

阻止事件冒泡

[b]event.target[/b]

作用是获取到触发事件的元素。

$("a[href='http://google.com']").click(funciton(event){
var tg = event.target;           //获取事件对象
alert(tg.href);
return false;                   //阻止事件跳转
})

以上代码输出：

"http://google.com"

[b]event.relatedTarget[/b]

在标准的DOM中，mouseover 和 mouseout所发生的元素可以通过event.target 来访问，相关元素通过event.relatedTarget 来访问。

[b]event.pageX 和 event.pageY[/b]

该方法的作用是获取到光标相对于页面的x坐标和y坐标。如果没有使用jQuery，那么IE中是用 event.x/event.y，而在Firefox中是用 event.pageX 和 event.pageY。如果还有滚动条，还要加上滚动条的宽度和高度。

$("a").click(function(event){
//获取鼠标相对页面的坐标
alert("Current mouse position :" + event.pageX + "," + event.pageY);
return false;      //阻止链接跳转
})

[b]event.which[/b]

该方法的作用是在鼠标单击事件中获取到鼠标的左，中，右键；在键盘中获取键盘的按键。

比如，获取鼠标的左、中、右键：

$("a").mousedown(function(e){
alert(e.which);       //1 = 鼠标左键;  2 = 鼠标中键; 3 = 鼠标右键
})

代码加载到页面中后，用鼠标单击页面时，单击左、中、右键分别返回1、2、3.

获取键盘按键：

$("input").keyup(function(e){
alert(e.which);
})

[b]event.metaKey[/b]

为键盘事件中获取

<ctrl>

按键。

移除事件

在绑定事件的过程中，不仅可以为同一个元素绑定多个事件，也可以为多个元素绑定同一个事件。

<script>
$(function(){
$("#btn").bind("click",function(){
$("#test").append("<p>我的绑定函数1</p>");
}).bind("click",function(){
$("#test").append("<p>我的绑定函数2</p>");
}).bind("click",function(){
$("#test").append("<p>我的绑定函数3</p>");
})
})
</script>
<button id="btn">单击我</button>
<div id="test"></div>

[b]移除按钮元素上以前注册的事件[/b]

先添加一个移除事件的按钮：

<button id="#delAll">删除所有事件</button>

给按钮绑定一个删除所有click事件的函数：

$("#delAll").click(function(){
$("#btn").unbind("click");
})

因为元素绑定的都是 click事件，所以不写参数能够达到同样的效果：

$("#delAll").click(function(){
$("#btn").unbind();
})

[b]unbind()方法[/b]

unbind()方法的语法结构：

unbind([type],[data]);

第一个参数是事件类型，第2个参数是将要删除的函数

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

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

如果把绑定时传递的处理函数作为第2个参数，则只有这个特定的事件处理函数会被删除

[b]移除元素的其中一个事件[/b]

$(function(){
$('#btn').bind("click",myFun1 = function(){
$('#test').append("<p>我的绑定函数1</p>")
})
})

然后单独删除某一事件：

$('#delOne').click(function(){
$("#btn").unbind("click",myFun1);      //删除 绑定事件1
})

[b]one()方法[/b]

对于只需触发一次，随后就要立即解除绑定的情况，jQuery提供了一种简写方法 — one()方法。

One()方法可以为元素绑定处理函数、当处理函数只执行一次后，立即删除。即在每个对象上面，事件处理函数只会被执行一次。

one()方法 结构和 bind()方法类似，使用方法相同：

<script>
$(function(){
$("#btn").one("click",function(){
$("#test").append("<p>我的绑定函数1</p>");
}).bind("click",function(){
$("#test").append("<p>我的绑定函数2</p>");
}).bind("click",function(){
$("#test").append("<p>我的绑定函数3</p>");
})
})
</script>
<button id="btn">单击我</button>
<div id="test"></div>

使用 one()方法 绑定事件，只有用户第一次单击按钮，处理才会执行，之后的单击毫无用处。

模拟操作

[b]常用模拟[/b]

jQuery中可以使用，trigger()方法 来模拟操作。

可以用下面代码触发ID为 btn的按钮 click事件：

$('btn').trigger("click");

[b]触发自定义事件[/b]

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

$("btn").bind("myClick",function(){
$('test').append("<p>我的自定义事件</p>")
})

//触发这个事件
$('#btn').trigger("myClick");

[b]传递数据[/b]

trigger(type,[data])方法由两个参数，第一个是要触发的事件类型，第二个是要传递给事件处理函数的附加数据，以数组的形式传递。

下面是传递数据的例子：

$('btn').bind("myClick",function(event,message1,message2){     //获取数据
$("test").append("<p>"+message1+message2+"</p>");
});

$("btn").trigger("myClick",["我的自定义事件","事件"]);      //传递两个数据

其他用法

[b]绑定多个事件[/b]

bind()方法 可以为元素一次性绑定多个事件类型。

$(function(){
$("div").bind("mouseover mouseout",function(){
$(this).toggleClass("over");
})
});

当光标划入时，class切换为 “over”；当光标划出时，class切换为先前的值。

[b]添加事件命名空间，便于管理[/b]

$(function(){
$("div").bind("click.plugin",function(){
$("body").append("<p>click事件</p>");
})
$("div").bind("mouseover,plugin",function(){
$("body").append("<p>mouseover事件</p>");
})
$("div").bind("dbclick",function(){
$("body").append("<p>dbclick事件</p>");
})
$("btn").click(function(){
$("div").unbind(".plugin");
})
})

在所绑定的事件类型后面添加命名空间，这样在删除事件时只需指定命名空间即可。

[b]相同事件名称，不同命名空间执行方法[/b]

$(function(){
$("div").bind("click",function(){
$("body").append("<p>click事件</p>");
})
$("div").bind("click.plugin",function(){
$("body").append("<p>click.plugin事件</p>");
})
$("#btn").click(function(){
$("div").trigger("click!")          //注意后面的叹号
})
})

单击div元素后，会触发click事件和click.plugin事件。

只单击button元素，则触发click事件，而不触发click.plugin事件。

注意： trigger(“click!”)后面的叹号作用是匹配所有不包含在命名空间中的click方法。

如果两者都要触发：

$("div").trigger("click");         //去掉感叹号

jQuery中的动画

show()方法 和 hide()方法

[b]show()方法 和 hide()方法[/b]

隐藏element元素：

$("element").hide();           //使用hide()方法

等同于：

$("element").css("display","none");            //使用css()方法

[b]show()方法 和 hide()方法 让元素动起来[/b]

show()方法 和 hide()方法不加参数时，作用是立即显示或者隐藏元素。

如果想让元素慢慢显示出来，可以为 show()方法指定一个速度函数：

$("element").show("slow");

slow,元素会在600毫秒内慢慢显示出来。其他的速度关键字海油”normal”和”fast”（长度分别是400毫秒和200毫秒）。

不仅如此， 还可以为显示速度指定一个数字，单位是毫秒。

例如：让元素在1秒内显示、隐藏（1000毫秒）

$("element").show(1000);   //1秒内显示
$("element").hide(1000);   //1秒内隐藏

fadeIn()方法 和 fadeOut()方法

与show()方法不相同的是，fadeIn()方法 和 fadeOut()方法只改变元素的不透明度。fadeOut()方法会在指定的一段时间内降低元素的不透明度，直到元素消失。fadeIn()与之相反。

上个例子，如果只想改变 “内容”的不透明度，可以使用 fadeOut()方法

$("#panel h5.head").toggle(function(){
$(this).next().fadeOut();
},function(){
$(this).next().fadeIn();
})

第1次单击链接，”内容”慢慢消失(淡出)，再次单击，内容又慢慢地显示(淡入)。

slideUp()方法 和 slideDown()方法

slideUp()方法 和 slideDown()方法 只会改变元素的高度。如果一个元素的display的属性值为”none”，当调用slideDown()方法时，这个元素将由上至下延伸显示。

slideUp()方法，将元素由下及上缩短隐藏。

注意：jQuery中任何动画效果，都可以指定3种速度参数，即”slow”，”normal”，”fast（时间分别为0.6秒，0.4秒和0.2秒）。当使用速度关键字时，要加引号；如果用数字作为参数就不需要加引号，例如show(1000)。

自定义动画方法 animate()

animate()方法用来自定义动画。其语法结构为：

animate(params, speed, callback);

参数说明：

params：一个包含属性样式及值的映射，比如 {property1 : “value”, property2 : “value” }.

speed：速度参数，可选

callback：在动画完成执行的函数，可选

[b]自定义简单动画[/b]

首先给 div元素添加 CSS：

<style type="text/css">
#panel{
position: relative;
width:100px;
height:100px;
border:1px solid #0050D0;
background:#96E555;
cursor:pointer;
}
</style>

调整元素的left值，使元素动起来：

$(function(){
$("#panel").click(function(){
$(this).animate({left : "500px"},3000);
})
})

[b]累加、累减动画[/b]

如果在500px前面加上”+=”或者”-=”符号表示当前位置累加或者累减。

$(function(){
$("#panel").click(function(){
$(this).animate({left : "+=500px"},3000);
})
})

[b]多重动画[/b]

同时执行多个动画

$(function(){
$("#myImg").click(function(){
$(this).animate({left : "500px" , height : "200px"},3000);
})
})

按顺序执行多个动画

上例中动画效果是同时发生的，如果想让按顺序执行，需要拆开写：

$(this).animate({left : "500px"},3000);
$(this).animate({height : "200px"},3000);

因为是对同一个jQuery对象操作，可以改为链式的写法：

$(this).animate({left : "500px"},3000)
.animate({height : "200px"},3000);

[b]综合动画[/b]

$(function(){
$("#panel").css("opacity","0.5");        //设置透明度
$("#panel").click(function(){
$(this).animate({left : "400px", height : "200px", opacity : "1"},3000)
.animate({top : "200px", width : "200px"},3000)
.fadeOut("slow");
})
})

动画回调函数

在上例中，如果想在最后一步切换元素的CSS样式，而不是隐藏元素：

css("border","5px solid blue");

这样并不能得到预期效果，岗开始执行动画的时候，css()方法 就被执行了。

因为，css()方法并不会加入到动画队列中，而是立即执行。

可以使用回调函数(callback)对非动画方法实现排队，只要把css()方法写在最后一个动画的回调函数里即可。

$(function(){
$("#panel").click(function(){
$(this).animate({left : "400px", height : "200px", opacity : "1"},3000)
.animate({top : "200px", width : "200px"}, 3000 ,function(){
$(this).css("border","5px solid blue");
})
})
})

注意：callback 回调函数适用于所有的动画效果，例如：

$("#element").slideDown("normal",function(){
// 效果完成时做其它的事情
})

这段代码表示id=”element”的元素在0.4秒内向下展开，当动画完成后，执行回调函数体内的代码。

停止动画和判断是否处于动画状态

[b]停止元素的动画[/b]

很多时候需要停止匹配元素正在进行的动画，需要使用stop()方法。其语法结构为：

stop([clearQueue],[gotoEnd]);

参数clearQueue 和gotoEnd都是可选的参数，为Boolean值。

clearQueue代表是否要清空未执行完的动画列表，

gotoEnd代表是否直接将正在执行的动画跳转到末状态。

如果直接使用stop()方法，会立即停止当前正在进行的动画。

$("#panel").hover(function(){
$(this).stop()
.animate({height : "150px"},200)        //如果在此时触发了光标移除的事件
//将执行下面的动画
//而非光标移出事件的动画
.animate({width : "300px"},300);
},function(){
$(this).stop(true)
.animate({height:"22px"},200)
.animate({width:"30px"},300);
})
})

如果把第1个参数（clearQueue）设置为 true，此时程序会把当前元素接下来尚未执行完成的动画序列都清空。

$("#panel").hover(function(){
$(this).stop(true)
.animate({height : "150px"},200)        //如果在此时触发了光标移除的事件
//直接跳过后面的动画序列
.animate({width : "300px"},300);
},function(){
$(this).stop(true)
.animate({height:"22px"},200)
.animate({width:"30px"},300);
})
})

第2个参数（gotoEnd）可以用于让正在执行的动画直接达到结束时刻的状态，通常用于后一个动画需要基于前一个动画的末状态的情况，可以通过 stop(false,true)这种方式来让当前动画直接到达末状态

当然两者可以结合使用，stop(true,true)，即停止当前动画并直接到达当前动画的末状态，并清除动画序列。

[b]判断元素是否处于动画状态[/b]

if(! $(element).is(":animated")){      //判断元素是否处于动画状态
// 如果当前没有动画，则添加动画
}

[b]延迟动画[/b]

在动画执行过程中，如果想对动画进行延迟操作，使用 delay()方法：

$(this).animate({left : "400px", height : "200px", opacity : "1"},3000)
.delay(1000)
.animate({top : "200px",width : "200px"},3000)
.delay(2000)
fadeOut("slow");

其他动画方法

toggle(speed,[callback])

slideToggle(speed,[easing],[callback])

fadeTo(speed,opacity,[callback])

fadeToggle(speed,[easing],[callback])

[b]toggle()方法[/b]

toggle()方法可以切换元素的可见状态。如果元素可见，则切换为隐藏；如果隐藏，切换为可见。

给内容添加toggle()事件：

$("#panel h5.head").click(function(){
$(this).next().toggle;
})

单击标题链接后，“内容”会在可见和隐藏状态之间切换。

相当于：

$("#panel h5.head").toggle(function(){
$(this).next().hide();
},function(){
$(this).next().show();
})

[b]slideToggle()方法[/b]

slideToggle()方法 通过高度变化来切换匹配元素的可见性。这个动画效果只调整元素的高度。

给“内容”添加 slideToggle()事件：

$("#panel h5.head").click(function(){
$(this).next().slideToggle();
})

单击元素后，内容会在可见和隐藏中切换，不过是通过改变元素的高度实现的。

相当于：

$("#panel h5.head").toggle(function(){
$(this).next().slideUp();
},function(){
$(this).next().slideDown();
})

[b]fadeTo()方法[/b]

fadeTo()方法 可以把元素的不透明度以渐进的方式调整到指定的值。这个动画只调整元素的不透明度，即匹配的元素的高度和宽度不会改变。

$("panel h5.head").click(function(){
$(this).next().fadeTo(600,0.2);
})

当链接被点击，内容会渐渐调整到指定透明度(20%)。

[b]fadeToggle()方法[/b]

该方法通过不透明度变化来切换匹配元素的可见性。

$("panel h5.head").click(function(){
$(this).next().fadeToggle();
})

相当于：

$("panel h5.head").toggle(function(){
$(this).next().fadeOut();
},function(){
$(this).next().fadeIn();
})