jQuery.cssHooks

直接向 jQuery 中添加钩子，用于覆盖设置或获取特定 CSS 属性时的方法，目的是为了标准化 CSS 属性名或创建自定义属性。

jQuery.cssHooks

$.cssHooks对象提供了一种方法通过定义函数来获取和设置特定的CSS值的方法。它也可以被用来创建新的cssHooks以标准化CSS3功能，如框阴影和渐变。

例如，某些版本基于Webkit的浏览器需要-webkit-border-radius属性来设置元素的border-radius，而早期的Firefox版本使用-moz-border-radius属性。一个CSS hook 可以标准化这些供应商前缀的属性，让.css()接受一个单一的，标准的属性的名称（border-radius，或用DOM属性的语法，borderRadius）。

除了提供了对特定样式的处理可以采用更加细致的控制外，$.cssHooks也扩展了.animate()方法上可用的属性。

定义一个新的css hook十分简单。下面的模板可以方便您创建自己的 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;
  }
 
  // Wrap in a document ready call, because jQuery writes
  // cssHooks at this time and will blow away your functions
  // if they exist.
  $(function () {
    $.cssHooks["someCSSProp"] = {
      get: function( elem, computed, extra ) {
        // handle getting the CSS property
      },
      set: function( elem, value ) {
        // handle setting the CSS value
      }
    };
  });
})(jQuery);

Feature Testing（功能测试）

在使供应商特定的CSS属性标准化前，首先要确定浏览器是否支持标准的属性或带浏览器供应商前缀的变种。例如，检查支持border-radius属性，还要检查该属性的任何变种写法是否是临时元素的style对象中的成员。
(function($) {
  function styleSupport( prop ) {
    var vendorProp, supportedProp,
 
        // capitalize first character of the prop to test vendor prefix
        capProp = prop.charAt(0).toUpperCase() + prop.slice(1),
        prefixes = [ "Moz", "Webkit", "O", "ms" ],
        div = document.createElement( "div" );
 
    if ( prop in div.style ) {
 
      // browser supports standard CSS property name
      supportedProp = prop;
    } else {
 
      // otherwise test support for vendor-prefixed property names
      for ( var i = 0; i < prefixes.length; i++ ) {
        vendorProp = prefixes[i] + capProp;
        if ( vendorProp in div.style ) {
          supportedProp = vendorProp;
          break;
        }
      }
    }
 
    // avoid memory leak in IE
    div = null;
 
    // add property to $.support so it can be accessed elsewhere
    $.support[ prop ] = supportedProp;
 
    return supportedProp;
  }
 
  // call the function, e.g. testing for "border-radius" support:
  styleSupport( "borderRadius" );
})(jQuery);
Defining a complete css hook（定义一个完整的css hook）
要定义一个完整的cssHook，首先我们需要测试您当前使用的 jQuery 版本是否支持 cssHooks 方法，此外，还要结合上面提到的例子：
(function($) {
  if ( !$.cssHooks ) {
    throw("jQuery 1.4.3+ is needed for this plugin to work");
    return;
  }
 
  function styleSupport( prop ) {
    var vendorProp, supportedProp,
        capProp = prop.charAt(0).toUpperCase() + prop.slice(1),
        prefixes = [ "Moz", "Webkit", "O", "ms" ],
        div = document.createElement( "div" );
 
    if ( prop in div.style ) {
      supportedProp = prop;
    } else {
      for ( var i = 0; i < prefixes.length; i++ ) {
        vendorProp = prefixes[i] + capProp;
        if ( vendorProp in div.style ) {
          supportedProp = vendorProp;
          break;
        }
      }
    }
 
    div = null;
    $.support[ prop ] = supportedProp
    return supportedProp;
  }
 
  var borderRadius = styleSupport( "borderRadius" );
 
  // Set cssHooks only for browsers that
  // support a vendor-prefixed border radius
  if ( borderRadius && borderRadius !== "borderRadius" ) {
    $.cssHooks.borderRadius = {
      get: function( elem, computed, extra ) {
        return $.css( elem, borderRadius );
      },
      set: function( elem, value) {
        elem.style[ borderRadius ] = value;
      }
    };
  }
})(jQuery);
然后，您可以在支持的浏览器中使用DOM（驼峰）样式或CSS（连字符号）的风格设置边框半径：
$("#element").css("borderRadius", "10px");
$("#another").css("border-radius", "20px");
如果浏览器不支持任何形式的CSS属性写法，并且也不支持任何前缀写法，那么该样式是不会应用到元素上的。但是，如果浏览器支持某种特殊的写法，那么可以在 cssHooks 中添加对该特殊用法的支持。
 (function($) {
  // feature test for support of a CSS property
  // and a proprietary alternative
  // ...
 
 
 if ( $.support.someCSSProp && $.support.someCSSProp !== "someCSSProp" ) {
 
    // Set cssHooks for browsers that
    // support only a vendor-prefixed someCSSProp
    $.cssHooks.someCSSProp = {
      get: function( elem, computed, extra ) {
        return $.css( elem, $.support.someCSSProp );
      },
      set: function( elem, value) {
        elem.style[ $.support.someCSSProp ] = value;
      }
    };
  } else if ( supportsProprietaryAlternative ) {
    $.cssHooks.someCSSProp = {
      get: function( elem, computed, extra ) {
        // Handle crazy conversion from the proprietary alternative
      },
      set: function( elem, value ) {
        // Handle crazy conversion to the proprietary alternative
      }
    }
  }
 
})(jQuery);
Special units（特殊单位）
默认情况下，传递给.css()方法的值，jQuery添加一个“px”单位。可以通过jQuery.cssNumber对象中添加属性的方法，来防止这种行为的发生
$.cssNumber["someCSSProp"] = true;
Animating with cssHooks（cssHooks动画）
通过向jQuery.fx.step对象中添加属性，cssHook 同样可以向 jQuery 的动画机制中添加钩子：
$.fx.step["someCSSProp"] = function(fx){
  $.cssHooks["someCSSProp"].set( fx.elem, fx.now + fx.unit );
};
注意，上述这种用法应用于简单的数值属性的动画是最好的。根据不同的 CSS 属性，返回值的类型以及动画的复杂性，可能需要在 cssHooks 写更多的代码。