jquery鏈?zhǔn)秸{(diào)用及動(dòng)畫、觸發(fā)事件

jquery鏈?zhǔn)秸{(diào)用:

jquery對(duì)象的方法會(huì)在執(zhí)行完后返回這個(gè)jquery對(duì)象,所有jquery對(duì)象的方法可以連起來寫:

$('#div1') // id為div1的元素

.children('ul') //該元素下面的ul子元素

.slideDown('fast') //高度從零變到實(shí)際高度來顯示ul元素

.parent() //跳到ul的父元素,也就是id為div1的元素

.siblings() //跳到div1元素平級(jí)的所有兄弟元素

.children('ul') //這些兄弟元素中的ul子元素

.slideUp('fast'); //高度實(shí)際高度變換到零來隱藏ul元素


jquery動(dòng)畫 :

通過animate方法可以設(shè)置元素某屬性值上的動(dòng)畫,可以設(shè)置一個(gè)或多個(gè)屬性值,動(dòng)畫執(zhí)行完成后會(huì)執(zhí)行一個(gè)函數(shù)。


尺寸相關(guān)、滾動(dòng)事件 :

1、獲取和設(shè)置元素的尺寸

width()、height() 獲取元素width和height

innerWidth()、innerHeight() 包括padding的width和height

outerWidth()、outerHeight() 包括padding和border的width和height

outerWidth(true)、outerHeight(true) 包括padding和border以及margin的width和height

2、獲取元素相對(duì)頁(yè)面的絕對(duì)位置:offse()

3、獲取可視區(qū)高度:$(window).height();

4、獲取頁(yè)面高度:$(document).height();

5、獲取頁(yè)面滾動(dòng)距離:$(document).scrollTop();

                                    $(document).scrollLeft();

6、頁(yè)面滾動(dòng)事件:



jquery事件 :

事件函數(shù)列表:

blur() 元素失去焦點(diǎn)

focus() 元素獲得焦點(diǎn)

change() 表單元素的值發(fā)生變化

click() 鼠標(biāo)單擊

dblclick() 鼠標(biāo)雙擊

mouseover() 鼠標(biāo)進(jìn)入(進(jìn)入子元素也觸發(fā))

mouseout() 鼠標(biāo)離開(離開子元素也觸發(fā))

mouseenter() 鼠標(biāo)進(jìn)入(進(jìn)入子元素不觸發(fā))

mouseleave() 鼠標(biāo)離開(離開子元素不觸發(fā))

hover() 同時(shí)為mouseenter和mouseleave事件指定處理函數(shù)

mouseup() 松開鼠標(biāo)

mousedown() 按下鼠標(biāo)

mousemove() 鼠標(biāo)在元素內(nèi)部移動(dòng)

keydown() 按下鍵盤

keypress() 按下鍵盤

keyup() 松開鍵盤

load() 元素加載完畢

ready() DOM加載完成

resize() 瀏覽器窗口的大小發(fā)生改變

scroll() 滾動(dòng)條的位置發(fā)生變化

select() 用戶選中文本框中的內(nèi)容

submit() 用戶遞交表單

toggle() 根據(jù)鼠標(biāo)點(diǎn)擊的次數(shù),依次運(yùn)行多個(gè)函數(shù)

unload() 用戶離開頁(yè)面

綁定事件的其他方式

$(function(){

$('#div1').bind('mouseover click', function(event) {

    alert($(this).html());

});

});

取消綁定事件

$(function(){

$('#div1').bind('mouseover click', function(event) {

    alert($(this).html());

    // $(this).unbind();

    $(this).unbind('mouseover');

});

});


主動(dòng)觸發(fā)與自定義事件 :

主動(dòng)觸發(fā)

可使用jquery對(duì)象上的trigger方法來觸發(fā)對(duì)象上綁定的事件。

自定義事件

除了系統(tǒng)事件外,可以通過bind方法自定義事件,然后用tiggle方法觸發(fā)這些事件。

//給element綁定hello事件

element.bind("hello",function(){

alert("hello world!");

});

//觸發(fā)hello事件

element.trigger("hello");

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 公眾號(hào):小小的星光 戰(zhàn)爭(zhēng)不是靠撤退而贏得的。但是,這次救援卻孕育了勝利。 《敦刻爾克》這部電影帶給我的觀影體驗(yàn)很有...
    小小汀閱讀 448評(píng)論 0 0
  • iOS 7增加了UIKit Dynamics庫(kù),其集成于UIKit框架中,將2D物理引擎引入了UIKit,提供了以...
    pro648閱讀 2,972評(píng)論 2 14
  • 七月初,陽(yáng)光正好,我“嘩”的一聲拉開巨大的落地窗,初晨的陽(yáng)光灑落在原木地板上,身處二十三樓的我往下俯視,房門外響起...
    SpiritedAway芊閱讀 806評(píng)論 0 0
  • 陽(yáng)春三月,微風(fēng)輕拂過臉龐。 我漫步于長(zhǎng)青路上,兩旁青松,那么大,那么直,那么默默地守護(hù)著這條長(zhǎng)青路...
    大圣老師閱讀 1,046評(píng)論 1 2
  • 夏yan閱讀 387評(píng)論 0 0

友情鏈接更多精彩內(nèi)容