返回值:ObjectjQuery.cssHooks
1.4.3概述
直接向 jQuery 中添加鉤子，用于覆蓋設(shè)置或獲取特定 CSS 屬性時(shí)的方法，目的是為了標(biāo)準(zhǔn)化 CSS 屬性名或創(chuàng)建自定義屬性。
$.cssHooks 對象提供了一種通過定義函數(shù)來獲取或設(shè)置特定 CSS 值的方法。可以用它來創(chuàng)建新的 cssHooks 用于標(biāo)準(zhǔn)化 CSS3 功能，例如，盒子陰影（box shadows）及漸變（gradients）。
例如，某些基于 Webkit 的瀏覽器會(huì)使用 -webkit-border-radius 來設(shè)置對象的 border-radius，然而,早先版本的 Firefox 則使用 -moz-border-radius。cssHook 就可以將這些不同的寫法進(jìn)行標(biāo)準(zhǔn)化，從而讓 .css() 可以使用統(tǒng)一的標(biāo)準(zhǔn)化屬性名(border-radius 或?qū)?yīng)的 DOM 屬性寫法 borderRadius)。
該方法除了提供了對特定樣式的處理可以采用更加細(xì)致的控制外，$.cssHooks 同時(shí)還擴(kuò)展了 .animate() 方法上的屬性集。
定義一個(gè)新的 cssHook 十分簡單。下面的模板可以方便您創(chuàng)建自己的 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);
功能測試
在標(biāo)準(zhǔn)化 CSS 屬性之前，首先要判斷瀏覽器是否支持待標(biāo)準(zhǔn)的屬性或經(jīng)過變化（例如，帶前綴）的屬性。例如，要檢查瀏覽器是否支持 border-radius 屬性，還要檢查該屬性的任何變種寫法是否是臨時(shí)元素的 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);
定義一個(gè)完整的 cssHook
為了定義一個(gè)完整的 cssHook，首先我們需要測試您當(dāng)前使用的 jQuery 版本是否支持 cssHooks 方法，此外，還要結(jié)合上面提到的例子：
(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 (camel 式) 樣式的寫法或使用 CSS (帶連字符號) 樣式的寫法來設(shè)置邊框的半徑了：
$("#element").css("borderRadius", "10px");
$("#another").css("border-radius", "20px");
如果瀏覽器不支持任何一種形式的 CSS 屬性寫法，并且也不支持任何前綴寫法，那么該樣式是不會(huì)應(yīng)用到元素上的。但是，如果瀏覽器支持某種特殊的寫法，那么可以在 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);
特殊單位
默認(rèn)情況下，通過 .css() 方法設(shè)置的值，jQuery 會(huì)為其加上 "px" 單位。您可以通過向 jQuery.cssNumber 對象中添加屬性的方法來防止這種行為的發(fā)生。
$.cssNumber["someCSSProp"] = true;
動(dòng)畫與 cssHooks
通過向 jQuery.fx.step 對象中添加屬性，cssHook 同樣可以向 jQuery 的動(dòng)畫機(jī)制中添加鉤子：
$.fx.step["someCSSProp"] = function(fx){
$.cssHooks["someCSSProp"].set( fx.elem, fx.now + fx.unit );
};
注意，上述這種用法應(yīng)用于簡單的數(shù)值屬性的動(dòng)畫是最好的。根據(jù)不同的 CSS 屬性，返回值的類型以及動(dòng)畫的復(fù)雜性，可能需要在 cssHooks 寫更多的代碼。
?