jQuery的位置信息

  jQuery 的位置信息是JS的 client系列 , offset系列 , scroll系列 封裝好的一些簡單的api.

    一 . 寬度和高度      

　　寬度           

    1 . 獲取寬度     

.width()

   描述 : 爲匹配的元素集合中獲取第一個元素的當前計算寬度值.這個方法不接受任何參數. 

.css(width) 和 .width() 之間的區別是後者返回一個沒有單位的數值(例如 : 400),前者返回帶有完整單位的字符串(例如 : 400px). 當一個元素的寬度須要數學計算的時候推薦使用 .width()方法.

    2 .  設置寬度            

.width(value)

   描述 : 給每一個匹配的元素設置css寬度.

　　高度                

   1 . 獲取高度

.height()

     描述 : 獲取匹配元素集合中的第一個元素的當前計算高度值. 不接受任何參數.

   2 . 設置高度

.height(value)

    描述 :設置每個匹配元素的高度值

 

二 . innerHeight() 和 innerWidth()   

     1 . 獲取和設置內部寬 

         ● 獲取內部寬 : 

.innerWidth()

　　描述：爲匹配的元素集合中獲取第一個元素的當前計算寬度值,包括padding，可是不包括border。

　　注意:這個方法不適用於window 和 document對象，對於這些對象能夠使用.width()代替。

　　● 設置內部寬

.innerWidth(value);

　　描述： 爲匹配集合中的每一個元素設置CSS內部寬度。若是這個「value」參數提供一個數字，jQuery會自動加上像素單位（px）

    2 . 獲取和設置內部高

　　● 獲取內部高

.innerHeight()

　　描述：爲匹配的元素集合中獲取第一個元素的當前計算高度值,包括padding，可是不包括border。

　　注意:這個方法不適用於window 和 document對象，對於這些對象能夠使用.height()代替。

　　● 設置內部高

.innerHeight(value); 

　　描述： 爲匹配集合中的每一個元素設置CSS內部高度。若是這個「value」參數提供一個數字，jQuery會自動加上像素單位（px）

 

三 . outerWidth() 和 outerHeight()       

　1 . 獲取和設置外部寬

　　● 獲取外部寬

 .outerWidth( [includeMargin ] )

描述：獲取匹配元素集合中第一個元素的當前計算外部寬度（包括padding，border和可選的margin）

• includeMargin (默認: false)
  類型： Boolean
  一個布爾值，代表是否在計算時包含元素的margin值。
• 這個方法不適用於window 和 document對象，能夠使用.width()代替

　　● 設置外部寬

 .outerWidth( value )

描述： 爲匹配集合中的每一個元素設置CSS外部寬度。

    2 . 獲取和設置外部高

　　● 獲取外部高

.outerHeight( [includeMargin ] )

描述：獲取匹配元素集合中第一個元素的當前計算外部高度（包括padding，border和可選的margin）

• includeMargin (默認: false)
  類型： Boolean
  一個布爾值，代表是否在計算時包含元素的margin值。
• 這個方法不適用於window 和 document對象，能夠使用.width()代替

　　● 設置外部高

 .outerHeight( value )

描述： 爲匹配集合中的每一個元素設置CSS外部高度。

 

四 . 偏移     

       獲取    

.offset()

返回值：Object 。.offset()返回一個包含top 和 left屬性的對象 。

描述：在匹配的元素集合中，獲取的第一個元素的當前座標，座標相對於文檔。

注意：jQuery不支持獲取隱藏元素的偏移座標。一樣的，也沒法取得隱藏元素的 border, margin, 或 padding 信息。若元素的屬性設置的是 visibility:hidden，那麼咱們依然能夠取得它的座標

        設置         

 .offset( coordinates ) 

描述： 設置匹配的元素集合中每個元素的座標， 座標相對於文檔。

• coordinates
  類型: Object
  一個包含top 和 left屬性的對象，用整數指明元素的新頂部和左邊座標。

例子：

$("p").offset({ top: 10, left: 30 });

 

五 . 元素座標

 .position()

返回值：Object{top,left}

描述獲取匹配元素中第一個元素的當前座標，相對於offset parent的座標。(offset parent指離該元素最近的並且被定位過的祖先元素 )

當把一個新元素放在同一個容器裏面另外一個元素附近時，用.position()更好用。

 

六 . 滾動距離

    1 . 水平距離 

　　● 獲取     

.scrollLeft()

描述：獲取匹配的元素集合中第一個元素的當前水平滾動條的位置（頁面捲走的寬度）

　　● 設置     

.scrollLeft( value )

描述：設置每一個匹配元素的水平方向滾動條位置。

    2 . 垂直距離

　　● 獲取     

.scrollTop()

描述：獲取匹配的元素集合中第一個元素的當前遲滯滾動條的位置（頁面捲走的高度）

　　● 設置     

.scrollLeft( value )

描述：設置每一個匹配元素的垂直方向滾動條位置。