一、JQuery中的事件
1.加載DOM
在頁(yè)面加載完畢后，瀏覽器會(huì)通過(guò) JavaScript 為 DOM 元素添加事件。在常規(guī)的 JavaScript 代碼中，通常使用 window.onload 方法，在JQuery 中使用$(document).ready() 方法。JQuery中的簡(jiǎn)化寫法“$()”。在window.onload中注冊(cè)事件時(shí)，只能在一個(gè)window.onload體中注冊(cè)。但使用JQuery，可以在多個(gè)$(document).ready()或$()中注冊(cè)。
2.事件綁定
對(duì)匹配的元素對(duì)指定的事件綁定。
如，昨天我們?cè)趙indow.onload中綁定事件的方法：“$("p").onclick(function(){ alert( $(this).text() );
});” 在JQuery的$(document).ready()中可以這樣綁定：“$("p").click(function(){ alert( $(this).text() );
});” 使用bind()，可以這樣綁定：$("p").bind("click", function(){ alert( $(this).text() );
});
3.合成事件
hover()：模擬光標(biāo)懸停時(shí)間。當(dāng)光標(biāo)移動(dòng)到元素上時(shí)，會(huì)觸發(fā)指定的第一個(gè)函數(shù)，當(dāng)光標(biāo)移出這個(gè)元素時(shí)，會(huì)觸發(fā)指定的第二個(gè)函數(shù)。如，懸停效果：$("td").hover( function () {$(this).addClass("hover");}, function () {$(this).removeClass("hover");});
toggle()：用于模擬鼠標(biāo)連續(xù)單擊事件。第一次單擊元素，觸發(fā)指定的第一個(gè)函數(shù)，當(dāng)再一次單擊同一個(gè)元素時(shí)，則觸發(fā)指定的第二個(gè)函數(shù)，如果有更多個(gè)函數(shù)，則依次觸發(fā)，直到最后一個(gè)。如，設(shè)置元素的選擇與非選中效果：
$("td").toggle( function () {$(this).addClass("selected");}, function () {$(this).removeClass("selected");});
使用toggle()而不傳遞參數(shù)，效果為切換元素的可見狀態(tài)。
4.事件的冒泡
事件會(huì)按照 DOM 層次結(jié)構(gòu)像水泡一樣不斷向上只止頂端。
解決：在事件處理函數(shù)中返回 false，會(huì)對(duì)事件停止冒泡。還可以停止元素的默認(rèn)行為。
目前的所有UI交互或其事件，都支持這個(gè)特性。 在自己的事件處理函數(shù)返回false將中止事件的繼續(xù)向下傳遞。返回true事件繼續(xù)向下傳遞。
5.事件對(duì)象的屬性
事件對(duì)象：當(dāng)觸發(fā)事件時(shí)，事件對(duì)象就被創(chuàng)建了。在程序中使用事件只需要為處理函數(shù)添加一個(gè)參數(shù)。在事件處理函數(shù)中使用些參數(shù)。 如，獲取事件發(fā)生時(shí)，相對(duì)于頁(yè)面的位置：event.pageX, event.pageY，event是事件處理函數(shù)的參數(shù)。
6.移除事件
移除某按鈕上的所有click 事件：$(“btn”).unbind(“click”)
移除某按鈕上的所有事件：$(“btn”).unbind();
one()：該方法可以為元素綁定處理函數(shù)。當(dāng)處理函數(shù)觸發(fā)一次后，事件立即被刪除。即在每個(gè)對(duì)象上，事件處理函數(shù)只會(huì)被執(zhí)行一次。
二、JQuery中的DOM動(dòng)畫
通過(guò)設(shè)置DOM對(duì)象的顯示與隱藏方式，可以產(chǎn)生動(dòng)畫效果。
1.無(wú)動(dòng)畫效果的隱藏與顯示
hide()：在HTML文檔中，為一個(gè)元素調(diào)用hide()方法會(huì)將該元素的display樣式改為none。代碼功能同css(“display”, “none”);相同。
show()：將元素的display樣式改為先前的顯示狀態(tài)。
toggle()：切換元素的可見狀態(tài)：如果元素時(shí)可見的，則切換為隱藏；如果元素時(shí)隱藏的，則切換為可見的。
2.通過(guò)設(shè)置透明度效果的隱藏與顯示，達(dá)到淡入淡出的動(dòng)畫效果
fadeIn()，fadeOut()：只改變?cè)氐耐该鞫取? fadeOut() 會(huì)在指定的一段時(shí)間內(nèi)降低元素的不透明度，直到元素完全消失。 fadeIn() 則相反。如，用600毫秒緩慢的將段落淡入：$("p").fadeIn("slow");。
fadeTo()：把不透明度以漸近的方式調(diào)整到指定的值(0 – 1 之間)。并在動(dòng)畫完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。如，用200毫秒快速將段落的透明度調(diào)整到0.25，動(dòng)畫結(jié)束后，顯示一個(gè)“Animation Done”信息框：“$("p").fadeTo("fast", 0.25, function(){ alert("Animation Done."); });”。
3.通過(guò)設(shè)置高度效果的隱藏與顯示，達(dá)到滑下與收起的動(dòng)畫效果
slideDown()，slideUp()：只會(huì)改變?cè)氐母叨?。如果一個(gè)元素的display屬性為none，當(dāng)調(diào)用slideDown() 方法時(shí)，這個(gè)元素將由上至下延伸顯示。 slideUp() 方法正好相反，元素由下至上縮短隱藏。如，用600毫秒緩慢的將段落滑下：$("p").slideDown("slow");。
slideToggle()：通過(guò)高度變化來(lái)切換匹配元素的可見性。如，200毫秒快速將段落滑上或滑下，動(dòng)畫結(jié)束后，會(huì)顯示一個(gè)“Animation Done”信息框：“$("p").slideToggle("fast",function(){ alert("Animation Done."); });”。
使用JavaScript、JQuery可以處理當(dāng)前頁(yè)面的動(dòng)態(tài)更新，再結(jié)合CSS樣式可以做出十分漂亮的UI，甚至比桌面軟件UI漂亮的多。JavaScript的編寫與調(diào)試非常麻煩，所以也有一些公司出品了專門針對(duì)JavaScript應(yīng)用的簡(jiǎn)化開發(fā)，比如Google出品的GWT，可以像使用Java編寫swing那樣編寫JavaScript。它為用戶提供像swing那樣的UI接口與事件等操作并且支持JAVA的核心庫(kù)。使用GWT自己的編譯器，可以將JAVA代碼編譯為JavaScript代碼、CSS樣式文件和HTML。
