写在前面

本文写作基于jQuery 1.9.1版本,源码分析系列目录:http://www.cnblogs.com/chyingp/archive/2013/06/03/jquery-souce-code-study.html

jQuery中class操作相关的方法

jQuery中共提供了四个操作class的方法,除了toggleClass外,其他从方法名就可以知道方法是干嘛的,下文会分别举具体例子

.addClass(className):添加className

.removeClass(className):删除className

.hasClass(className):是否有className

.toggleClass(className):如果没有className,则添加className;如果有,则删除className

.addClass:添加class

3种用法,直接上例子


$('#aa').addClass('green'); // 添加green类
$('#cc').addClass('red green'); // 添加red green类

// index:元素在集合中的位置,从0开始
// className:元素当前className
// 返回值:添加到元素上的class
$('div').addClass(function(index, className){
if(index>1){
return 'red';
}else{
return 'green';
}
});

.removeClass:删除class

4种用法,跟.addClass极为类似,如下:

$('#aa').removeClass('green'); // 添加green类
$('#aa').removeClass('red green'); // 添加red green类
$('#aa').removeClass(); // 删除所有class // index:元素在集合中的位置,从0开始
// className:元素当前className
// 返回值:从元素上删除的class
$('div').removeClass(function(index, className){
if(index>1){
return 'red';
}else{
return 'green';
}
});

.hasClass:是否有某个类

1种用法,直接上例子;下面例子中需要注意的是:只要集合中的任意一个元素(div)有red类,它就返回true

$('div').hasClass('red');  // 是否存在div,它有red类

.toggleClass:切换类

$('div').toggleClass('red');  // 切换red类
$('div').toggleClass('red green'); // 切换red、green类,相当于连续调两次toggleClass,分别传入red、green var flag = false;
$('div').toggleClass('red', flag); // 如果flag为true,添加red类;否则,删除red类 $('div').toggleClass(function(index, className){ // 参数参照 .addClass
if(index>1){
return 'red'; // 这里返回的类会被拿去toggle~~~
}else{
return 'green';
}
}); $('div').toggleClass(function(index, className, flag){ // 跟上面的区别在于多了一个flag,其实就是本例子最后一个参数false
if(index>1){
return 'red';
}else{
return 'green';
}
}, false);

源码分析

class操作的源码比较简单,字符串查找、相加、替换神马的,只要了解基本的正则,熟悉jQuery.fn.each就问题不大,这里就略过了~~~有问题的可以在下面丢个回复~~~ :)

写在后面

jQuery官方文档:http://api.jquery.com/category/manipulation/class-attribute/

jQuery源码-class操作的更多相关文章

  1. jQuery源码-dom操作之jQuery.fn.html

    写在前面 前面陆陆续续写了jQuery源码的一些分析,尽可能地想要cover里面的源码细节,结果导致进度有些缓慢.jQuery的源码本来就比较晦涩,里面还有很多为了解决兼容问题很引入的神代码,如果不g ...

  2. jQuery源码-dom操作之jQuery.fn.text

    写在前面 jQuery.fn.text在jQuery是个使用频率比较高的接口,它的作用无非是设置/获取dom节点的内容文本,下文会通过几个简单的例子来说明.text()接口的使用,以及最后会对源码进行 ...

  3. 从jquery源码中看类型判断和数组的一些操作

    在深入看jquery源码中,大家会发现源码写的相当巧妙.那我今天也通过几个源码中用到的技巧来抛砖引玉,希望大家能共同研究源码之精华,不要囫囵吞枣. 1.将类数组转化成数组 我想大家首先想到的方法是fo ...

  4. jQuery源码分析系列

    声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://git ...

  5. jQuery源码:从原理到实战

    jQuery源码:从原理到实战 jQuery选择器对象 $(".my-class"); document.querySelectorAll*".my-class" ...

  6. 读艾伦的jQuery的无new构建,疑惑分析——jquery源码学习一

    背景: 有心学习jquery源码,苦于自己水平有限,若自己研究,耗时耗力,且读懂之日无期. 所以,网上寻找高手的源码分析.再经过自己思考,整理,验证.以求有所收获. 此篇为读高手艾伦<jQuer ...

  7. 读jQuery源码 - Deferred

    Deferred首次出现在jQuery 1.5中,在jQuery 1.8之后被改写,它的出现抹平了javascript中的大量回调产生的金字塔,提供了异步编程的能力,它主要服役于jQuery.ajax ...

  8. 读jQuery源码 - Callbacks

    代码的本质突出顺序.有序这一概念,尤其在javascript——毕竟javascript是单线程引擎. javascript拥有函数式编程的特性,而又因为javascript单线程引擎,我们的函数总是 ...

  9. jQuery源码笔记(一):jQuery的整体结构

    jQuery 是一个非常优秀的 JS 库,与 Prototype,YUI,Mootools 等众多的 Js 类库相比,它剑走偏锋,从 web 开发的实用角度出发,抛除了其它 Lib 中一些中看但不实用 ...

随机推荐

  1. 关于python

    1.from foo import bar 从foo中import bar,如果bar是一个数组,那么接下来你就可以在你当前程序中直接使用名为bar的这个数组. 2.import bar as foo ...

  2. iOS应用第三方推送的添加

    现在的一些第三方的推送平台挺好用,主要是因为他们有类似微信公众平台一样的管理后台,简单易用,封装了很多开发者需要的推送功能. 下面以个推为例: 1.在个推的应用配置iOS部分设置自己的BounleID ...

  3. eclipse+SVN文件只显示版本号,不显示时间和作者解决办法

    SVN默认是显示提交次数的 改成这样 就可以了...

  4. hihocoder 1356 分隔相同整数

    时间限制:10000ms单点时限:1000ms内存限制:256MB 描述 给定一个包含N个整数的数组A.你的任务是将A重新排列,使得任意两个相等的整数在数组中都不相邻. 如果存在多个重排后的数组满足条 ...

  5. hihocoder #1327

    传送门 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定一个只包含小写字母'a'-'z'的字符串 S ,你需要将 S 中的字符重新排序,使得任意两个相同的字符不连在一 ...

  6. codevs 1063 合并果子//优先队列

    1063 合并果子 2004年NOIP全国联赛普及组  时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石    题目描述 Description 在一个果园里,多多已经将所有的果 ...

  7. HDU 2058 The sum problem

    传送门 Description Given a sequence 1,2,3,......N, your job is to calculate all the possible sub-sequen ...

  8. hdu 2034 - 集合操作

    题意:集合A,B,计算集合差A-B(求只在集合A内的数) 解法: 选用STL内的集合set 1.建立set 1: #include<set> 2:   3: set<int> ...

  9. Linux 平台PostGIS安装

    1.前提条件: postgresql 9.6.1 已经通过源码方式安装完成并可成功运行. 2. other OS packets OS: CentOS 6.4 X64 X64: libxml2-dev ...

  10. css属性设置

    css在线编辑工具地址:http://tool.chinaz.com/Tools/CssDesigner.aspx 案例详情: http://dongtianee.sinaapp.com/index. ...