jQuery 04 事件和动画

加载DOM，在常规的JS中，通常使用window.onload方法。在jQuery中，使用
$(document).ready(function(){ }) ,在DOM加载完时就执行，不必等到相关资源加载。 如果需要等所有内容都加载完毕再执行可以用：

$(window).load(function(){})

事件绑定，在文档加载完成后，可以用bind方法对匹配元素进行特定时间的绑定：

bind(type,data,fn);

data为可选参数，作为event.data属性值传递给事件对象

$(function(){

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

})

this
引用的是相应动作的当前DOM元素，使用
$(this)
转换为jQuery对象。

使用is(), 判断元素是否显示

$(function(){

$("#panel h5.head").bind("click",function(){

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

if(
$content.is(":visible")){

$content.
hide();

}else{

$content.
show();

}

})

})

$(function(){

$("#panel h5.head").
bind("mouseover",function(){

$(this).next().show();

}).
bind("mouseout",function(){

$(this).next().hide();

})

})

bind可以绑定所有的js事件，click,mouseover,mouseout这类事件，jQuery提供一套简写的方法。

$(function(){

$("#panel h5.head").
mouseover(function(){

$(this).next().show();

}).
mouseout(function(){

$(this).next().hide();

})

})

jQuery有2个合成方法 hover()和toggle().

hover用于模拟光标悬停，当光标移动到元素上时，触发第1个函数，移出时触发第2个函数

$(function(){

$("#panel h5.head").
hover(function(){

$(this).next().show();

},function(){

$(this).next().hide();

})

})

toggle用于模拟鼠标连续单击事件。第一次单击执行第一个函数，第2次执行第2个函数

$(function(){

$("#panel h5.head").
toggle(function(){

$(this).next().show();

},function(){

$(this).next().hide();

})

})

toggle还有另一个作用：切换元素的可见状态

$(function(){

$("#panel h5.head").
toggle(function(){

$(this).next().
toggle();

},function(){

$(this).next().
toggle();

})

})

事件冒泡，事件会按照DOM的层次结构不断向上直到顶端。事件冒泡可能会引起问题，有必要对事件的作用范围进行限制。

事件对象event:

$('span').bind("click",
function(event){

var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";

$('#msg').html(txt);

event.stopPropagation(); // 阻止事件冒泡

});

默认行为，有时需要阻止链接跳转或表单提交。

