jQuery 的尺寸和位置操作

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

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

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

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

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

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

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

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

2.position() 獲取元素偏移

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

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

③該方法只能獲取。

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

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

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

案例：帶有動畫的返回頂部

①核心原理： 使用animate動畫返回頂部。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

jQuery如何使用css方法修改單個樣式？

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