jquery鏈?zhǔn)秸{(diào)用 jquery動(dòng)畫 尺寸相關(guān)、滾動(dòng)事件

鏈?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元素

動(dòng)畫

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

$('#div1').animate({
width:300,
height:300
},1000,swing,function(){
alert('done!');
});

參數(shù)可以寫成數(shù)字表達(dá)式:
$('#div1').animate({
width:'+=100',
height:300
},1000,swing,function(){
alert('done!');
});

尺寸相關(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ì)頁面的絕對(duì)位置

offse()

3、獲取可視區(qū)高度

$(window).height();

4、獲取頁面高度

$(document).height();

5、獲取頁面滾動(dòng)距離

(document).scrollt op();(document).scrollLeft();

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

$(window).scroll(function(){
......
})

?著作權(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),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

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

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