jQuery----事件、动画
一、jquery事件应用
ready()：类似onLoad()，但ready()只要页面DOM结构加载后触发，而onLoad()必须页面全部元素加载成功才触发
//$(document).ready(function(){});等价于$(function(){});
//设置id为tip的内容
$(document).ready(function(){ $("#tip") .html("我被加载了！"); })
bind()：给元素绑定事件
//bind()演示 $("button").bind('click',function(){ $this.attr("disabled","true"); });
删除事件：unbind(event,fun)，event为事件名称，多个以空格隔开，fun为事件执行时调用的函数，若没有任何参数则删除指定元素的所有事件处理函数
聚焦、失焦：hover(over,out);over为鼠标移入时触发的函数，out为鼠标移出时触发的函数
隐藏、显示：toggle()，该方法可以给元素点击事件绑定两个或两个以上的函数，还可以实现元素的隐藏与切换
//每次点击div元素显示不同内容 $(function(){ $("div").toggle( function(){ $(this).html("苹果"); }, function(){ $(this).html("香蕉"); } ) }); //实现按钮的隐藏和显示 $(function{ $("button").bind("click",function(){ $("div").toggle(); }) });
一次性事件：one(event,fun)，给元素绑定只会执行一次的事件
手动触发指定事件：trigger(event)，其中event可以是元素自身事件，也可是自定义事件，该事件必须能执行
<style> .color { color: red; } </style> <div>土豪，咱们交个朋友吧</div> <script> //当页面加载完时触发 $(function () { //其中change-color为自定义的事件 $("div").bind("change-color", function () { $(this).addClass("color"); }); //绑定自定义事件 $("div").trigger("change-color"); }); </script>
文本框的聚焦失焦：focus、blur
focus：在元素获取焦点时触发，如单击文本框
blur：在元素失去焦点时触发，如单击除文本框的任何位置
(function(){ //输入框的聚焦事件 $("input").bind("focus",function{ $("div").html("请输入您的姓名"); }); //输入框的失焦事件 $("input").bind("blur",function(){ if($(this).val().length == 0) $("div").html("您的名称不能为空!"); }); });
下拉框的change事件：当一个元素的值发生改变时触发的事件，如在下拉列表框中
$(function(){ //绑定change事件 $("select").bind("change",function(){ if($(this).val() == '苹果') $(this).css("background-color","red"); else $(this).css("background-color","green"); }); });
live()：jquery1.9之后不再支持，1.7版本开始不推荐使用，与bind()方法相同，live()方法与可以绑定元素的可执行事件，除此相同功能之外，live()方法还可以绑定动态元素
$(function () { $("input").live("click", function () { $(this).attr("disabled", "true"); }) $("input").live("mouseout",function(){ $(this).attr("disabled","true"); }); $("body").append("<input id='btntest' type='button' value='点击或移出就不可用了' />"); });
二、动画
显示：$(selector).show(speed,[callback])
隐藏：$(selector).hide(speed,[callback])
speed：设置隐藏或显示的速度值，可为‘slow’、‘fast’或毫秒值
callback：为隐藏或显示动作执行完成后调用的函数名
<h4>我喜欢吃的水果</h4>
<ul>
<li>苹果</li>
<li>甘桔</li>
<li>梨</li>
</ul>
<input id="hidval" type="hidden" value="0"/>
<script>
$(function(){
$("h4").bind("click",function(){
if($("#hidval").val() == 0){
//显示ul标签
$("ul").show();
$("#hidval").val(1);
}else{
//隐藏ul标签
$("ul").hide();
$("#hidval").val(0);
}
});
});
</script>
<h4>我爱吃水果</h4>
<ul>
<li>苹果</li>
<li>西瓜</li>
<li>梨</li>
</ul>
<input type="hidden" value="0"/>
<script>
$(function(){
$("h4").bind("click",function(){
if($("input").val() == 0){
$("ul").show(3000,function(){
$("input").val(1);
});
}else{
$("ul").hide(3000,function(){
$("input").val(0);
});
}
});
});
</script>
显示隐藏二合一：$(selector).toggle(speed,[callback]);
元素处于显示状态调用该方法则影藏该元素，处于隐藏状态则显示
$(function(){ $("h4").bind("click",function(){ $("ul").toggle(3000,function(){ $("span").html() == "影藏" ? $("span").html("显示") : $("span").html("影藏"); }); }); });
上下滑动：
$(selector).slideUp(speed,[callback])，向上滑动元素，仅适用于显示的元素
$(selector).slideDown(speed,[callback])，向下滑动元素，该函数仅适用于被隐藏的元素
$(function(){ $("button").bind("click",function(){ if($("hidden").val() == 0){ $("ul").slideUp(1000,function(){ $("hidden").val(1); }); }else{ $("ul").slideDown(1000,function(){ $("hidden").val(0); }); } }); });
上下滑动二合一：
$(selector).slideToggle(speed,[callback])，调用该方法，若元素已向上滑，则自动向下滑，反之亦然
$(function(){ $("h4").bind("click",function(){ //slideToggle()的用法 $("ul").slideToggle(1000,function(){ $("span").html() == "向下滑" ? $("span").html("向上滑") : $("span").html("向下滑"); }); }); });
淡入淡出：
$(selector).fadeIn(speed,[callback])，淡入隐藏
$(selector).fadeOut(speed,[callback])，淡出显示
//演示fadeIn和fadeOut用法 $(function(){ $("h4").bind("click",function(){ if($("hidden").val() == 0){ $("ul").fadeIn(3000,function(){ $("hidden").val(1) }); }else{ $("ul").fadeOut(3000,function(){ $("hidden").val(0); }); } }); });
淡入淡出透明度：
$(selector).fadeTo(speed,opacity,[callback])，opacity为指定不透明度，在0.0~1.0之间，可选参数callback为效果完成后的回调函数名
$(function(){ $("span").each(function(index){ switch(index){ case 0: $(this).fadeTo(0,0.2); break case 1: $(this).fadeTo(0,0.4); break; case 2: $(this).fadeTo(0,0.6); break; } }); });
anima()应用：
制作放大动作效果：$(selector).animate({params},speed,[callback])，params为制作动画效果的CSS属性名与值
$(function(){ $("span").animate({width:"80px",height:"80px"},3000,function(){ $("#divTest").html("我粗来啦！"); }); });
制作移动动画：在移动动画之前需将被移动的元素position设置为absolute或relative
<html> <head> <title>移动动画演示</title> <meta http-equiv="Content-Type" Content="text/html;charset=UTF-8"/> </head> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <style> span { position:absolute; width:80px; height:80px; border: solid 1px #ccc; margin: 0px 8px; background-color: Red; color:White; vertical-align:middle } </style> <body> <span></span> <div id="tip"></div> <script> $(function(){ $("span").animate({ //设置已定位元素的左边距,藉此实现移动 left:"+=100px" },3000,function(){ $("#tip").html("我把他弹走啦！"); }); }); </script> </body> </html>
停止动画：stop()停止的效果包括滑动、淡入淡出、自定义动画
$("selector").stop([clearQueue],[goToEnd])，clearQueue为是否停止正在执行的动画，后者为是否完成正在执行的动画，默认为false
<html> <head> <title>停止动画</title> <meta http-equiv="Content-Type" Content="text/html;charset=UTF-8"/> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> <style type="text/css"> div{ margin:10px 0px; } span{ position:absolute; width:80px; height:80px; border: 1px solid #ccc; margin:0px 8px; background-color:red; color:white; vertical-align:middle; } </style> </head> <body> <span></span> <input id="btnStop" type="button" value="停止"/> <div id="tip"></div> <script> //动画效果 $(function(){ $("span").animate({ left:"+=100px" },3000,function(){ $(this).animate({ width:"+=60px", height:"+=60px" },3000,function(){ $("#top").html("执行完成！"); }) }); }); //停止动画 $("#btnStop").bind("click",function(){ $("span").stop(); $("#tip").html("执行停止!"); }); </script> </body> </html>
动画延时：delay()
$(selector).delay(duration)，duration为延时的时间，单位毫秒，当超过毫秒值时动画继续执行
