jquery溫故知新-css篇

1.css(name|pro|[,val|fn]) ^1.9*

• 訪問匹配元素的樣式屬性。
• jQuery 1.8中，當你使用CSS屬性在css()或animate()中，我們將根據瀏覽器自動加上前綴(在適當的時候)，比如("user-select", "none"); 在Chrome/Safari瀏覽器中我們將設置爲"-webkit-user-select", Firefox會使用"-moz-user-select", IE10將使用"-ms-user-select".

參數	類型	描述
name	String	要訪問的屬性名稱
name	Array	一個或多個CSS屬性組成的一個數組
properties	Map	要設置爲樣式屬性的名/值對
name,value	String, Number	屬性名,屬性值
name,function(index, value)	String,Function	1:屬性名 2:此函數返回要設置的屬性值。接受兩個參數，index爲元素在對象集合中的索引位置，value是原先的屬性值。

//獲取顏色、背景色
$("p").css(["color", "background" ]);//{ "color": "#ff0011", "background": "blue" } 

//逐漸增加div的大小
  $("div").click(function() {
    $(this).css({
      width: function(index, value) {
        return parseFloat(value) * 1.2;
      }, 
      height: function(index, value) {
        return parseFloat(value) * 1.2;
      }
    });
  });

2.jQuery.cssHooks

• 直接向jQuery中添加鉤子，用於覆蓋設置或獲取特定CSS屬性時的方法，目的是爲了標準化CSS屬性名或創建自定義屬性。
• $.cssHooks 對象提供了一種通過定義函數來獲取或設置特定 CSS 值的方法。可以用它來創建新的 cssHooks 用於標準化 CSS3 功能，例如，盒子陰影（box shadows）及漸變（gradients）。
• 例如，某些基於 Webkit 的瀏覽器會使用 -webkit-border-radius 來設置對象的 border-radius，然而,早先版本的 Firefox 則使用 -moz-border-radius。cssHook 就可以將這些不同的寫法進行標準化，從而讓 .css() 可以使用統一的標準化屬性名(border-radius 或對應的 DOM 屬性寫法 borderRadius)。
• 該方法除了提供了對特定樣式的處理可以採用更加細緻的控制外，$.cssHooks 同時還擴展了 .animate() 方法上的屬性集。
• 定義一個新的 cssHook 十分簡單。下面的模板可以方便您創建自己的 cssHook：

(function($) {
    // first, check to see if cssHooks are supported
    if ( !$.cssHooks ) {
      // if not, output an error message
      throw("jQuery 1.4.3 or above is required for this plugin to work");
      return;
    }
      $.cssHooks["someCSSProp"] = {
      get: function( elem, computed, extra ) {
        // handle getting the CSS property
      },      set: function( elem, value ) {
        // handle setting the CSS value 
     }
    };
  })(jQuery);  

3.offset([coordinates]) 與 position()

• 區別
  • offset([coordinates]) 獲取匹配元素在當前視口的相對偏移。
  • position() 獲取匹配元素相對父元素的偏移。
• 相同：返回的對象包含兩個整型屬性：top 和 left，以像素計。此方法只對可見元素有效。

//get
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
//set
$("p:last").offset({ top: 10, left: 30 });

4.scrollTop([val])與scrollLeft([val])

• 區別
  • scrollTop([val]) 獲取匹配元素相對滾動條頂部的偏移。
  • scrollLeft([val]) 獲取匹配元素相對滾動條左側的偏移。
• 相同：此方法對可見和隱藏元素均有效。

//get
var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );
//set
$("div.demo").scrollTop(300);

5.width([val|fn]) 與 height([val|fn])

• 區別
  • width([val|fn]) 取得第一個匹配元素當前計算的寬度值（px）。
  • height([val|fn]) 取得匹配元素當前計算的高度值（px）
• 相同：在 jQuery 1.2 以後可以用來獲取 window 和 document 的寬和高

$("p").height();
$("p").height(20);
//以 10 像素的幅度增加 p 元素的高度
$("button").click(function(){
    $("p").height(function(n,c){//接收元素的索引位置和元素舊的高度值作爲參數。
    	return c+10;
    });
});

6. innerWidth() 與 innerHeight()

• 區別
  • innerWidth() 獲取第一個匹配元素內部區域寬度（包括補白、不包括邊框）。
  • innerHeight() 獲取第一個匹配元素內部區域高度（包括補白、不包括邊框）。
• 相同：此方法對可見和隱藏元素均有效。

var p = $("p:first");
$("p:last").text( "innerWidth:" + p.innerWidth() );

7.outerWidth([options]) 與 outerHeight([options])

• 區別
  • innerWidth() 獲取第一個匹配元素外部寬度（默認包括補白和邊框）。
  • innerHeight() 獲取第一個匹配元素外部高度（默認包括補白和邊框）。
• 相同：此方法對可見和隱藏元素均有效。

參數

• options 設置爲 true 時，計算邊距在內。

var p = $("p:first");
$("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );