加載DOM：
$(document).ready()方法,可以縮寫(xiě)成$(function(){}),$(document)也可以簡(jiǎn)寫(xiě)成$() 與傳統的window.onload有所不同
1: onload方法將會(huì )在網(wǎng)頁(yè)中所有元素被加載到瀏覽器后才執行 .ready方法將會(huì )在dom完全就緒時(shí)就可以被調用,并不等于所有元素關(guān)聯(lián)的文件已經(jīng)下載完畢
2: onload函數只能保存一個(gè)對函數的引用,而ready可以保存多個(gè)引用
事件的綁定
bind(type,[data],fn)
綁定元素的事件,type為html事件類(lèi)型（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為傳遞的參數(可選),fu為監聽(tīng)的函數
注意data需要使用[]進(jìn)行包裝,在監聽(tīng)函數中使用一個(gè)參數進(jìn)行捕獲,e.data獲取數組形式后,進(jìn)行訪(fǎng)問(wèn),也可以使用簡(jiǎn)寫(xiě)的進(jìn)行綁定事件（像click、mouseover、mouseout這類(lèi)事件，程序中常會(huì )用到）,如:
$("p").click(function(){$(this) //為源對象})
合成事件,hover(),toggle() 用于兩個(gè)事件之間的切換,分別為移過(guò)和點(diǎn)擊后觸發(fā) ,其中hover的使用例子為hover(fun,fun2),而taggle則可以帶更多的function,使用元素.toggle(),帶指定的事件類(lèi)型,可以模擬事件: 如 $(".vic").toggle("click")
$(function(){
$("#panel h5.head").toggle(function(){
$(this).addClass("highlight");
$(this).next().show();
},function(){
$(this).removeClass("highlight");
$(this).next().hide();
});
})
事件的冒泡處理
與Flex類(lèi)似,JavaScript中的事件也同樣存在,捕獲--觸發(fā)--冒泡 三個(gè)節點(diǎn).
比較常見(jiàn)的情況是,在子元素觸發(fā)事件時(shí),如果父元素也監聽(tīng)同類(lèi)事件,那么也會(huì )一起觸發(fā),并向上冒泡
看見(jiàn)，內層span被點(diǎn)擊的時(shí)候，就會(huì )觸發(fā)外部div和body元素上的click事件，引起冒泡。
jQuery對事件監聽(tīng)函數,都會(huì )默認傳遞一個(gè)參數,一般命名為event(非必須,也可以任意命名)
停止事件冒泡的方法 event.stopPropagation();
組織默認行為--如超鏈接的跳轉 event.preventDefault();
更簡(jiǎn)單的方式:
return false,對上面兩種都起同樣的作用
由于不同瀏覽器對事件捕獲階段的支持不同,所有jQuery并不支持事件捕獲，和冒泡相反，從頂端開(kāi)始往下開(kāi)始觸發(fā)。
event參數中的其他屬性
event.type ---事件的類(lèi)型,如click
event.target---事件的html元素對象
event.relatedTarget() --如在mouseover事件觸發(fā)時(shí),相關(guān)的元素,如另外一個(gè)mouseout元素
event.pageX()/event.pageY() --相對于頁(yè)面的x,y坐標
event.which() --獲取與事件相關(guān)的鍵盤(pán)或鼠標的按鍵值
event.metaKey()--判斷事件是否包含ctrl按鍵
event.originalEvent()--指向原始的事件對象
移除事件
unbind("type") 移除元素上指定類(lèi)型的事件,也可以不帶參數,移除該元素所有的事件.也可以帶兩個(gè)參數,移除指定事件 ,類(lèi)型上,不同的監聽(tīng)函數(一個(gè)事件可以有多個(gè)監聽(tīng)函數) 獲取監聽(tīng)事件函數的方法,在開(kāi)啟監聽(tīng)時(shí): $("btn").bind("click",myfun=function(){....}); //移除時(shí),就可以使用myfun進(jìn)行移除
one(...) 類(lèi)似bind的使用,指定監聽(tīng)的事件類(lèi)型,已經(jīng)對于的函數,區別在于one只會(huì )觸發(fā)一次后,就被自動(dòng)移除
模擬操作
trigger("..") 觸發(fā)元素的指定事件,可以使用bind綁定任意自定義事件與對應的事件監聽(tīng)函數,然后使用trigger觸發(fā)
注意:使用trigger時(shí),默認將會(huì )觸發(fā)瀏覽器對該事件的默認行為,比如focus等,也會(huì )使組件獲取焦點(diǎn),可以使用?？梢杂脕?lái)模擬用戶(hù)的操作，來(lái)達到點(diǎn)擊的效果。
triggerHandler("focus"),將會(huì )取消瀏覽器的默認行為。比如，$("input").trigger("focus");
以上代碼不僅觸發(fā)input綁定的focus事件，也會(huì )使input本身得到焦點(diǎn)，這是瀏覽器的默認操作。
其他：
一次綁定多個(gè)事件
bind("mouseover mouseout") 可以同時(shí)綁定兩個(gè)不同的事件,注意只能使用一個(gè)函數進(jìn)行監聽(tīng)給事件添加命名空間,便于管理
bind("click.p",fun...) ,移除的時(shí)候,可以批量使用ubind(".p") 進(jìn)行移除同命名空間的事件
相同事件名稱(chēng),不同命名空間執行方法
在trigger("click!"),中注意使用!,將只會(huì )觸發(fā)對應的非命名空間的方法
jQuery中的動(dòng)畫(huà)
show() hide()
會(huì )根據display的屬性值,進(jìn)行隱藏和顯示, 注意需要使用標準模式的xHtml的DTD頭部 ,否則可能引起動(dòng)畫(huà)抖動(dòng)，標準模式即要求文件頭部包含如下的DTD定義：。。。
可以帶給這兩個(gè)方法帶參數,表示不同的顯示效果,主要是現實(shí)速度上的不同。關(guān)鍵字有：slow，600毫秒；normal：400毫秒；fast：200毫秒.或者直接指定一個(gè)數字,單位是毫秒.
$("element").show("slow");
$("element").hide(1000);
關(guān)鍵字有: slow,hide,normal(400),fast(200),毫秒的時(shí)間 ,也可以指定具體的數值,如 show(1000) 表示1000毫秒內 ,
漸變效果: fadeIn()方法和fadeOut()方法,只通過(guò)修改元素的不透明度,不改變元素的高度:
slideUp()方法和slideDown()方法,用于收放組件，值改變高度，不改變透明度
animate() 自定義動(dòng)畫(huà)類(lèi)型,彌補其他三種動(dòng)畫(huà)只能同時(shí)執行一種缺陷
注意需要在樣式里面設置position: relative或absolute其他絕對位置的布局,否則有可能導致效果無(wú)法顯示
animate({left:"500px"},3000,collback); 其中
第一個(gè){}里面用json形式設置動(dòng)畫(huà)要修改的屬性
第二個(gè)3000,表示持續時(shí)間,也可以使用slow等關(guān)鍵字代替
第三個(gè)collback為回調函數
屬性中 可以使用+= 來(lái)對元素進(jìn)行添加
常用的屬性有left,right,height,width,top,opacity(透明度,使用1-0之間),marginLeft,scrollTop如果分開(kāi),會(huì )連續的執行,并不會(huì )時(shí)執行 也可以使用鏈式的方法,設置多個(gè)動(dòng)畫(huà)效果,逐步執行
在使用動(dòng)畫(huà)時(shí),注意對元素屬性的修改,如樣式,將不會(huì )在動(dòng)畫(huà)結束后執行,需要使用回調函數中進(jìn)行變更 同樣回調函數也可以作用與其他的3個(gè)動(dòng)畫(huà)
使用stop可以立即結束指定元素的動(dòng)畫(huà),不帶參數,只會(huì )停止當前鏈表中的一個(gè)動(dòng)畫(huà),帶true參數則會(huì )結束所有動(dòng)畫(huà) 最多可以帶兩個(gè)參數,其中兩個(gè)都為true時(shí),將會(huì )停止所有動(dòng)畫(huà),并改變成動(dòng)畫(huà)的最終結果,一個(gè)為true時(shí),將會(huì )停止 動(dòng)畫(huà)效果,并且保持現狀
. is(":animated") 判斷指定元素是否在動(dòng)畫(huà)效果
其他動(dòng)畫(huà)效果
toggle() 切換元素的可見(jiàn)性,自動(dòng)來(lái)回切換隱藏與顯示 ,slideToggle() 通過(guò)高度來(lái)回切換匹配元素的可見(jiàn)性 , fadeTo() 使用透明度切換匹配元素的可見(jiàn)性,參數為時(shí)間和結果的透明度
案例：視頻動(dòng)畫(huà)的滾動(dòng)
1.當視頻展示內容處于最后一個(gè)版面的時(shí)候，如果再向后，應該跳到第一個(gè)版面
2.如果在第一個(gè)，再向前，應該跳到最后一個(gè)
3.藍色圓點(diǎn)應該一起切換
$(function(){
var page = 1;
var i = 4; //每版放4個(gè)圖片
//向后 按鈕
$("span.next").click(function(){ //綁定click事件
var $parent = $(this).parents("div.v_show");//根據當前點(diǎn)擊元素獲取到父元素
var $v_show = $parent.find("div.v_content_list"); //找到“視頻內容展示區域”
var $v_content = $parent.find("div.v_content"); //找到“視頻內容展示區域”外圍的DIV元素
var v_width = $v_content.width() ;
var len = $v_show.find("li").length;
var page_count = Math.ceil(len / i) ; //只要不是整數，就往大的方向取最小的整數
if( page == page_count ){ //已經(jīng)到最后一個(gè)版面了,如果再向后，必須跳轉到第一個(gè)版面。
$v_show.animate({ left : '0px'}, "slow"); //通過(guò)改變left值，跳轉到第一個(gè)版面
page = 1;
}else{
$v_show.animate({ left : '-='+v_width }, "slow"); //通過(guò)改變left值，達到每次換一個(gè)版面
page++;
}
$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
});
//往前 按鈕
$("span.prev").click(function(){
var $parent = $(this).parents("div.v_show");//根據當前點(diǎn)擊元素獲取到父元素
var $v_show = $parent.find("div.v_content_list"); //尋找到“視頻內容展示區域”
var $v_content = $parent.find("div.v_content"); //尋找到“視頻內容展示區域
var v_width = $v_content.width();
var len = $v_show.find("li").length;
var page_count = Math.ceil(len / i) ; //只要不是整數，就往大的方向取最小的整數
if( page == 1 ){ //已經(jīng)到第一個(gè)版面了,如果再向前，必須跳轉到最后一個(gè)版面。
$v_show.animate({ left : '-='+v_width*(page_count-1) }, "slow");
page = page_count;
}else{
$v_show.animate({ left : '+='+v_width }, "slow");
page--;
}
$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
});
});
聯(lián)系客服
