下面是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. StreamCQL编写jstorm拓扑任务入门

    一,什么是 StreamCQL StreamCQL(Stream Continuous Query Language)是一个类似SQL的声明式语言, 目的是在流计算平台(目前也就是jstrom)的基础 ...

  2. mysql也有complex view merging 这个特性(5.6 , 5.7)

    出处:黑洞中的奇点 的博客 http://www.cnblogs.com/kelvin19840813/ 您的支持是对博主最大的鼓励,感谢您的认真阅读.本文版权归作者所有,欢迎转载,但请保留该声明. ...

  3. python中使用递归实现反转链表

    反转链表一般有两种实现方式,一种是循环,另外一种是递归,前几天做了一个作业,用到这东西了. 这里就做个记录,方便以后温习. 递归的方法: class Node: def __init__(self,i ...

  4. 微信小程序开发之模板

    一.简介 WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用. 定义模板 使用name属性,作为模板的名字.然后在<template/>内定义代码片段,如 ...

  5. 简易排水简车的制作 TurnipBit 系列教程

    准备工作   ü TurnipBit 开发板 1块 ü 下载数据线 1条 ü 微型步进电机(28BYJ-48) 1个 ü 步进电机驱动板(ULN2003APG) 1块 ü TurnipBit 扩展板 ...

  6. webgl鱼眼算法

    在网页上面实现,采用的是球面映射和材质线性映射,这里注意的是用线性映射保留了球面的感觉,而不是采用sin映射,sin映射在边缘会产生很难看的效果. 最后效果如下:

  7. python3之正则表达式

    1.正则表达式基础 正则表达式是用于处理字符串的强大工具,拥有自己独特的语法以及一个独立的处理引擎,效率上可能不然str自带方法,但功能十分强大. 正则表达式的大致匹配流程:依次拿出表达式和文本中的字 ...

  8. easy ui Tree请求跨域数据

    扯淡篇: jQuery EasyUI为提供了大多数UI控件的使用,如:accordion,combobox,menu,dialog,tabs,validatebox,datagrid,window,t ...

  9. Global exception handling in asp.net core webapi

    在.NET Core中MVC和WebAPI已经组合在一起,都继承了Controller,但是在处理错误时,就很不一样,MVC返回错误页面给浏览器,WebAPI返回Json或XML,而不是HTML.Us ...

  10. 微信小程序之实现slideUp和slideDown效果和点击空白隐藏

    怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路是用css3的transform: translateY()属性,给需要动画的元素添加上一个动画class. 先上效果图: ...