下面是JQuery对元素class操作的简单实现,请看代码:

添加class:

    //增加class
function addClass(elem,value) { var classes, cur, clazz, j, finalValue
// 如果参数是多个样式设置"a b c"按照\/S+\g空格分割
classes = (value || "").match(/\S+/g) || []; //如果是元素节点,并且有class属性
//拼接成 " a b c "形式,加上前后空格
cur = elem.nodeType === 1 && (elem.className ?
(" " + elem.className + " ").replace(/[\t\r\n\f]/g, " ") :
" "
); //如果存在样式
if (cur) {
j = 0;
while ((clazz = classes[j++])) {
//查找下是否不是有重复的,没有就叠加
if (cur.indexOf(" " + clazz + " ") < 0) {
cur += clazz + " ";
}
} // 去掉前后的空格
finalValue = jQuery.trim(cur); if (elem.className !== finalValue) {
//赋值
elem.className = finalValue;
}
}
}

移除class:

    //移除样式
function removeClass(elem, value) { var classes, cur, clazz, j, finalValue
// 如果参数是多个样式设置"a b c"按照\/S+\g空格分割
classes = (value || "").match(/\S+/g) || []; //如果是元素节点,并且有class属性
//拼接成 " a b c "形式,加上前后空格
cur = elem.nodeType === 1 && (elem.className ?
(" " + elem.className + " ").replace(/[\t\r\n\f]/g, " ") :
" "
); //如果存在样式
if (cur) {
j = 0;
while ((clazz = classes[j++])) {
//与addClass的区别在这里
while (cur.indexOf(" " + clazz + " ") >= 0) {
cur = cur.replace(" " + clazz + " ", " ");
}
} // 去掉前后的空格
finalValue = jQuery.trim(cur); if (elem.className !== finalValue) {
//赋值
elem.className = finalValue;
}
}
}

其实原理就是通过元素原生className属性获得元素class值(一串字符),然后对这串字符进行各种奇淫技巧拼接,最后再赋值到元素的className属性。

JQeury添加和删除class内部实现代码(简化版)的更多相关文章

  1. 【八】jqeury之click事件[添加及删除数据]

    要求:1.添加数据显示在下方列表.2.添加的数据可动态删除. 界面显示: 代码: <!DOCTYPE html> <html> <head> <script ...

  2. Google Map API Version3 :代码添加和删除marker标记

    转自:http://blog.sina.com.cn/s/blog_4cdc44df0100u80h.html Google Map API Version3 教程:在地图 通过代添加和删除mark标 ...

  3. jquery 如何动态添加、删除class样式方法介绍_jquery_脚本之家

    获取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class 取与设置样式 获取class和设置class都可以使用attr()方法 ...

  4. 对List遍历过程中添加和删除的思考

    对List遍历过程中添加和删除的思考 平时开发过程中,不少开发者都遇到过一个问题:在遍历集合的的过程中,进行add或者remove操作的时候,会出现2类错误,包括:java.util.Concurre ...

  5. ConcurrentBag同线程元素的添加和删除

    https://www.mgenware.com/blog/?p=232 ConcurrentBag<T>对于同一个线程值的添加和删除是非常快的,因为ConcurrentBag内部将数据按 ...

  6. Netty源码分析之ChannelPipeline(二)—ChannelHandler的添加与删除

    上篇文章中,我们对Netty中ChannelPipeline的构造与初始化进行了分析与总结,本篇文章我们将对ChannelHandler的添加与删除操作进行具体的的代码分析: 一.ChannelHan ...

  7. (三)根据向导创建MFC工程,事件的添加和删除

    一,文档视图结构 文档:它是一个类,这个类专门用来存储数据 视图:它是一个类,这个类专门用来显示和修改数据 框架类:一个容器,这个容器装了视图 健完工程之后,类视图: 运行一下: 几个比较重要的函数 ...

  8. Django实现简单的用户添加、删除、修改等功能

    一. Django必要的知识点补充 1. templates和static文件夹及其配置 1.1 templates文件夹 所有的HTML文件默认都放在templates文件夹下. 1.2 stati ...

  9. MVC5 网站开发之六 管理员 2、添加、删除、重置密码、修改密码、列表浏览

    目录 奔跑吧,代码小哥! MVC5网站开发之一 总体概述 MVC5 网站开发之二 创建项目 MVC5 网站开发之三 数据存储层功能实现 MVC5 网站开发之四 业务逻辑层的架构和基本功能 MVC5 网 ...

随机推荐

  1. .net中如何实现多线程

    l线程肯定也是要执行一段代码的.所以要产生一个线程,必须先为该线程写一个方法,这个方法中的代码就是该线程运行所要执行的代码.(找个人来做一件事情) l线程启动时,通过委托调用该方法. (委托的好处) ...

  2. Android SDK Manager配置

    Android SDK Manager就是一个Android软件开发工具包管理器,就像一个桥梁,连通本地和服务器,从服务器下载安卓开发所需工具到本地. 而AVD Manager是一个Android虚拟 ...

  3. Linux小记

    一.在vim中如何查看正在编辑的文件名 在正常模式下: :f 或 CTRL+G 查看文件的路径 用:!pwd 可以看当前的详细路径. 二.crontab 在crontab中, 命令crontab -e ...

  4. C# 全选中数字文本框内容

    /// <summary>        /// 全选中数字文本框内容        /// </summary>        /// <param name=&quo ...

  5. C#保留2位小数的做法

    第一 算法实现           保留两位的话,就用一个浮点型先乘以100,然后取整,取整完了之后,再乘以1.0,然后再除以100.          上面这种做法是保留n位,不会四舍五入的.因为这 ...

  6. javascript中name,value等属于保留字

    前几天在练习js代码的时候,碰到了一个坑,这是让人醉了. html代码如下: <div> <div> <!--输入 123456--> <lable>请 ...

  7. APP瘦身绝技(快速减少包大小)

    如果要清理无用类文件和无用图片,参考博客<iOS 清理Xcode项目中没有使用到的图片资源和类文件>.当下众多app项目,尤其是初创公司,明显的特点就是,开发周期短,迭代更新快,甚至一周一 ...

  8. JS中date日期初始化的5种方法

    创建一个日期对象: 代码如下: var objDate=new Date([arguments list]); 参数形式有以下5种: 1)new Date("month dd,yyyy hh ...

  9. Micropython实战之TPYBoardv102 DIY金属检测仪

    转载请以链接形式注明文章来源(MicroPythonQQ技术交流群:157816561,公众号:MicroPython玩家汇) 1.实验目的 1.学习在PC机系统中扩展简单I/O接口的方法. 2.进一 ...

  10. Java学习笔记6(循环和数组练习题)

    1.输出100到1000的水仙花数: public class LoopTest{ public static void main(String[] args){ int bai = 0; int s ...