$(function(){

$("#sub").bind("click",function(
event){

var username = $("#username").val(); //获取元素的值

if(username==""){ //判断值是否为空

$("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息

event.preventDefault(); //阻止默认行为 ( 表单提交 )

}

})

})

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

$(function(){

$("#sub").bind("click",function(
event){

var username = $("#username").val(); //获取元素的值

if(username==""){ //判断值是否为空

$("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息

return false;

}

})

})

事件对象 Event的属性

$(function(){ $("a").click(function(event) { alert(event.type);//获取事件类型 return false;//阻止链接跳转 }); })	获取事件类型
$(function(){ $("a[href='http://google.com']").click(function(event) { var tg = event.target; //获取事件对象 alert( tg.href ) ; return false;//阻止链接跳转 }); })	获取事件对象
event.relatedTarget	相关对象
$(function(){ $("a").click(function(event) { alert("Current mouse position: " + event.pageX + ", " + event.pageY );//获取鼠标当前相对于页面的坐标 return false;//阻止链接跳转 }); })	获取鼠标当前相对于页面的坐标
$(function(){ $("a").mousedown(function(e){ alert(e.which) // 1 = 鼠标左键 ; 2 = 鼠标中键; 3 = 鼠标右键 return false;//阻止链接跳转 }) })	获得鼠标按键
$(function(){ $("input").keyup(function(e){ alert(e.which); }) })	获得键盘按键
$(function(){ $("input").keyup(function(e){ alert( e.metaKey +" "+e.ctrlKey ); $(this).blur(); }) })

重复绑定事件

<script type="text/javascript">

$(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>

移除事件

<script type="text/javascript">

$(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>");

});

$('#delAll').click(function(){

$('#btn').
unbind("click");

});

})

</script>

<script type="text/javascript">

$(function(){

$('#btn').bind("click",

myFun1 =
function(){

$('#test').append("<p>我的绑定函数1</p>");

}).bind("click",

myFun2 =
function(){

$('#test').append("<p>我的绑定函数2</p>");

}).bind("click", myFun3 = function(){

$('#test').append("<p>我的绑定函数3</p>");

});

$('#delTwo').click(function(){

$('#btn').unbind("click",myFun2);

});

})

</script>

对于只运行一次的事件可以用one()

<script type="text/javascript">

$(function(){

$('#btn').
one("click", function(){

$('#test').append("<p>我的绑定函数1</p>");

}).
one("click", function(){

$('#test').append("<p>我的绑定函数2</p>");

}).
one("click", function(){

$('#test').append("<p>我的绑定函数3</p>");

});

})

</script>

模拟操作，可以用trigger()完成模拟操作。

<script type="text/javascript">

$(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>");

});

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

})

</script>

<script type="text/javascript">

$(function(){

$('#btn').bind("myClick",

function(event, message1, message2){

$('#test').append( "<p>"+message1 + message2 +"</p>");

});

$('#btn').click(function(){

$(this).trigger("myClick",["我的自定义","事件"]);

})
.trigger("myClick",["我的自定义","事件"]);

})

</script>

trigger()方法触发事件后，会执行默认操作，如果不想执行默认操作可以用

<script type="text/javascript">

$(function(){

$('#old').bind("click", function(){

$("input").trigger("focus");

});

$('#new').bind("click", function(){

$("input").
triggerHandler("focus");

});

$("input").focus(function(){

$("body").
append("<p>focus.</p>");

})

})

</script>

一次绑定多个事件

<script type="text/javascript">

$(function(){

$("div").
bind("mouseover mouseout", function(){

$(this).toggleClass("over");

});

})

</script>

增加事件命名空间

<script type="text/javascript">

$(function(){

$("div").
bind("click.plugin",function(){

$("body").append("<p>click事件</p>");

});

$("div").
bind("mouseover.plugin", function(){

$("body").append("<p>mouseover事件</p>");

});

$("div").bind("dblclick", function(){

$("body").append("<p>dblclick事件</p>");

});

$("button").click(function() {

$("div").
unbind(".plugin");

})

/*

click,mouseover 事件被删除，

*/

})

</script>

show和hide

<script type="text/javascript">

$(function(){

$("#panel h5.head").toggle(function(){

$(this).next().
hide();

},function(){

$(this).next().
show();

})

})

</script>

<script type="text/javascript">

$(function(){

$("#panel h5.head").toggle(function(){

$(this).next().
hide(600);

},function(){

$(this).next().
show(600);

})

})

</script>

<script type="text/javascript">

$(function(){

$("#panel h5.head").click(function(){

$(this).next().
toggle();

})

})

</script>

fade

<script type="text/javascript">

$(function(){

$("#panel h5.head").toggle(function(){

$(this).next().
fadeOut();

},function(){

$(this).next().
fadeIn();

})

})

</script>

<script type="text/javascript">

$(function(){

$("#panel h5.head").click(function(){

$(this).next().
fadeTo(600, 0.2);

})

})

</script>

<script type="text/javascript">

$(function(){

$("#panel h5.head").click(function(){

$(this).next().
fadeToggle();

})

})

</script>

slide 改变元素的高度

<script type="text/javascript">

$(function(){

$("#panel h5.head").toggle(function(){

$(this).next().
slideUp();

},function(){

$(this).next().
slideDown();

})

})

</script>

<script type="text/javascript">

$(function(){

$("#panel h5.head").click(function(){

$(this).next().
slideToggle();

})

})

</script>

自定义动画方法animate

语法结构：animate(params,speed,callback);

<script type="text/javascript">

$(function(){

$("#panel").click(function(){

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

})

})

</script>

在使用
animate 之前，为了能影响该元素的top,left,bottom,right样式属性，必须先把元素的position样式设置为 relative或absolute.

#panel {
position: relative;
width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer}

累加/累减，如果在500px前加上 +=或-= 表示在当前位置累加或累减

同时执行多个变化

<script type="text/javascript">

$(function(){

$("#panel").click(function(){

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

})

})

</script>

按顺序执行

<script type="text/javascript">

$(function(){

$("#panel").click(function(){

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

.
animate({height: "200px"}, 3000);

})

})

</script>

<script type="text/javascript">

$(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");

});

});

</script>

动画的回调函数

<script type="text/javascript">

$(function(){

$("#panel").css("opacity", "0.5");//设置不透明度

$("#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");
})

});

});

</script>

<script type="text/javascript">

$(function(){

$("#panel").css("opacity", "0.5");//设置不透明度

$("#panel").click(function(){

$(this).
animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)

.
animate({top: "200px" , width :"200px"}, 3000 )

.
queue(function(next){
$(this).css("border","5px solid blue");
next(); //继续下一个动画
})

.slideUp("slow");

});

});

</script>

停止动画，可以用stop()方法：stop(clearQueue,gotoEnd)

clearQueue表示是否清空未执行的动画队列，gotoEnd表示是否直接到当前动画的最后状态。

<script type="text/javascript">

$(function(){

$("#panel").hover(function() {

$(this).
stop().animate({height : "150",width : "300"} , 200 );

},function() {

$(this).
stop().animate({height : "22",width : "60" } , 300 );

});

});

</script>

<script type="text/javascript">

$(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 )

});

});

</script>

判断动画状态

<script type="text/javascript">

$(function(){

//给id为mover的元素添加动画.

function animateIt() {

$("#mover").slideToggle("slow", animateIt);

}

function animateIt2() {

$("#mover").fadeToggle("slow", animateIt2);

}

animateIt();

$("button").click(function(){

if(!$('#mover').
is(":animated")){ //判断元素是否正处于动画状态

//如果当前没有进行动画，则添加新动画

$('#mover').
fadeToggle("slow", animateIt2);

}else{

$('#mover').
stop();

}

});

});

</script>

延迟动画

<script type="text/javascript">

$(function(){

$("#panel").css("opacity", "0.5");//设置不透明度

$("#panel").click(function(){

$(this).
animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)

.
delay(1000)

.
animate({top: "200px" , width :"200px"}, 3000 )

.
delay(2000)

.
fadeOut("slow");

});

});

</script>