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".
  

参数类型描述nameString要访问的属性名称nameArray一个或多个CSS属性组成的一个数组propertiesMap要设置为样式属性的名/值对name,valueString, Number属性名,属性值name,function(index, value)String,Function1:属性名
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) );