目錄 搜尋
速查表 核心 jQuery(selector jQuery(html jQuery(callback) jQuery.holdReady(hold) each(callback) size() length selector context get([index]) index([selector|element]) data([key] removeData([name|list]) jQuery.data(element queue(element dequeue([queueName]) clearQueue([queueName]) jQuery.noConflict([extreme]) 选择器 #id element .class * selector1 ancestor descendant parent > child prev + next prev ~ siblings :first :last :not(selector) :even :odd :eq(index) :gt(index) :lt(index) :lang(language) :header :animated :focus :root :target :contains(text) :empty :has(selector) :parent :hidden :visible [attribute] [attribute=value] [attribute!=value] [attribute^=value] [attribute$=value] [attribute*=value] [selector1][selector2][selectorN] :first-child :first-of-type :last-child :last-of-type :nth-child :nth-last-child() :nth-last-of-type() :nth-of-type() :only-child :only-of-type :input :text :password :radio :checkbox :submit :image :reset :button :file :hidden :enabled :disabled :checked :selected 属性 attr(name|pro|key removeAttr(name) prop(name|pro|key removeProp(name) addClass(class|fn) removeClass([class|fn]) toggleClass(class|fn[ html([val|fn]) text([val|fn]) val([val|fn|arr]) 筛选 eq(index|-index) first() last() hasClass(class) filter(expr|obj|ele|fn) is(expr|obj|ele|fn) map(callback) has(expr|ele) not(expr|ele|fn) slice(start children([expr]) closest(expr find(expr|obj|ele) next([expr]) nextAll([expr]) nextUntil([exp|ele][ parent([expr]) parents([expr]) parentsUntil([exp|ele][ prev([expr]) prevAll([expr]) prevUntil([exp|ele][ siblings([expr]) add(expr|ele|html|obj[ andSelf() contents() end() 文档处理 append(content|fn) appendTo(content) prepend(content|fn) prependTo(content) after(content|fn) before(content|fn) insertAfter(content) insertBefore(content) wrap(html|ele|fn) unwrap() wrapAll(html|ele) wrapInner(html|ele|fn) replaceWith(content|fn) replaceAll(selector) empty() remove([expr]) detach([expr]) clone([Even[ CSS css(name|pro|[ jQuery.cssHooks offset([coordinates]) position() scrollTop([val]) scrollLeft([val]) height([val|fn]) width([val|fn]) innerHeight() innerWidth() outerHeight([options]) outerWidth([options]) 事件 ready(fn) on(events off(events bind(type one(type trigger(type triggerHandler(type unbind(type live(type die(type delegate(sel undelegate([sel hover([over toggle(fn blur([[data] change([[data] click([[data] dblclick([[data] error([[data] focus([[data] focusin([data] focusout([data] keydown([[data] keypress([[data] keyup([[data] mousedown([[data] mouseenter([[data] mouseleave([[data] mousemove([[data] mouseout([[data] mouseover([[data] mouseup([[data] resize([[data] scroll([[data] select([[data] submit([[data] unload([[data] 效果 show([speed hide([speed slideDown([speed] slideUp([speed slideToggle([speed] fadeIn([speed] fadeOut([speed] fadeTo([[speed] fadeToggle([speed animate(param stop([cle] delay(duration finish( [queue ] ) jQuery.fx.off jQuery.fx.interval Ajax jQuery.ajax(url load(url jQuery.get(url jQuery.getJSON(url jQuery.getScript(url jQuery.post(url ajaxComplete(callback) ajaxError(callback) ajaxSend(callback) ajaxStart(callback) ajaxStop(callback) ajaxSuccess(callback) jQuery.ajaxPrefilter([type] jQuery.ajaxSetup([options]) serialize() serializeArray() 工具 jQuery.support jQuery.browser jQuery.browser.version jQuery.boxModel jQuery.each(object jQuery.extend([deep] jQuery.grep(array jQuery.makeArray(obj) jQuery.map(array jQuery.inArray(val jQuery.toArray() jQuery.sub() jQuery.when(deferreds) jQuery.merge(first jQuery.unique(array) jQuery.parseJSON(json) jQuery.parseXML(data) jQuery.noop jQuery.proxy(function jQuery.contains(container jQuery.isArray(obj) jQuery.isFunction(obj) jQuery.isEmptyObject(obj) jQuery.isPlainObject(obj) jQuery.isWindow(obj) jQuery.isNumeric(value) jQuery.type(obj) jQuery.trim(str) jQuery.param(obj jQuery.error(message) $.fn.jquery 事件对象 event.currentTarget event.data event.delegateTarget event.isDefaultPrevented() event.isImmediatePropagationStopped() event.isPropagationStopped() event.namespace event.pageX event.pageY event.preventDefault() event.relatedTarget event.result event.stopImmediatePropagation() event.stopPropagation() event.target event.timeStamp event.type event.which 延迟对象 def.done(donCal def.fail(failCal) def.isRejected() def.isResolved() def.reject(args) def.rejectWith(context def.resolve(args) def.resolveWith(context def.then(doneCal def.progress([type] def.pipe([donFil] def.always(alwCal def.notify(args) def.notifyWith(context def.progress(proCal) def.state() 回调函数 callbacks.add(callbacks) callbacks.disable() callbacks.empty() callbacks.fire(arguments) callbacks.fired() callbacks.fireWith([context][ callbacks.has(callback) callbacks.lock() callbacks.locked() callbacks.remove(callbacks) jQuery.callbacks(flags) 关于 关于jQuery API 文档 提交bug及获取更新 其它 正则表达式速查表
文字

返回值:ObjectjQuery.cssHooks

1.4.3概述

直接向 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);  

功能测试

在标准化 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);  

定义一个完整的 cssHook

为了定义一个完整的 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 (camel 式) 样式的写法或使用 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);  

特殊单位

默认情况下,通过 .css() 方法设置的值,jQuery 会为其加上 "px" 单位。您可以通过向 jQuery.cssNumber 对象中添加属性的方法来防止这种行为的发生。

$.cssNumber["someCSSProp"] = true;

动画与 cssHooks

通过向 jQuery.fx.step 对象中添加属性,cssHook 同样可以向 jQuery 的动画机制中添加钩子:

$.fx.step["someCSSProp"] = function(fx){
    $.cssHooks["someCSSProp"].set( fx.elem, fx.now + fx.unit );
  };  

注意,上述这种用法应用于简单的数值属性的动画是最好的。根据不同的 CSS 属性,返回值的类型以及动画的复杂性,可能需要在 cssHooks 写更多的代码。

 

上一篇: 下一篇: