原生JS编写getByClass、addClass、removeClass、hasClass
前言:
年后换了工作,在现在的公司写交互主要使用JS原生;刚刚入门前端的时候写交互一直用的原生JS,虽然用的不怎么样。后来去之前的公司之后,leader主张把jQuery用好,JS原生自然就熟练了;一路下来,jQuery用的比较熟练了,但是原生JS反而退步了,很久没用,有的东西都有点手生了;现在的公司用原生JS也挺好的,感觉现在很多新的技术也都基于JS原生;
做了两个项目,其中对class的DOM操作挺多的,在网上看了很多资料,在别人的基础上总结封装了几个经常用到的函数:getByClass、addClass、removeClass、hasClass;
原理看看代码,如果不懂看看注释也就没什么大问题。但是,有时候原理看懂了,自己不动手去做一下,就不会发现自己的问题;容易看懂,但是自己不会写;所以还的多动手~
下面是几个函数具体的代码:
//获取class
function getByClass(oParent, sClass){
if(oParent.getElementsByClassName){
return oParent.getElementsByClassName(sClass);
}else{
var res = [];
var re = new RegExp(' ' + sClass + ' ', 'i')
var aEle = oParent.getElementsByTagName('*');
for(var i = 0; i < aEle.length; i++){
if(re.test(' ' + aEle[i].className + ' ')){
res.push(aEle[i]);
}
}
return res;
}
} //增加class
function addClass(obj,cls) {
var obj_class=obj.className,//获取class的内容;
blank = ( obj_class != '' ) ? ' ' : '';//判断获取的class是否为空,如果不为空,则添加空格;
added = obj_class + blank + cls;//组合原来的class和需要添加的class,中间加上空格;
obj.className = added;//替换原来的class;
} //移除class
function removeClass(obj,cls){
var obj_class = '' + obj.className + '';//获取class的内容,并在首尾各加一个空格;'abc bcd' -> ' abc bcd '
obj_class = obj_class.replace(/(\s+)/gi,' ');//将多余的空字符替换成一个空格;' abc bcd ' -> ' abc bcd '
removed = obj_class.replace(' '+cls+' ',' ');//在原来的class,替换掉首尾加了空格的class ' abc bcd ' -> 'bcd '
removed = removed.replace(/(^\s+)|(\s+$)/g,'');//去掉首尾空格;'bcd ' -> 'bcd'
obj.className = removed;//替换原来的class;
} //判断是否存在class
function hasClass(obj,cls){
var obj_class = obj.className,//获取class的内容;
obj_class_lst = obj_class.split(/\s+/);//通过split空字符将cls转换成数组
x = 0;
for(x in obj_class_lst){
if ( obj_class_lst[x] == cls ) {
return true;
}
}
return false;
}
注:1.还是得在工作项目、学习中不断的积累这些经验,经常用到的东西自己封装一个库比较方便;
2.这些函数最好放在页面底部,特别是getByClass;因为根据页面的加载顺序,会先加载JS,如果写在body前面,会先运行getByClass,后面的内容还没加载,就会出现找不到class的情况,出现报错;
原生JS编写getByClass、addClass、removeClass、hasClass的更多相关文章
- 原生JavaScript实现的addclass,removeclass,hasclass,toggleclass,getbyclass
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 原生js 用正则实现removeclass hasclass getsclass addclass .
function getByClass(oParent,sClass){ if(oParent.getElementsByClassName){ return oParent.getElementsB ...
- 原生js 实现jquery addClass,removeClass
代码如下: function hasClass(obj, cls) { let reg = new RegExp("(\\s|^)" + cls + "(\\s|$)&q ...
- 关于错位动画的练习,原生js编写
最近在网上看到一个关于错位动画的文章,感觉非常有趣,便自己练习了一下,文章连接:http://www.w3cplus.com/animation/staggering-animations.html ...
- 原生js编写的安全色拾色器
<html > <head> <meta http-equiv="Content-Type" content="text/html; cha ...
- 原生js实现addClass,removeClass,hasClass方法
function hasClass(elem, cls) { cls = cls || ''; if (cls.replace(/\s/g, '').length == 0) return false ...
- html5的classList属性介绍和原生js实现jQuery的addClass,removeClass,hasClass方法
其实html5已经扩展了class操作的相关API,其中classList属性就以及实现了class的增删和判断. classList属性的方法有: add(value) 添加类名,如果有则不添加 c ...
- 使用原生JS编写ajax操作XMLHttpRequst对象
ajax其本质就是XMLHttpRequest,现在jquery调用异步的方法很方便,但是也不能忘记原生的JS去编写ajax; 需要注意的是,很多人在写的时候喜欢只用XMLHttpRequest对象r ...
- 原生JS编写的照片墙效果实例演示特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- python 学习(pip工具的安装)
mac 电脑上使用终端命令 curl https://bootstrap.pypa.io/get-pip.py | python3 基于Python 3 pip --version pip3 list ...
- typescript项目中import 图片时报错:TS2307: Cannot find module ‘...’
最近在用typescript写项目时,我用import来加载一个图片,webpack编译文件是会报错如下: 报错: 解决: 如果在js中引入本地静态资源图片时使用import img from './ ...
- jquery实现简易的计算器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 洛谷P5156 [USACO18DEC]Sort It Out
这题就是让你求字典序第k小的最短乱序子序列 转换一下,其实就是字典序第k大的最长上升子序列 就统计一下以i结尾的最长上升子序列\(f[i]\),长度为i的上升子序列的开头组成的集合\(v[i]\),转 ...
- python super()继承和多继承
class A: def __init__(self): self.n = 2 def add(self, m): print('self is {} @A.add'.format(self)) se ...
- python学习,day1作业:设计一个三级菜单
设计一个三级菜单,要求能够下钻,能够推出,比较笨的方法 # coding=utf-8 # Author: RyAn Bi data = { 'beijing':{ 'changping':{ 'wud ...
- head first
1, insert 单引号时,使用/转义 2, 不要用NULL, 查找时使用isNull 来判断. 3, 用and / or 连接两个not 时,要写两个NOT 4,delete from tab ...
- @Transcational特性
捕获RuntimeException 捕获Error 并不捕获Checked Exception 在方法中使用@Transcational注解时候,通过throw new Exception(),在发 ...
- RabbitMQ---初识
1.概述 1.1 RabbitMQ 是 实现了 高级消息队列协议(AMQP) 的开源 消息代理软件,也称为 面向消息的中间件: AMQP:Advanced Message Queuin ...
- gVim安装vim-template插件后提示Undefined variable vim_template_subtype/Press ENTER or type command to continue
Win7 64位 gVim:version 8.1.1234 vim-template:github链接 安装方式: 直接下载master的zip压缩包,解压后放入本地gVim安装目录的plugin, ...