鋒利的jQuery第2版學習筆記四、5章

第4章,jQuery中的事件和動畫

注意:使用的jQuery版本爲1.7.1

jQuery中的事件

JavaScript中一般使用window.onload方法,jQuery中使用$(document).ready()方法。
一、執行時機
window.onload方法在網頁全部元素都加載完畢以後才執行,$(document).ready()方法在DOM徹底就緒就能夠被調用
因爲$(document).ready()方法內註冊事件,只要DOM就緒就會被執行,所以有可能此時元素的關聯文件還未下載完,例如圖片的寬高可能無效。爲解決此問題,使用jQuery另外一個方法-----load()方法。load()方法會在元素的onload事件綁定一個處理函數。
$(window).load(function(){
     //編寫代碼
});

等價於:css

window.onload = function(){
     //編寫代碼
};
二、屢次使用
windows.onload()方法不能保存多個函數引用,而$(document).ready()能夠
三、簡寫形式
$(document).ready(function(){
     //編寫代碼
});

簡寫:jquery

$(function(){
     //編寫代碼
});

$(document)也能夠簡寫爲$(),當$()不帶參數時,默認參數就是document,所以還能夠簡寫:windows

$().ready(function(){
     // coding
});
3種方式都是同樣的功能

事件綁定

使用bind()方法來對匹配元素進行特定事件綁定,調用格式:
bind(type [,datd] ,fn);
第一個參數是事件類型,包括:blur、focus、load、resize、scroll等等,固然也能夠是自定義名稱
第二個參數是可選參數,做爲event.data屬性值傳遞給事件對象的額外數據對象
第三個參數則是用來綁定的處理函數
使用:
$("#panel h5.head").bind("click",function(){
     // coding
});

合成事件

jQuery有兩個合成事件---hover()、toggle(),相似ready(),hover()和toggle()都是jQuery自定義方法
一、hover()方法
hover(enter,leave)
用於模擬光標懸停事件,當光標移動到元素上,觸發指定的第一個函數,移出元素,觸發指定的第二個函數
二、toggle()方法
toggle(fn1,fn2,fn3.....), 在jQuery1.9被移除
用於模擬鼠標連續點擊事件,第1次點擊觸發第一個函數,第2次點擊觸發第二個函數,第3次點擊觸發第三個,依次類推,重複調用

事件冒泡

中止事件冒泡
使用event.stopPropagation()能夠中止事件冒泡
阻止默認行爲
網頁中的元素有本身的默認行爲,例如點擊超連接會跳轉、單擊提交按鈕,表單會提交,有時需阻止事件默認行爲
jQuery中提供了preventDefault()方法來阻止默認行爲
event.preventDefault()
注:若想對事件對象中止冒泡和默認行爲,能夠在事件處理函數中返回false,這是對在事件對象上同時調用stopPropagation和preventDefault的一種簡寫方式

事件對象屬性

一、event.type,獲取事件的類型
二、event.preventDefault(),阻止默認行爲
三、event.stopPropagation(),阻止事件冒泡
四、event.target,獲取觸發事件的元素
五、event.relatedTarget,在標準DOM中,mouseout和mouseout所發生的元素能夠經過event.target來訪問,相關元素能夠經過event.relatedTarget訪問
六、event.pageX和event.pageY,用於獲取光標相對於頁面的x座標和y座標,若頁面有滾動條,還要加上滾動條的寬高
七、event.which,在鼠標事件中獲取鼠標的左(1)、中(2)、右鍵(3),在鍵盤事件中獲取鍵盤的按鍵
八、event.metaKey,鍵盤事件中獲取<ctrl>按鍵

移除事件

一、移除按鈕元素上之前註冊的事件
使用unbind()方法,語法結構:
unbind([type],[data]);
第一個參數是事件類型,第二個參數是要移除的函數
(1)若沒有參數,刪除全部綁定事件
(2)若提供了事件類型做爲參數,則只刪除該類型的綁定事件
(3)若都傳遞,則只有這個特定的事件處理函數會被刪除
注:對於只須要觸發一次,以後就解綁的狀況,jQuery提供了one()方法,能夠爲元素綁定處理函數,觸發一次以後,當即刪除
one()方法的結構與bind()方法相似,使用方法也與bind()方法相似,語法結構:
one(type [,data] ,fn);

