jQuery 的尺寸和位置操作

以上參數(shù)為空，則是獲取相應(yīng)值，返回的是數(shù)字型。

如果參數(shù)為數(shù)字，則是修改相應(yīng)值。

參數(shù)可以不必寫單位。

jQuery位置主要有三個(gè)： offset()、position()、scrollTop()/scrollLeft()

1.offset() 設(shè)置或獲取元素偏移

①offset() 方法設(shè)置或返回被選元素相對(duì)于文檔的偏移坐標(biāo)，跟父級(jí)沒(méi)有關(guān)系。

②該方法有2個(gè)屬性 left、top 。offset().top 用于獲取距離文檔頂部的距離，offset().left 用于獲取距離文檔左側(cè)的距離。

③可以設(shè)置元素的偏移：offset({ top: 10, left: 30 });

2.position() 獲取元素偏移

①position() 方法用于返回被選元素相對(duì)于帶有定位的父級(jí)偏移坐標(biāo)，如果父級(jí)都沒(méi)有定位，則以文檔為準(zhǔn)。

②該方法有2個(gè)屬性 left、top。position().top 用于獲取距離定位父級(jí)頂部的距離，position().left 用于獲取距離定位父級(jí)左側(cè)的距離。

③該方法只能獲取。

3.scrollTop()/scrollLeft() 設(shè)置或獲取元素被卷去的頭部和左側(cè)

①scrollTop() 方法設(shè)置或返回被選元素被卷去的頭部。

②不跟參數(shù)是獲取，參數(shù)為不帶單位的數(shù)字則是設(shè)置被卷去的頭部。

案例：帶有動(dòng)畫的返回頂部

①核心原理： 使用animate動(dòng)畫返回頂部。

②animate動(dòng)畫函數(shù)里面有個(gè)scrollTop 屬性，可以設(shè)置位置

③但是是元素做動(dòng)畫，因此 $(“body,html”).animate({scrollTop: 0})

案例： 品優(yōu)購(gòu)電梯導(dǎo)航

①當(dāng)我們滾動(dòng)到 今日推薦 模塊，就讓電梯導(dǎo)航顯示出來(lái)

②點(diǎn)擊電梯導(dǎo)航頁(yè)面可以滾動(dòng)到相應(yīng)內(nèi)容區(qū)域

③核心算法：因?yàn)殡娞輰?dǎo)航模塊和內(nèi)容區(qū)模塊一一對(duì)應(yīng)的

④當(dāng)我們點(diǎn)擊電梯導(dǎo)航某個(gè)小模塊，就可以拿到當(dāng)前小模塊的索引號(hào)

⑤就可以把a(bǔ)nimate要移動(dòng)的距離求出來(lái)：當(dāng)前索引號(hào)內(nèi)容區(qū)模塊它的offset().top

⑥然后執(zhí)行動(dòng)畫即可

電梯導(dǎo)航添加li模塊

①當(dāng)我們點(diǎn)擊電梯導(dǎo)航某個(gè)小li， 當(dāng)前小li 添加current類，兄弟移除類名

②當(dāng)我們頁(yè)面滾動(dòng)到內(nèi)容區(qū)域某個(gè)模塊， 左側(cè)電梯導(dǎo)航，相對(duì)應(yīng)的小li模塊，也會(huì)添加current類， 兄弟移除current類。

③觸發(fā)的事件是頁(yè)面滾動(dòng)，因此這個(gè)功能要寫到頁(yè)面滾動(dòng)事件里面。

④需要用到each，遍歷內(nèi)容區(qū)域大模塊。 each里面能拿到內(nèi)容區(qū)域每一個(gè)模塊元素和索引號(hào)

⑤判斷的條件： 被卷去的頭部 大于等于 內(nèi)容區(qū)域里面每個(gè)模塊的offset().top

⑥就利用這個(gè)索引號(hào)找到相應(yīng)的電梯導(dǎo)航小li添加類。

演示jQuery的鏈?zhǔn)秸{(diào)用過(guò)程【前端面試題】

jQuery框架有什么特點(diǎn)？如何安裝jQuery？

jQuery如何使用css方法修改單個(gè)樣式？

傳智教育前端與移動(dòng)開發(fā)高手班培訓(xùn)