JQeury添加和删除class内部实现代码(简化版)
下面是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内部实现代码(简化版)的更多相关文章
- 【八】jqeury之click事件[添加及删除数据]
要求:1.添加数据显示在下方列表.2.添加的数据可动态删除. 界面显示: 代码: <!DOCTYPE html> <html> <head> <script ...
- Google Map API Version3 :代码添加和删除marker标记
转自:http://blog.sina.com.cn/s/blog_4cdc44df0100u80h.html Google Map API Version3 教程:在地图 通过代添加和删除mark标 ...
- jquery 如何动态添加、删除class样式方法介绍_jquery_脚本之家
获取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class 取与设置样式 获取class和设置class都可以使用attr()方法 ...
- 对List遍历过程中添加和删除的思考
对List遍历过程中添加和删除的思考 平时开发过程中,不少开发者都遇到过一个问题:在遍历集合的的过程中,进行add或者remove操作的时候,会出现2类错误,包括:java.util.Concurre ...
- ConcurrentBag同线程元素的添加和删除
https://www.mgenware.com/blog/?p=232 ConcurrentBag<T>对于同一个线程值的添加和删除是非常快的,因为ConcurrentBag内部将数据按 ...
- Netty源码分析之ChannelPipeline(二)—ChannelHandler的添加与删除
上篇文章中,我们对Netty中ChannelPipeline的构造与初始化进行了分析与总结,本篇文章我们将对ChannelHandler的添加与删除操作进行具体的的代码分析: 一.ChannelHan ...
- (三)根据向导创建MFC工程,事件的添加和删除
一,文档视图结构 文档:它是一个类,这个类专门用来存储数据 视图:它是一个类,这个类专门用来显示和修改数据 框架类:一个容器,这个容器装了视图 健完工程之后,类视图: 运行一下: 几个比较重要的函数 ...
- Django实现简单的用户添加、删除、修改等功能
一. Django必要的知识点补充 1. templates和static文件夹及其配置 1.1 templates文件夹 所有的HTML文件默认都放在templates文件夹下. 1.2 stati ...
- MVC5 网站开发之六 管理员 2、添加、删除、重置密码、修改密码、列表浏览
目录 奔跑吧,代码小哥! MVC5网站开发之一 总体概述 MVC5 网站开发之二 创建项目 MVC5 网站开发之三 数据存储层功能实现 MVC5 网站开发之四 业务逻辑层的架构和基本功能 MVC5 网 ...
随机推荐
- Oracle 用户操作表权限
grant select any table to xxx 将使得xxx用户能够查看到所有用户的表:正确的授权不能是这样: 用户是隔离表的schema,授权时..
- The Hungarian Abhorrence Principle
原文:http://www.butunclebob.com/ArticleS.UncleBob.TheHungarianAbhorrencePrinciple The Hungarian Abh ...
- Tomcat安装和目录简介
要知道动态的网页必须要有服务器的支撑! 1.知名的java web服务器 Tomcat:Apache组织发布,免费开源的,轻量级 JBoss.WebLogic是商用的,价格较高,但相对于开源的更加稳定 ...
- Linux命令每日一个
2014-3-31 1:39 (1)tree linux以树状的结构显示当前目录及其包含的子目录下的文件 #apt-get install tree #tree //在当前目录下直接使用该命令即可 ...
- rsync服务器的搭建
Rsync(remote synchronize)是一个远程数据同步工具,简要的概括就是主机于主机之间的文件目录数据的一个同步.下面就是rsync服务器的搭建过程. 系统环境 平台:Centos ...
- think queue 消息队列初体验
使用的是tp5 自带的消息队列 thinkphp top里的 消息队列框架 think-queue 这是thinkphp官方团队开发的一个专门支持队列服务的扩展包 消息队列应用场景: 消息队列适用于 ...
- 房上的猫:java基础知识部分知识点
1.Java常见的注释有哪些,语法是怎样的? 1)单行注释用//表示,编译器看到//会忽略该行//后的所文本 2)多行注释/* */表示,编译器看到/*时会搜索接下来的*/,忽略掉/* */之间的文 ...
- Java笔记:字符串详解
字符串详解 更新时间:2018-1-6 21:20:39 String 字符串创建 String str1="ABC";//推荐使用 String str2 = new Strin ...
- spring boot 之热部署(三)
热部署:当发现程序修改时自动启动应用程序. spring boot使用的是spring-boot-devtools是一个为开发者服务的一个模块.其原理用了classLoader 其中一个加载不变的类, ...
- 【Win 10 应用开发】MIDI 音乐合成——更改乐器音色
在开始今天的吹 BB 博文之前,说点题外话. 首先,上次老周给大伙伴们介绍完发送 MIDI 音符,本来说好的接着说一下如何更改乐器音色,为啥这么久都没更新呢.特特来解释一下,最近老周接了一个 ASP. ...