深入學習jquery原始碼之addClass()和toggleClass()與hasClass()

addClass(class|fn)

概述

為每個匹配的元素新增指定的類名。

引數

class String

一個或多個要新增到元素中的CSS類名，請用空格分開

function(index, class) Function

此函式必須返回一個或多個空格分隔的class名。接受兩個引數，index引數為物件在這個集合中的索引值，class引數為這個物件原先的class屬性值。

為匹配的元素加上 'selected' 類

$("p").addClass("selected");
$("p").addClass("selected1 selected2");
 

給li加上不同的class

<ul>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
</ul>

$('ul li:last').addClass(function() {
  return 'item-' + $(this).index();
});

removeClass([class|fn])

概述

從所有匹配的元素中刪除全部或者指定的類。

引數

class String

一個或多個要刪除的CSS類名，請用空格分開

function(index, class) Function

此函式必須返回一個或多個空格分隔的class名。接受兩個引數，index引數為物件在這個集合中的索引值，class引數為這個物件原先的class屬性值。

從匹配的元素中刪除 'selected' 類

$("p").removeClass("selected");

刪除匹配元素的所有類

$("p").removeClass();

刪除最後一個元素上與前面重複的class

$('li:last').removeClass(function() {
    return $(this).prev().attr('class');
});
 

toggleClass(class|fn[,sw])

概述

如果存在（不存在）就刪除（新增）一個類。

引數

class String

CSS類名

class,switch String,Boolean

1:要切換的CSS類名.

2:用於決定元素是否包含class的布林值。

switch Boolean

用於決定元素是否包含class的布林值。

function(index, class,switch)[, switch]  Function,Boolean

1:用來返回在匹配的元素集合中的每個元素上用來切換的樣式類名的一個函式。接收元素的索引位置和元素舊的樣式類作為引數。

2: 一個用來判斷樣式類新增還是移除的 boolean 值。

為匹配的元素切換 'selected' 類

$("p").toggleClass("selected");

每點選三下加上一次 'highlight' 類

<strong>jQuery 程式碼:</strong>

  var count = 0;
  $("p").click(function(){
      $(this).toggleClass("highlight", count++ % 3 == 0);
  });

根據父元素來設定class屬性

$('div.foo').toggleClass(function() {
  if ($(this).parent().is('.bar') {
    return 'happy';
  } else {
    return 'sad';
  }
});

hasClass(class)

概述

檢查當前的元素是否含有某個特定的類，如果有，則返回true。

這其實就是 is("." + class)。

引數

class String

用於匹配的類名

給包含有某個類的元素進行一個動畫。

<div class="protected"></div><div></div>

$("div").click(function(){
  if ( $(this).hasClass("protected") )
    $(this)
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: 0 });
});

jquery原始碼

    var rclass = /[\t\r\n\f]/g;

    jQuery.fn.extend({
        addClass: function (value) {
            var classes, elem, cur, clazz, j, finalValue,
                i = 0,
                len = this.length,
                proceed = typeof value === "string" && value;

            if (jQuery.isFunction(value)) {
                return this.each(function (j) {
                    jQuery(this).addClass(value.call(this, j, this.className));
                });
            }

            if (proceed) {
                // The disjunction here is for better compressibility (see removeClass)
                classes = (value || "").match(rnotwhite) || [];

                for (; i < len; i++) {
                    elem = this[i];
                    cur = elem.nodeType === 1 && (elem.className ?
                        (" " + elem.className + " ").replace(rclass, " ") :
                        " "
                    );

                    if (cur) {
                        j = 0;
                        while ((clazz = classes[j++])) {
                            if (cur.indexOf(" " + clazz + " ") < 0) {
                                cur += clazz + " ";
                            }
                        }

                        // only assign if different to avoid unneeded rendering.
                        finalValue = jQuery.trim(cur);
                        if (elem.className !== finalValue) {
                            elem.className = finalValue;
                        }
                    }
                }
            }

            return this;
        },

        removeClass: function (value) {
            var classes, elem, cur, clazz, j, finalValue,
                i = 0,
                len = this.length,
                proceed = arguments.length === 0 || typeof value === "string" && value;

            if (jQuery.isFunction(value)) {
                return this.each(function (j) {
                    jQuery(this).removeClass(value.call(this, j, this.className));
                });
            }
            if (proceed) {
                classes = (value || "").match(rnotwhite) || [];

                for (; i < len; i++) {
                    elem = this[i];
                    // This expression is here for better compressibility (see addClass)
                    cur = elem.nodeType === 1 && (elem.className ?
                        (" " + elem.className + " ").replace(rclass, " ") :
                        ""
                    );

                    if (cur) {
                        j = 0;
                        while ((clazz = classes[j++])) {
                            // Remove *all* instances
                            while (cur.indexOf(" " + clazz + " ") >= 0) {
                                cur = cur.replace(" " + clazz + " ", " ");
                            }
                        }

                        // only assign if different to avoid unneeded rendering.
                        finalValue = value ? jQuery.trim(cur) : "";
                        if (elem.className !== finalValue) {
                            elem.className = finalValue;
                        }
                    }
                }
            }

            return this;
        },

        toggleClass: function (value, stateVal) {
            var type = typeof value;

            if (typeof stateVal === "boolean" && type === "string") {
                return stateVal ? this.addClass(value) : this.removeClass(value);
            }

            if (jQuery.isFunction(value)) {
                return this.each(function (i) {
                    jQuery(this).toggleClass(value.call(this, i, this.className, stateVal), stateVal);
                });
            }

            return this.each(function () {
                if (type === "string") {
                    // toggle individual class names
                    var className,
                        i = 0,
                        self = jQuery(this),
                        classNames = value.match(rnotwhite) || [];

                    while ((className = classNames[i++])) {
                        // check each className given, space separated list
                        if (self.hasClass(className)) {
                            self.removeClass(className);
                        } else {
                            self.addClass(className);
                        }
                    }

                    // Toggle whole class name
                } else if (type === strundefined || type === "boolean") {
                    if (this.className) {
                        // store className if set
                        jQuery._data(this, "__className__", this.className);
                    }

                    // If the element has a class name or if we're passed "false",
                    // then remove the whole classname (if there was one, the above saved it).
                    // Otherwise bring back whatever was previously saved (if anything),
                    // falling back to the empty string if nothing was stored.
                    this.className = this.className || value === false ? "" : jQuery._data(this, "__className__") || "";
                }
            });
        },

        hasClass: function (selector) {
            var className = " " + selector + " ",
                i = 0,
                l = this.length;
            for (; i < l; i++) {
                if (this[i].nodeType === 1 && (" " + this[i].className + " ").replace(rclass, " ").indexOf(className) >= 0) {
                    return true;
                }
            }

            return false;
        }
    });