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

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

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

開(kāi)通VIP
三. jQuery中的事件和動(dòng)畫

一、事件

1 加載DOM

$(document).ready(function(){//...})
    DOM加載完畢后執(zhí)行,在可重復(fù)使用上區(qū)別于window.onload=function(){//...}
$(window).load(function(){//...})
    window內(nèi)所有對(duì)象加載完畢后執(zhí)行,幾等同window.onload=function(){//...}。也可針對(duì)selector使用此方法

另:$(document).ready(function(){//...})的簡(jiǎn)寫方式:$(function(){//...})或$().ready(function(){//...})

2 事件綁定

$("selector").bind()
    為元素綁定事件,格式:bind(type[,data],fn),可多次調(diào)用
    type事件類型包括:blur, focus, load, resize, scroll, unload, click, dbclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error或者自定義事件
    簡(jiǎn)寫方法:$("selector").bind(type,function(){//...})等價(jià)于$("selector").type(function(){//...})
    可傳遞data參數(shù)以供unbind特定事件之用

$("selector").is()
    判斷方法

(外:方法多次重用可定義局部變量 var $x = $("selector").方法())


3 合成事件


$("selector").hover(enter,leave)
    模擬光標(biāo)懸停事件,鼠標(biāo)進(jìn)入時(shí)觸發(fā)enter事件,鼠標(biāo)移出時(shí)觸發(fā)leave事件(代替的是bind("mouseenter")和bind("mouseleave"))
    使用方法:$("selector").hover(function(){//enter case...},function(){//leave case...})
    (外:IE6不支持除a標(biāo)簽外css的:hover偽類的問(wèn)題——可用此hover事件作為hack來(lái)解決)

$("selector").toggle(fn1,fn2,...,fnN)
    模擬鼠標(biāo)連續(xù)單擊事件,按照單擊順序按次序循環(huán)執(zhí)行事件
    使用方法:$("selector").toggle(function(){//case1...},function(){//case2...},...,function(){//caseN})
    特殊用法:切換元素可見(jiàn)狀態(tài),如元素隱藏,單擊toggle觸發(fā)元素可使之可見(jiàn);元素可見(jiàn),單擊toggle觸發(fā)元素使之隱藏
P108例:

<script>$(function(){$("panel h5.head").toggle(function(){$(this).next().toggle();},function(){$(this).next().toggle();})})</script>
4 事件冒泡


$("selector").bind("type",function(event){//event:事件對(duì)象...})
    event事件對(duì)象:只有此函數(shù)內(nèi)部才能訪問(wèn)到,事件處理函數(shù)執(zhí)行完畢后,事件對(duì)象就被銷毀

event.stopPropagation()
    在函數(shù)最后用來(lái)停止事件冒泡
P111例:

<script>$('span').bind("click",function(event){var txt = $('msg').html() + "<p>內(nèi)層span元素被單擊</p>";$('#msg').html(txt);event.stopPropagation();})</script>event.preventDefault()
    阻止元素默認(rèn)行為
例:驗(yàn)證表單(input為空阻止提交并提示)

<script>$(function(){$("#submit").bind("click",function(event){var username=$("#username").val();if(username==""){$("#msg").html("<p> 文本框的值不能為空</p>");event.preventDefault();}});})</script>return false;
    同時(shí)對(duì)對(duì)象事件停止冒泡和默認(rèn)行為,等價(jià)于同時(shí)調(diào)用stopPrapagation()和preventDefault()

(外:事件捕獲和事件冒泡是相反的過(guò)程,事件捕獲是從DOM頂端往下開(kāi)始觸發(fā),jQuery不支持,故本書從略)


5 事件對(duì)象的屬性


event.type
    獲取事件類型
例:

<script>$("a").click(function(event){alert(event.type);return false;})</script>上面返回"click"

event.target
    獲取觸發(fā)事件的元素
例:

<script>$("a[href=http://google.com]").click(function(){alert(event.target.href);return false;})</script>上面返回"

event.relatedTarget
    訪問(wèn)事件相關(guān)元素

event.pageX / event.pageY
    獲取光標(biāo)相對(duì)于頁(yè)面的x坐標(biāo)和y坐標(biāo)

event.which
    在鼠標(biāo)單擊事件中獲取鼠標(biāo)的左、中、右鍵;在鍵盤事件中獲取鍵盤的按鍵(返回值1=鼠標(biāo)左鍵;2=鼠標(biāo)中鍵;3=鼠標(biāo)右鍵)

event.metaKey
    鍵盤事件中獲取<ctrl>按鍵

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


6 移除事件


$("selector").unbind()
    移除元素上的事件,格式:$("selector").unbind([type][,data]);(如果沒(méi)有參數(shù),則刪除所有綁定的事件;如果提供了事件類型參數(shù),則只刪除該類型的綁定事件;如果把在綁定時(shí)傳遞的處理函數(shù)作為第二個(gè)參數(shù),則只有這個(gè)特定的事件處理函數(shù)會(huì)被刪除)
例:

<script>$(function(){$('#btn').bind("click",myFun1=function(){    //先綁定$('#test').append("...");});})</script><script>$('#delOne').click(function(){$('#btn').unbind("click",myFun1);    //后刪除})</script>$("selector").one()
    綁定一個(gè)觸發(fā)一次即被刪除的事件,格式:$("selector").one(type[,data],fn);


7 模擬操作


$("selector").trigger("type");
    模擬用戶交互動(dòng)作,簡(jiǎn)寫方法:$("#selector").type(); 格式:$("selector").trigger(type[,data])
例:用單擊替代鼠標(biāo)經(jīng)過(guò)

<script>$("selector").mouseover(function{//...});$("selector2").click(function(){$("selector").trigger("mouseover");    //或者$("selector").mouseover()})</script>自定義事件的例子

<script>$("selector").bind("myClick",function(){//...});    //綁定自定義事件$("selector").trigger("myClick");    //觸發(fā)自定義事件</script>$("selector").trigger(type[,data])
    可以數(shù)組形式傳遞參數(shù)給回調(diào)函數(shù)
P119例:

<script>$("#btn").bind("myClick",function(event,message1,message2){$("#test").append("<p>"+message1+message2+"</p>");});$("#btn").trigger("myClick", ["我的自定義","事件"]);</script>
8 其他用法


$("selector").bind("type1 type2",function(){//...})
    一次性綁定多個(gè)事件類型
P119值得一看的例子

<script>$(function(){$("div").bind("mouseover mouseout",function(){$(this).toggleClass("over");    //切換class});})</script>$("selector").bind("type.命名空間",function(){//...})
    為多個(gè)事件添加事件命名空間,便于管理,刪除命名空間后,命名空間下的事件同時(shí)刪除,如:
$("div").bind("mouseover.plugin",function(){//...})
$("div").bind("click.plugin",function(){//...})
$("div").unbind(".plugin");

$("selector").trigger("type!")
    "!"用來(lái)選擇匹配不包含在命名空間中的type方法

 

二、動(dòng)畫


1 show()方法和hide()方法


$("selector").show()
 從display:none還原元素默認(rèn)或已設(shè)置的display屬性
$("selector").hide()
 設(shè)置元素的display樣式為none,等于$("selector").css("display","none")
(注:傳入?yún)?shù)后,.show()和.hide()方法同時(shí)動(dòng)畫改變?cè)氐膚idth,height和透明屬性;傳入?yún)?shù)控制顯隱速度,單位毫秒,如.show(600),也可傳入fast,normal,slow,fast為200毫秒,normal為400毫秒,slow為600毫秒)


2 fadeIn()方法和fadeOut()方法


$("selector").fadeIn()
 控制透明度在指定時(shí)間內(nèi)從display:none提高至完全顯示
$("selector").fadeOut()
 控制透明度在指定時(shí)間內(nèi)降低至display:none;


3 slideUp()方法和slideDown()方法


$("selector").slideUp()
 控制元素高度在指定時(shí)間內(nèi)從下到上縮短至display:none;
$("selector").slideDown()
 控制元素高度在指定時(shí)間內(nèi)從display:none延伸至完整高度


4 自定義動(dòng)畫方法animate()


$("selector").animate(params,speed,callback);
 params:一個(gè)包含樣式屬性及值的映射,比如{property1:"value1",property2:"value2",...}
 speed:速度參數(shù),可選
 callback:在動(dòng)畫完成時(shí)執(zhí)行的參數(shù)(即回調(diào)函數(shù)),可選

常見(jiàn)的動(dòng)畫例子

<script>//自定義動(dòng)畫的例子$(function(){$("selector").click(function(){$(this).animate({left:"500px"},3000); //selector在3秒內(nèi)向右移動(dòng)500px});})</script><script>//累加、累減動(dòng)畫的例子$(function(){$("selector").click(function(){$(this).animate({left:"+=500px"},3000); //連續(xù)觸發(fā)click事件時(shí),在當(dāng)前位置累加500px});})</script><script>//多重動(dòng)畫的例子$(function(){$("selector").click(function(){$(this).animate({left:"500px",top:"300px",height:"+=100px"},3000); //向右下30度方向運(yùn)動(dòng),同時(shí)增加高度});})</script><script>//按順序執(zhí)行多個(gè)動(dòng)畫的例子$(function(){$("selector").click(function(){$(this).animate({left:"500px"},3000).animate({top:"300px"},3000); //動(dòng)畫隊(duì)列});})</script>5 動(dòng)畫回調(diào)函數(shù)


因css()方法不會(huì)加入動(dòng)畫隊(duì)列中,則會(huì)馬上執(zhí)行。如若要在動(dòng)畫最后改變selector的css,需要利用回調(diào)函數(shù)
例:

<script>$("selector").click(function(){$(this).animate({property1:"value1"},time).animate({property2:"value2"},time,function(){$(this).css("property3","value3"); //css()方法利用回調(diào)函數(shù)加入動(dòng)畫隊(duì)列});})</script>(注:動(dòng)畫回調(diào)函數(shù)適用于jQuery所有的動(dòng)畫效果方法)


6 停止動(dòng)畫和判斷是否處于動(dòng)畫狀態(tài)


$("selector").stop()
 結(jié)束當(dāng)前動(dòng)畫,如隊(duì)列中存在下一個(gè)動(dòng)畫則立即執(zhí)行下一個(gè)動(dòng)畫,格式$("selector").stop([clearQueue][,gotoEnd])

切換動(dòng)畫的例子:

<script>$("selector").hover(function(){$(this).stop().animate();},function(){$(this).stop().animate();})</script>clearQueue參數(shù)設(shè)置為true時(shí),將清空當(dāng)前元素接下來(lái)尚未執(zhí)行完的動(dòng)畫隊(duì)列
例:

<script>$("selector").hover(function(){$(this).stop(true).animate().animate() //如此時(shí)觸發(fā)光標(biāo)移出事件,直接跳過(guò)后面的動(dòng)畫隊(duì)列,避免執(zhí)行本隊(duì)列第二個(gè)動(dòng)畫},function(){$(this).stop(true).animate().animate()})</script>
gotoEnd參數(shù)設(shè)置為true時(shí),可將正在執(zhí)行的動(dòng)畫直接到達(dá)結(jié)束時(shí)刻的狀態(tài)

is(":animated")
 判斷元素是否處于動(dòng)畫狀態(tài),可用于防止動(dòng)畫累積
例:

<script>if(!$("selector").is(":animated")){ //判斷元素是否正處于動(dòng)畫狀態(tài) //如果當(dāng)前沒(méi)有進(jìn)行動(dòng)畫,則添加新動(dòng)畫}</script>
7 其他動(dòng)畫方法


3個(gè)專門用于交互的動(dòng)畫方法:toggle(speed,[callback]); slideToggle(speed,[callback]); fadeTo(speed,opacity,[callback])

$("selector").toggle()
 切換元素的可見(jiàn)狀態(tài),如元素隱藏則切換為可見(jiàn),反之亦然

$("selector").slideToggle()
 通過(guò)高度變化來(lái)切換元素的可見(jiàn)性

$("selector").fadeTo()
 把元素的不透明度以漸進(jìn)方式調(diào)整到指定的值,如$("selector").fadeTo(600,0.2);以600毫秒速度將內(nèi)容調(diào)整到20%透明度


8 動(dòng)畫方法概括


toggle()用來(lái)代替hide()和show()
slideToggle()用來(lái)代替slideUp()和slideDown()
animate()可代替所有動(dòng)畫方法

打開(kāi)APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
jquery添加光棒效果的各種方式以及簡(jiǎn)單動(dòng)畫復(fù)雜動(dòng)畫
jQuery基礎(chǔ)
jQuery解綁事件
鋒利的jQuery(5)事件和動(dòng)畫
jquery
JQuery UI
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長(zhǎng)圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服