加載DOM
$(window).load() 等價於 window.onload 事件
$(document).ready() 相當於window.onload事件，但有些區別：
(1)執行時機：
window.onload 是在網頁中所有元素（包括元素的所有關聯文件）完全加載後才執行
$(document).ready() 是在DOM完全就緒時就可以被調用，此時，並不意味着這些元素關係的文件都已經下載完畢
(2)多次使用：可以在同一個頁面註冊多個$(document).ready()事件
(3)簡寫方式：可以縮寫成 $(function(){ }) 或 $().ready()
·事件綁定
當文檔裝載完成後，可以通過bind()方法，爲特定的元素進行事件的綁定，可重複多次使用
bind( type, [data, ] fn );
type：指事件的類型:
blur（失去焦點）、focus（獲得焦點）
load（加載完成）、unload（銷燬完成）
resize（調整元素大小）、scroll（滾動元素）
click（單擊元素事件）、dbclick（雙擊元素事件）
mousedown（按下鼠標）、mouseup（鬆開鼠標）
mousemove（鼠標移過）、mouseover（鼠標移入）、mouseout（鼠標移出）
mouseenter（鼠標進入）、mouseleave（鼠標離開）
change（值改變）、select（下拉框索引改變）、submit（提交按鈕）
keydown（鍵盤按下）、keyup（鍵盤松開）、keypress（鍵盤單擊）
error（異常）
data：指事件傳遞的屬性值，event.data 額外傳遞給對象事件的值
fn：指綁定的處理函數，在此函數體內，$(this)指攜帶相應行爲的DOM元素
·合併事件
hover(enter,leave)：鼠標移入執行enter、移出事件執行leave
$("#myDiv").hover( function(){
$(this).css("border", "1px solid black");0
}, function(){
$(this).css("border", "none");
});
toggle(fn1,fn2,...fnN)：鼠標每點擊一次，執行一個函數，直到最後一個後重復
$("#myDiv").toggle( function(){
$(this).css("border", "1px solid black");0
}, function(){
$(this).css("border", "none");
});
·事件冒泡
下面的例子，BODY元素下有DIV元素，DIV元素下有SPAN元素，分別將三種元素都註冊click事件。
那麼，click事件會按照DOM的層次結構，像水泡一樣不斷向上直到頂端，所以稱之爲事件冒泡。
<body><div><span>我是SPAN我怕誰</span></div></body>
$("span").bind("click", function(){ alert('span click'); });
$("div").bind("click", function(){ alert('div click'); });
$("body").bind("click", function(){ alert('body click'); });
·阻止冒泡
解決這個問題的辦法是：在SPAN執行完click事件後，停止事件冒泡。
$("span").bind("click", function(event){
alert('span click');
event.stopPropagation(); //停止冒泡
});
·阻止默認行爲
提交按鈕在提交前做相應的邏輯判斷，當不滿足時
$("#btnSubmit").bind("click", function(event){
event.preventDefault(); //阻止默認行爲 相當於return false;
});
·事件對象的屬性
$("#myDiv").bind("click", function(event){ });
event.type() //返回：click
event.target() //獲取當前元素
event.relatedTarget() //引發事件的元素
event.pageX()/event.pageY() //獲取鼠標相對於頁面的X和Y座標
event.which() //在單擊事件中獲取到對應的按鍵 鼠標左中右分別是123
event.metaKey() //獲取操作中的相關功能鍵（ctrl/alt/shift）
·移除事件
$("#myDiv").bind("click", fn1 = function(){
alert("function1");
}).bind("click", fn2 = function(){
alert("function2");
}).bind("click", fn3 = function(){
alert("function3");
});
$("#myDiv").unbind(); //移除id爲myDiv的元素的所有事件
$("#myDiv").unbind("click"); //移除id爲myDiv的元素的所有click事件
$("#myDiv").unbind("click",fn1); //移除id爲myDiv的元素的名稱爲fn1的click事件
·一次性事件：綁定的事件執行一次後自動移除
$("#myDiv").one("click", [data], function(){
alert("function1");
});
·觸發事件
$("#btn").trigger("click", [data]); //代碼方式觸發click事件
$("#btn").click(); //另一種簡寫方式
·事件命名空間
$("#myDiv").bind("click.hello", function(){
alert("function1");
});
$("#myDiv").bind("click", function(){
alert("function1");
})
$("div").unbind("click"); //兩個事件都被移除
$("div").unbind(".hello"); //只移除第一個
$("div").unbind("click!"); //只移除第二個（注意感嘆號，指沒有名字空間的）
·JQuery中的動畫
$("div").hide(); //隱藏所有DIV元素，相當於sytle="display:none"
$("div").show(); //顯示所有DIV元素
$("div").hide(1000); //一秒內隱藏所有DIV元素，其它參數還有：slow(600) normal(400) fast(200)
$("div").show(1000); //一秒內顯示所有DIV元素
$("div").fadeOut(); //降低元素的不透明度，直至消失（支持速度參數，不會改變寬高）
$("div").fadeIn(); //升高元素的不透明度，直至顯示
$("div").slideUp(); //由下至上收縮元素，直至消失（支持速度參數）
$("div").slideDown(); //由上至下展開元素，直至顯示
·自定義動畫animate
$(elem).animate(params, speed, callback);
params：樣式屬性及值的映射 {protected:"value", protected:"value"}
speed: 速度參數
callback: 動畫完成後執行函數，可選
$("#myDiv").animate({left:"500px"}, 2000); //兩秒內ID爲myDiv的元素移至左邊距500px的位置
$("#myDiv").animate({left:"+=500px"}, 2000); //同上，支持累加、累減
$("#myDiv").animate({top:"200px", left:"+=500px"}, 2000); //同上，多重動畫，同時執行
$("#myDiv").animate({opacity:"0.5"}, 1000) //先變成50%透明
.animate({top:"500px"}, 500) //移至離頂端500px
.animate({left:"500px"}, 500) //移至離左邊500px
.fadeOut(1000); //顯示出來 （四個動作爲隊列，一步步執行）
$("#myDiv").stop([cleanQuene] [,gotuEnd]); //停止動畫，參數爲boolean
$("#myDiv").is(":animate") //判斷元素是否在執行動畫
·其它動畫
$("#myDiv").toggle(); //顯示與隱藏元素
$("#myDiv").slideToggle(); //展開與收縮元素
$("#myDiv").fadeTo(1000, 0.2); //一秒內將元素透明度調整到20%
jQuery 事件和動畫總結
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.