国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開(kāi)APP
userphoto
未登錄

開(kāi)通VIP,暢享免費(fèi)電子書(shū)等14項(xiàng)超值服

開(kāi)通VIP
jQuery事件和動(dòng)畫(huà)

加載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)

綁定元素的事件,typehtml事件類(lèi)型(blur、focusload、resize、scroll、unload、click、dbclick、mousedown、mouseup、mouseovermousemove、mouseout、mouseenter、mouseleave、change、select、submitkeydown、keypresskeyup、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、mouseovermouseout這類(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ā)外部divbody元素上的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)模式的xHtmlDTD頭部 ,否則可能引起動(dòng)畫(huà)抖動(dòng),標(biāo)準(zhǔn)模式即要求文件頭部包含如下的DTD定義:。。。

可以帶給這兩個(gè)方法帶參數(shù),表示不同的顯示效果,主要是現(xiàn)實(shí)速度上的不同。關(guān)鍵字有:slow,600毫秒;normal400毫秒;fast200毫秒.或者直接指定一個(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: relativeabsolute其他絕對(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");

    });

});

本站僅提供存儲(chǔ)服務(wù),所有內(nèi)容均由用戶(hù)發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊舉報(bào)。
打開(kāi)APP,閱讀全文并永久保存 查看更多類(lèi)似文章
猜你喜歡
類(lèi)似文章
生活服務(wù)
分享 收藏 導(dǎo)長(zhǎng)圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服