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