jQuery源码-class操作
写在前面
本文写作基于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操作的更多相关文章
- jQuery源码-dom操作之jQuery.fn.html
写在前面 前面陆陆续续写了jQuery源码的一些分析,尽可能地想要cover里面的源码细节,结果导致进度有些缓慢.jQuery的源码本来就比较晦涩,里面还有很多为了解决兼容问题很引入的神代码,如果不g ...
- jQuery源码-dom操作之jQuery.fn.text
写在前面 jQuery.fn.text在jQuery是个使用频率比较高的接口,它的作用无非是设置/获取dom节点的内容文本,下文会通过几个简单的例子来说明.text()接口的使用,以及最后会对源码进行 ...
- 从jquery源码中看类型判断和数组的一些操作
在深入看jquery源码中,大家会发现源码写的相当巧妙.那我今天也通过几个源码中用到的技巧来抛砖引玉,希望大家能共同研究源码之精华,不要囫囵吞枣. 1.将类数组转化成数组 我想大家首先想到的方法是fo ...
- jQuery源码分析系列
声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://git ...
- jQuery源码:从原理到实战
jQuery源码:从原理到实战 jQuery选择器对象 $(".my-class"); document.querySelectorAll*".my-class" ...
- 读艾伦的jQuery的无new构建,疑惑分析——jquery源码学习一
背景: 有心学习jquery源码,苦于自己水平有限,若自己研究,耗时耗力,且读懂之日无期. 所以,网上寻找高手的源码分析.再经过自己思考,整理,验证.以求有所收获. 此篇为读高手艾伦<jQuer ...
- 读jQuery源码 - Deferred
Deferred首次出现在jQuery 1.5中,在jQuery 1.8之后被改写,它的出现抹平了javascript中的大量回调产生的金字塔,提供了异步编程的能力,它主要服役于jQuery.ajax ...
- 读jQuery源码 - Callbacks
代码的本质突出顺序.有序这一概念,尤其在javascript——毕竟javascript是单线程引擎. javascript拥有函数式编程的特性,而又因为javascript单线程引擎,我们的函数总是 ...
- jQuery源码笔记(一):jQuery的整体结构
jQuery 是一个非常优秀的 JS 库,与 Prototype,YUI,Mootools 等众多的 Js 类库相比,它剑走偏锋,从 web 开发的实用角度出发,抛除了其它 Lib 中一些中看但不实用 ...
随机推荐
- 关于python
1.from foo import bar 从foo中import bar,如果bar是一个数组,那么接下来你就可以在你当前程序中直接使用名为bar的这个数组. 2.import bar as foo ...
- iOS应用第三方推送的添加
现在的一些第三方的推送平台挺好用,主要是因为他们有类似微信公众平台一样的管理后台,简单易用,封装了很多开发者需要的推送功能. 下面以个推为例: 1.在个推的应用配置iOS部分设置自己的BounleID ...
- eclipse+SVN文件只显示版本号,不显示时间和作者解决办法
SVN默认是显示提交次数的 改成这样 就可以了...
- hihocoder 1356 分隔相同整数
时间限制:10000ms单点时限:1000ms内存限制:256MB 描述 给定一个包含N个整数的数组A.你的任务是将A重新排列,使得任意两个相等的整数在数组中都不相邻. 如果存在多个重排后的数组满足条 ...
- hihocoder #1327
传送门 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定一个只包含小写字母'a'-'z'的字符串 S ,你需要将 S 中的字符重新排序,使得任意两个相同的字符不连在一 ...
- codevs 1063 合并果子//优先队列
1063 合并果子 2004年NOIP全国联赛普及组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 题目描述 Description 在一个果园里,多多已经将所有的果 ...
- HDU 2058 The sum problem
传送门 Description Given a sequence 1,2,3,......N, your job is to calculate all the possible sub-sequen ...
- hdu 2034 - 集合操作
题意:集合A,B,计算集合差A-B(求只在集合A内的数) 解法: 选用STL内的集合set 1.建立set 1: #include<set> 2: 3: set<int> ...
- Linux 平台PostGIS安装
1.前提条件: postgresql 9.6.1 已经通过源码方式安装完成并可成功运行. 2. other OS packets OS: CentOS 6.4 X64 X64: libxml2-dev ...
- css属性设置
css在线编辑工具地址:http://tool.chinaz.com/Tools/CssDesigner.aspx 案例详情: http://dongtianee.sinaapp.com/index. ...