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 网 ...
随机推荐
- java调优(一)
- 根据图片的路径(绝对路径/相对路径都可以),生成base64的
根据图片的路径(绝对路径/相对路径都可以),生成base64的 <!DOCTYPE html> <html> <head> <meta charset=&qu ...
- docker:(1)docker基本命令使用及发布镜像
docker镜像可以完全看作一台全新的电脑使用,无论什么镜像都是对某一东西进行了配置,然后打包后可以快速移植到需要的地方直接使用 省去复杂的配置工作 比如java web项目部署,如果是新部署,需要装 ...
- Java语言的概述?-什么是Java? (附一张Java工程师的学习路线图)
什么是Java? Java是一门面向对象编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承.指针等概念,因此Java语言具有功能强大和简单易用两个特征.Java语言作为静态面向 ...
- shell的含义
shell:壳,是操作linux最直接的方式,通过shell中输入命令和linux系统进行交互. shell是一个小盒子,每一个有独立的命名空间,登录后的操作就是一个shell(有可能是bash,zs ...
- Android动画(二)-属性动画
我们在上一篇博客中,讨论了视图动画与帧动画.那么这节课则要讨论更复杂,更强大的Property animation(属性动画). 视图动画使用简单,但是功能也简单.(只有那四种功能).并且也不改变Vi ...
- Python核心编程笔记--私有化
一.私有化的实现 在Python中想定义一个类是比较简单的,比如要定义一个Person类,如下代码即可: # -*- coding: utf-8 -*- # __author : Demon # da ...
- java 连接 postgresql
最近公司用postgresql这个数据库,看网上说这个数据库还算好用,自己就用了一下,我就是用java连接了一下数据库. 其实每个数据库的连接方式大致相同,只是用到的驱动不同,用不同数据库只需要换不同 ...
- 【转】 CSS十问——好奇心+刨根问底=CSSer
最近有时间,想把酝酿的几篇博客都写出来,今天前端小学生带着10个问题,跟大家分享一下学习CSS的一些体会,我觉得想学好CSS,必须保持一颗好奇心和刨根问底的劲头,而不是复制粘贴,得过且过.本人能力有限 ...
- (译)JToken的层次结构
原文地址:https://stackoverflow.com/questions/38558844/jcontainer-jobject-jtoken-and-linq-confusion/3856 ...