模擬操做

一、經常使用模擬

使用trigger()方法完成模擬操做:
$("#btn").trigger("click");     // 觸發id爲btn的click事件
// 也能夠簡化:
$("#btn").click();

二、觸發自定義事件

trigger()方法不只可觸發瀏覽器支持的具備相同名稱的事件,也能夠觸發自定義名稱的事件
例:
$('#btn').bind("myClick",function(){
    $('#test').append("<p>個人自定義事件</p>");
});
$('#btn').trigger("myClick");

三、傳遞數據

$('#btn').bind("myClick",function(event,message1,message2){
    $('#test').append("<p>"+message1+message2+"</p>");
});
$('#btn').trigger("myClick",["個人自定義","事件"]);

四、執行默認操做

trigger()方法觸發事件後,還會執行瀏覽器默認操做
$('input').trigger("focus");
不只會觸發綁定在input上的事件,也會使input元素得到焦點
使用triggerHandler()方法能夠只觸發事件,而不執行瀏覽器默認操做
$('input').triggerHandler("focus");
只會觸發綁定事件,不會是input元素得到焦點

其餘用法

一、綁定多個事件類型

$(function(){
     $("div").bind("mouseout mouseover",function(){
          //do something 
     });
};

二、添加事件命名空間,便於管理

$(function(){
    $('div').bind("click.plugin",function(){
        $('body').append("<p>click事件</p>");
    });
    $('div').bind("mouseover.plugin",function(){
        $('body').append("<p>mouseover事件</p>");
    });
    $('div').bind("dbclick",function(){
        $('body').append("<p>dbclick事件</p>");
    });
    $('button').click(function(){
        $('div').unbind(".plugin");
    });
});
在所綁定的事件後面添加命名空間,刪除時只須要指定命名空間便可,單擊<button>後,plugin的命名空間被刪除,而再也不plugin空間中的dbclick事件依然存在

三、相同事件名稱,不一樣命名空間執行方法

$(function(){
    $('div').bind("click",function(){
        $('body').append("<p>click事件</p>");
    });
    $('div').bind("click.plugin",function(){
        $('body').append("<p>click.plugin事件</p>");
    });
    $('button').click(function(){
        $('div').trigger("click!"); //注意感嘆號
    });
});
單擊<div>元素後,會同時觸發click事件和click.plugin事件,若只單擊<button>則只觸發click事件,不觸發click.plugin事件,注意trigger("click!")後面的感嘆號的做用是匹配全部不包含命名空間中的click方法
若二者都要觸發,改成以下代碼:
$("div").trigger("click");

jQuery中的動畫

一、show()方法和hide()方法
(1)show()方法和hide()方法
調用hide()方法會將該元素的display樣式改成「none」
元素隱藏後可使用show()方法將元素的display樣式設置爲先前的顯示狀態
(2)show()方法和hide()方法讓元素動起來
但願調用show()方法時元素慢慢地顯示出來,能夠爲show()方法指定一個速度參數,例如,速度關鍵字「slow」
$(「element」).show("slow");
元素會在600ms內慢慢顯示,還有normal(400ms),fast(200ms),還能夠指定一個數字(單位是毫秒)
$(function(){
    $("#panel h5.head").toggle(function(){
        $(this).next().show("slow");
    },function(){
        $(this).next().hide(1000);
    });
});
二、fadeIn()方法和fadeOut()方法
fadeIn(),fadeOut()只改變元素的不透明度,fadeOut()會在指定的時間內下降元素的不透明度,直至元素徹底消失(display:none),fadeIn()相反。
$(function(){
    $("#panel h5.head").toggle(function(){
        $(this).next().fadeOut();
    },function(){
        $(this).next().fadeIn();
    });
});
也可使用關鍵字和指定時間參數,單位毫秒
三、slideUp()方法和slideDown()方法
這兩個方法只會改變元素的高度,若一個元素的display爲none,slideDown()會將這個元素自上而下延伸顯示,slideUp()正好相反
$(function(){
    $("#panel h5.head").toggle(function(){
        $(this).next().slideDown();
    },function(){
        $(this).next().slideUp();
    });
});
同樣可使用關鍵字和指定時間參數,單位毫秒

自定義動畫方法animate()

animate(params, speed, callback);
(1)params:一個包含樣式屬性及值的映射,例:{property:"value",property:"value1",....}
(2)speed:速度參數,可選
(3)callback:動畫完成時執行的函數,可選
一、自定義簡單動畫
<div id="panels"></div>
#panels{
    position: relative;
    width: 100px;
    height: 100px;
    border: 1px solid #0050d0;
    background: #96e555;
    cursor: pointer;
}
$(function(){
    $("#panels").click(function(){
        $(this).animate({left:"500px"},3000);
    });
});
三秒以內,div右移500px,只會移動一次
二、累加、累減動畫
$(function(){
    $("#panels").click(function(){
        $(this).animate({left:"+=500px"},3000);
    });
});
三、多重動畫
(1)同時執行多個動畫
$(function(){
    $("#panels").click(function(){
        $(this).animate({left:"500px",width:"200px",height:"200px"},3000);
    });
});
這是同時執行的動畫
(2)按順序執行多個動畫
把多個動畫拆開便可
$(function(){
    $("#panels").click(function(){
        $(this).animate({left:"500px"},3000);
        $(this).animate({width:"200px"},3000);
        $(this).animate({height:"200px"},3000);
    });
});

