深入学习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* instanceswhile (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 namesvar className,i = 0,self = jQuery(this),classNames = value.match(rnotwhite) || [];while ((className = classNames[i++])) {// check each className given, space separated listif (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 setjQuery._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;}});

深入学习jquery源码之addClass()和toggleClass()与hasClass()相关推荐

深入学习jquery源码之queue()与dequeue()
深入学习jquery源码之queue()与dequeue() queue(element,[queueName]) 概述显示或操作在匹配元素上执行的函数队列参数 element,[queueNam ...
深入学习jquery源码之高德地图组件的使用
深入学习jquery源码之高德地图组件的使用高德地图组件是一类高度模块化的LBS服务组件,开发者通过调用相应标签便可轻松实现诸如在地图上标注点.查找附近poi.公交/驾车线路规划等功能.该类组件仅针 ...
深入学习jquery源码之attr()与removeAttr()
深入学习jquery源码之attr()与removeAttr() attr(name|properties|key,value|fn) 概述设置或返回被选元素的属性值. 参数 name String ...
深入学习jquery源码之ajaxSetup()
深入学习jquery源码之ajaxSetup() ajaxComplete(callback) 概述: AJAX 请求完成时执行函数.Ajax 事件. XMLHttpRequest 对象和设置作为参数 ...
深入学习jquery源码之jQuery的选择器引擎Sizzle(一)
深入学习jquery源码之jQuery的选择器引擎Sizzle Sizzle是一个纯javascript CSS选择器引擎.jquery1.3开始使用sizzle,Sizzle一反传统采取了相反的Ri ...
学习 jQuery 源码整体架构，打造属于自己的 js 类库
虽然现在基本不怎么使用 jQuery了,但 jQuery流行 10多年的 JS库,还是有必要学习它的源码的.也可以学着打造属于自己的 js类库,求职面试时可以增色不少. 本文章学习的是 v3.4.1版 ...
妙味课堂：一起学习jQuery源码【逐行分析jQuery源码的奥秘】（妙味课堂笔记）-- 框架接口（1-3）
jQuery 的学习版本为: 2.0.3 匿名函数匿名函数自执行,目的是防止变量污染 (function(window,undefined){})(window); 内层代码块分析 (functio ...
jQuery源码逐行分析学习01(jQuery的框架结构简化)
最近在学习jQuery源码,在此,特别做一个分享,把所涉及的内容都记录下来,其中有不妥之处还望大家指出,我会及时改正.望各位大神不吝赐教!同时,这也是我的第一篇前端技术博客,对博客编写还不是很熟悉,美 ...
Jquery源码分析-整体结构
最近在学习Jquery的最新的源码,Jquery-3.3.1版本.网上有很多对jquery解析的文章.但是我还是要自己去尝试着看一篇jquery的源码.本系列博客用来记录其中的过程,并同大家分享.本次 ...

深入学习jquery源码之addClass()和toggleClass()与hasClass()

深入学习jquery源码之addClass()和toggleClass()与hasClass()相关推荐

最新文章

热门文章