下面是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. centOS7 jdk安装

    1.查找需要卸载的OpenJDK: #  rpm -qa | grep java 2:依次卸载 rpm -e --nodeps javapackages-tools-3.4.1-6.el7_0.noa ...

  2. 6.Nginx作为负载均衡服务器应用

    案例:Nginx作为负载均衡服务器应用 nginx的负载均衡功能是通过upstream命令实现的,因此他的负载均衡机制比较简单,是一个基于内容和应用的7层交换负载均衡的实现.Nginx负载均衡默认对后 ...

  3. JavaScript函数(二)

    在前面我们已经对函数作了简单的介绍,比如函数的定义.函数的声明.函数的调用和函数的传参等.本节将进一步介绍函数的应用,深度理解函数的各种使用. 函数是一个对象,每个函数时Function类型的一个实例 ...

  4. 基于Docker的ELK日志平台搭建

    1.安装Docker Docker可简单理解为一个轻量级的虚拟机.Docker对进程进行封装隔离,隔离的进程独立于宿主和其它的隔离的进程,因此也称其为容器.Docker和传统虚拟化方式的不同.传统虚拟 ...

  5. Ruby学习之动态调用

    作为一个动态语言,对象中的方法不会像静态语言一样需要验证确实存在,动态语言的对象之间一直保持着交谈,如果你调用一个不曾定义过的方法,程序也不会马上就报错而无法运行,只有当运行到你调用这个方法时,解释器 ...

  6. golang 用tar打包文件或文件夹

    打包文件用到了tar包,其中tar包的用法可以参考API golang提供了个函数用来遍历文件夹 filepath.Walk 函数具体描述如下: func Walk(root string, walk ...

  7. Git上传项目到GitHub

    1.注册账户 https://github.com/ 2.创建仓库 3.需要安装 Git   http://msysgit.github.com/ 4.本地创建ssh key(不是必要,不创建ssh可 ...

  8. dotnet core 自定义配置文件

    首先添加一个.json 文件,比如 setting.json 文件内容如下,记得把文件设置为“复制到输出目录” { "ConfigSetting": { "XXXName ...

  9. Java学习笔记-嵌套类

    嵌套类 嵌套类有两种类别:static and non-static,分别对应为静态嵌套类和内部类. class OuterClass { ... static class StaticNestedC ...

  10. Presto集群部署

    前言: 随着大数据的普及,大部分企业的大数据查询与统计渐渐出现瓶颈.虽说存储方面有分布式的HDFS,HBSE,MongoDB等可以应对,但是面对千万级别(1x10^7)界别的数据量查询时,以上组件也不 ...