鏈式寫法:瀏覽器

$(function(){
    $("#panels").click(function(){
        $(this).animate({left:"500px"},3000)
                .animate({width:"200px"},3000)
                .animate({height:"200px"},3000);
    });
});

四、綜合動畫app

$(function(){
    $("#panels").css("opacity","0.5");//設置不透明度
    $("#panels").click(function(){
        $(this).animate({left:"400px",height:"200px",opacity:"1"},3000)
                .animate({top:"200px",width:"200px"},3000)
                .fadeOut("slow");
    });
});
五、動畫回調函數
若想在最後完成時改變CSS樣式,而不是淡出,則須要使用回調函數,而不是將css()方法寫在fadeOut()方法的位置,由於css()方法並不會加入動畫隊列
$(function(){
    $("#panels").css("opacity","0.5");//設置不透明度
    $("#panels").click(function(){
        $(this).animate({left:"400px",height:"200px",opacity:"1"},3000)
                .animate({top:"200px",width:"200px"},3000,function(){
                    $(this).css("border","5px solid blue");
                });
    });
});

注:callback回調函數適合jQuery的全部動畫效果ide

中止動畫和判斷是否處於動畫狀態

一、中止元素的動畫
使用stop()方法
stop([clearQueue],[gotoEnd]);
參數均爲可選參數,爲boolean值
clearQueue表示是否清空動畫隊列,gotoEnd表示直接將正在執行的動畫跳轉到末狀態
若是直接使用stop()方法,則會當即中止正在執行的動畫,若還有動畫等待執行,則以當前狀態繼續執行下一個動畫
二、判斷元素是否處在動畫狀態
if(!$("element").is(":animate")){
    //do something
}
三、延遲動畫
使用delay()方法能夠對動畫進行延遲操做
$(function(){
    $("#panels").css("opacity","0.5");//設置不透明度
    $("#panels").click(function(){
        $(this).animate({left:"400px",height:"200px",opacity:"1"},3000)
                .delay(1000)     // 延遲的是下一個動畫
                .animate({top:"200px",width:"200px"},3000);
    });
});

其餘動畫方法

一、toggle(speed,[callback])方法
二、slideToggle(speed,[easing],[callback]);
三、fadeTo(speed,opacity,[callback]);
四、fadeToggle(speed,[easing],[callback]);
一、toggle()
可切換元素的可見狀態
$("#panel h5.head").click(function(){
    $(this).next().toggle();
});

等價於:函數

$(function(){
    $("#panel h5.head").toggle(function(){
        $(this).next().show("slow");
    },function(){
        $(this).next().hide(1000);
    });
});
二、slideToggle()方法
經過高度變化切換匹配元素可見性
三、fadeTo()方法
把元素的不透明度以漸進方式調整到指定值,只調整元素的不透明度,
四、fadeToggle()方法
經過元素不透明度變化來切換元素的可見性,只調整元素的不透明度

第5章,jQuery對錶單、表格的操做及更多應用

本章大可能是使用前面介紹的方法的應用,沒啥筆記
相關文章
相關標籤/搜索