加載DOM：

$(document).ready()方法,可以縮寫成$(function(){}),$(document)也可以簡(jiǎn)寫成$() 與傳統(tǒng)的window.onload有所不同

1: onload方法將會(huì)在網(wǎng)頁中所有元素被加載到瀏覽器后才執(zhí)行 .ready方法將會(huì)在dom完全就緒時(shí)就可以被調(diào)用,并不等于所有元素關(guān)聯(lián)的文件已經(jīng)下載完畢

2: onload函數(shù)只能保存一個(gè)對(duì)函數(shù)的引用,而ready可以保存多個(gè)引用

事件的綁定

bind(type,[data],fn)

綁定元素的事件,type為html事件類型（blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mouseover、mousemove、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup、errror）,js的形式(去除on),data為傳遞的參數(shù)(可選),fu為監(jiān)聽的函數(shù)

注意data需要使用[]進(jìn)行包裝,在監(jiān)聽函數(shù)中使用一個(gè)參數(shù)進(jìn)行捕獲,e.data獲取數(shù)組形式后,進(jìn)行訪問,也可以使用簡(jiǎn)寫的進(jìn)行綁定事件（像click、mouseover、mouseout這類事件，程序中常會(huì)用到）,如:

$("p").click(function(){$(this) //為源對(duì)象})

合成事件,hover(),toggle() 用于兩個(gè)事件之間的切換,分別為移過和點(diǎn)擊后觸發(fā) ,其中hover的使用例子為hover(fun,fun2),而taggle則可以帶更多的function,使用元素.toggle(),帶指定的事件類型,可以模擬事件: 如 $(".vic").toggle("click")

$(function(){

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

$(this).addClass("highlight");

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

},function(){

$(this).removeClass("highlight");

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

});

})

事件的冒泡處理

與Flex類似,JavaScript中的事件也同樣存在,捕獲--觸發(fā)--冒泡 三個(gè)節(jié)點(diǎn).

比較常見的情況是,在子元素觸發(fā)事件時(shí),如果父元素也監(jiān)聽同類事件,那么也會(huì)一起觸發(fā),并向上冒泡

看見，內(nèi)層span被點(diǎn)擊的時(shí)候，就會(huì)觸發(fā)外部div和body元素上的click事件，引起冒泡。

jQuery對(duì)事件監(jiān)聽函數(shù),都會(huì)默認(rèn)傳遞一個(gè)參數(shù),一般命名為event(非必須,也可以任意命名)

停止事件冒泡的方法 event.stopPropagation();

組織默認(rèn)行為--如超鏈接的跳轉(zhuǎn) event.preventDefault();

更簡(jiǎn)單的方式:

return false,對(duì)上面兩種都起同樣的作用

由于不同瀏覽器對(duì)事件捕獲階段的支持不同,所有jQuery并不支持事件捕獲，和冒泡相反，從頂端開始往下開始觸發(fā)。

event參數(shù)中的其他屬性

event.type ---事件的類型,如click

event.target---事件的html元素對(duì)象

event.relatedTarget() --如在mouseover事件觸發(fā)時(shí),相關(guān)的元素,如另外一個(gè)mouseout元素

event.pageX()/event.pageY() --相對(duì)于頁面的x,y坐標(biāo)

event.which() --獲取與事件相關(guān)的鍵盤或鼠標(biāo)的按鍵值

event.metaKey()--判斷事件是否包含ctrl按鍵

event.originalEvent()--指向原始的事件對(duì)象

移除事件

    unbind("type") 移除元素上指定類型的事件,也可以不帶參數(shù),移除該元素所有的事件.也可以帶兩個(gè)參數(shù),移除指定事件 ,類型上,不同的監(jiān)聽函數(shù)(一個(gè)事件可以有多個(gè)監(jiān)聽函數(shù)) 獲取監(jiān)聽事件函數(shù)的方法,在開啟監(jiān)聽時(shí): $("btn").bind("click",myfun=function(){....}); //移除時(shí),就可以使用myfun進(jìn)行移除

