jQuery 的尺寸和位置操作

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

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

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

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

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

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

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

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

2.position() 獲取元素偏移

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

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

③該方法只能獲取。

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

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

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

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

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

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

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

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

①當我們滾動到 今日推薦 模塊，就讓電梯導航顯示出來

②點擊電梯導航頁面可以滾動到相應內(nèi)容區(qū)域

③核心算法：因為電梯導航模塊和內(nèi)容區(qū)模塊一一對應的

④當我們點擊電梯導航某個小模塊，就可以拿到當前小模塊的索引號

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

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

電梯導航添加li模塊

①當我們點擊電梯導航某個小li， 當前小li 添加current類，兄弟移除類名

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

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

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

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

⑥就利用這個索引號找到相應的電梯導航小li添加類。

演示jQuery的鏈式調(diào)用過程【前端面試題】

jQuery框架有什么特點？如何安裝jQuery？

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

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