jquery.api.3.2.1中文手册
简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
directory search
快速查询 核心 jQuery([selector,[context]]) jQuery(html,[ownerDocument]) jQuery(callback) jQuery.holdReady(hold) jQuery.readyException( error ) each(callback) size() length selector context get([index]) index([selector|element]) data([key],[value]) removeData([name|list]) jQuery.data(element,[key],[value]) queue(element,[queueName]) dequeue([queueName]) clearQueue([queueName]) jQuery.fn.extend(object) jQuery.extend(object) jQuery.noConflict([extreme]) 选择器 #id element .class * selector1,selector2,selectorN ancestor descendant parent > child prev + next prev ~ siblings :first :not(selector) :even :odd :eq(index) :gt(index) :lang(language) :last() :lt(index) :header :animated :focus :root :target :contains(text) :empty :has(selector) :parent :hidden :visible [attribute] [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(n|even|odd|formula) :nth-last-of-type(n|even|odd|formula) :nth-of-type(n|even|odd|formula) :only-child :only-of-type :input :text :password :radio :checkbox :submit :image :reset :button :file :enabled :disabled :checked :selected $.escapeSelector(selector) AJAx $.ajax(url,[settings]) $.get(url,[data],[fn],[type]) $.getJSON(url,[data],[fn]) $.getScript(url,[callback]) $.post(url,[data],[fn],[type]) ajaxComplete(callback) ajaxError(callback) ajaxSend(callback) ajaxStart(callback) ajaxStop(callback) ajaxSuccess(callback) $.ajaxPrefilter([type],fn) $.ajaxSetup([options]) load(url, [data], [callback]) serialize() serializeArray() 属性 attr(name|properties|key,value|fn) removeAttr(name) prop(n|p|k,v|f) removeProp(name) addClass(class|fn) removeClass([class|fn]) toggleClass(class|fn[,sw]) html([val|fn]) text([val|fn]) val([val|fn|arr]) CSS css(name|pro|[,val|fn]) jQuery.cssHooks offset([coordinates]) position() scrollTop([val]) scrollLeft([val]) height([val|fn]) width([val|fn]) innerHeight() innerWidth() outerHeight([options]) outerWidth([options]) 文档处理 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[,deepEven]]) 筛选 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,[end]) children([expr]) closest(e|o|e) find(e|o|e) next([expr]) nextAll([expr]) nextUntil([e|e][,f]) offsetParent() parent([expr]) parents([expr]) parentsUntil([e|e][,f]) prev([expr]) prevall([expr]) prevUntil([e|e][,f]) siblings([expr]) add(e|e|h|o[,c]) andSelf() addBack() contents() end() 事件 ready(fn) on(eve,[sel],[data],fn) off(eve,[sel],[fn]) bind(type,[data],fn) one(type,[data],fn) trigger(type,[data]) triggerHandler(type, [data]) unbind(t,[d|f]) live(type,[data],fn) die(type,[fn]) delegate(s,[t],[d],fn) undelegate([s,[t],fn]) hover([over,]out) toggle([s],[e],[fn]) blur([[data],fn]) change([[data],fn]) click([[data],fn]) dblclick([[data],fn]) error([[data],fn]) focus([[data],fn]) focusin([data],fn) focusout([data],fn) keydown([[data],fn]) keypress([[data],fn]) keyup([[data],fn]) mousedown([[data],fn]) mouseenter([[data],fn]) mouseleave([[data],fn]) mousemove([[data],fn]) mouseout([[data],fn]) mouseover([[data],fn]) mouseup([[data],fn]) resize([[data],fn]) scroll([[data],fn]) select([[data],fn]) submit([[data],fn]) unload([[data],fn]) 效果 show([s,[e],[fn]]) hide([s,[e],[fn]]) toggle([s],[e],[fn]) slideDown([s],[e],[fn]) slideUp([s,[e],[fn]]) slideToggle([s],[e],[fn]) fadeIn([s],[e],[fn]) fadeOut([s],[e],[fn]) fadeTo([[s],o,[e],[fn]]) fadeToggle([s,[e],[fn]]) animate(p,[s],[e],[fn]) stop([c],[j]) delay(d,[q]) finish([queue]) jQuery.fx.off jQuery.fx.interval 工具 $.support $.browser $.browser.version $.boxModel $.each(object,[callback]) $.extend([d],tgt,obj1,[objN]) $.grep(array,fn,[invert]) $.sub() $.when(deferreds) $.makearray(obj) $.map(arr|obj,callback) $.inArray(val,arr,[from]) $.toArray() $.merge(first,second) $.unique(array) $.uniqueSort(array) $.parseJSON(json) $.parseXML(data) $.noop $.proxy(function,context) $.contains(c,c) $.type(obj) $.isArray(obj) $.isFunction(obj) $.isEmptyObject(obj) $.isPlainObject(obj) $.isWindow(obj) $.isNumeric(value) $.trim(str) $.param(obj,[traditional]) $.error(message) $.fn.jquery 事件对象 eve.currentTarget eve.data eve.delegateTarget eve.isDefaultPrevented() eve.isImmediatePropag...() eve.isPropagationStopped() eve.namespace eve.pageX eve.pageY eve.preventDefault() eve.relatedTarget eve.result eve.stopImmediatePro...() eve.stopPropagation() eve.target eve.timeStamp eve.type eve.which 延迟对象 def.done(d,[d]) def.fail(failCallbacks) def.isRejected() def.isResolved() def.reject(args) def.rejectWith(c,[a]) def.resolve(args) def.resolveWith(c,[a]) def.then(d[,f][,p]) def.promise([ty],[ta]) def.pipe([d],[f],[p]) def.always(al,[al]) def.notify(args) def.notifyWith(c,[a]) def.progress(proCal) def.state() 回调函数 cal.add(callbacks) cal.disable() cal.empty() cal.fire(arguments) cal.fired() cal.fireWith([c] [,a]) cal.has(callback) cal.lock() cal.locked() cal.remove(callbacks) $.callbacks(flags) 正则表达式

©
This document uses PHP Chinese website manual Release

characters

返回值:Object

jQuery.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 写更多的代码。

 


Previous article： Next article：