one(...) 類似bind的使用,指定監(jiān)聽的事件類型,已經(jīng)對(duì)于的函數(shù),區(qū)別在于one只會(huì)觸發(fā)一次后,就被自動(dòng)移除

模擬操作

      trigger("..") 觸發(fā)元素的指定事件,可以使用bind綁定任意自定義事件與對(duì)應(yīng)的事件監(jiān)聽函數(shù),然后使用trigger觸發(fā)

      注意:使用trigger時(shí),默認(rèn)將會(huì)觸發(fā)瀏覽器對(duì)該事件的默認(rèn)行為,比如focus等,也會(huì)使組件獲取焦點(diǎn),可以使用?？梢杂脕砟M用戶的操作，來達(dá)到點(diǎn)擊的效果。

     triggerHandler("focus"),將會(huì)取消瀏覽器的默認(rèn)行為。比如，$("input").trigger("focus");

以上代碼不僅觸發(fā)input綁定的focus事件，也會(huì)使input本身得到焦點(diǎn)，這是瀏覽器的默認(rèn)操作。

其他：

一次綁定多個(gè)事件

      bind("mouseover mouseout") 可以同時(shí)綁定兩個(gè)不同的事件,注意只能使用一個(gè)函數(shù)進(jìn)行監(jiān)聽給事件添加命名空間,便于管理

     bind("click.p",fun...) ,移除的時(shí)候,可以批量使用ubind(".p") 進(jìn)行移除同命名空間的事件

相同事件名稱,不同命名空間執(zhí)行方法

在trigger("click!"),中注意使用!,將只會(huì)觸發(fā)對(duì)應(yīng)的非命名空間的方法

jQuery中的動(dòng)畫

show() hide()

會(huì)根據(jù)display的屬性值,進(jìn)行隱藏和顯示, 注意需要使用標(biāo)準(zhǔn)模式的xHtml的DTD頭部 ,否則可能引起動(dòng)畫抖動(dòng)，標(biāo)準(zhǔn)模式即要求文件頭部包含如下的DTD定義：。。。

可以帶給這兩個(gè)方法帶參數(shù),表示不同的顯示效果,主要是現(xiàn)實(shí)速度上的不同。關(guān)鍵字有：slow，600毫秒；normal：400毫秒；fast：200毫秒.或者直接指定一個(gè)數(shù)字,單位是毫秒.

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

$("element").hide(1000);

   關(guān)鍵字有: slow,hide,normal(400),fast(200),毫秒的時(shí)間 ,也可以指定具體的數(shù)值,如 show(1000) 表示1000毫秒內(nèi) ,

漸變效果: fadeIn()方法和fadeOut()方法,只通過修改元素的不透明度,不改變?cè)氐母叨?font face="Times New Roman">:

slideUp()方法和slideDown()方法,用于收放組件，值改變高度，不改變透明度

animate() 自定義動(dòng)畫類型,彌補(bǔ)其他三種動(dòng)畫只能同時(shí)執(zhí)行一種缺陷

注意需要在樣式里面設(shè)置position: relative或absolute其他絕對(duì)位置的布局,否則有可能導(dǎo)致效果無法顯示

animate({left:"500px"},3000,collback); 其中

第一個(gè){}里面用json形式設(shè)置動(dòng)畫要修改的屬性

第二個(gè)3000,表示持續(xù)時(shí)間,也可以使用slow等關(guān)鍵字代替

第三個(gè)collback為回調(diào)函數(shù)

屬性中 可以使用+= 來對(duì)元素進(jìn)行添加

常用的屬性有left,right,height,width,top,opacity(透明度,使用1-0之間),marginLeft,scrollTop如果分開,會(huì)連續(xù)的執(zhí)行,并不會(huì)時(shí)執(zhí)行 也可以使用鏈?zhǔn)降姆椒?/font>,設(shè)置多個(gè)動(dòng)畫效果,逐步執(zhí)行