<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>addclass,removeclass,hasclass,toggleclass,getbyclass</title> </head> <body> <div class="div1" id="b…
前言: 年后换了工作,在现在的公司写交互主要使用JS原生:刚刚入门前端的时候写交互一直用的原生JS,虽然用的不怎么样.后来去之前的公司之后,leader主张把jQuery用好,JS原生自然就熟练了:一路下来,jQuery用的比较熟练了,但是原生JS反而退步了,很久没用,有的东西都有点手生了:现在的公司用原生JS也挺好的,感觉现在很多新的技术也都基于JS原生: 做了两个项目,其中对class的DOM操作挺多的,在网上看了很多资料,在别人的基础上总结封装了几个经常用到的函数:getByClass.a…
function getByClass(oParent,sClass){ if(oParent.getElementsByClassName){ return oParent.getElementsByClassName(sClass); }else{ var arr=[]; var aEle=oParent.getElementsByTagName('*'); var re=new RegExp('\\b'+sClass+'\\b'); ;i<aEle.length;i++){ if(re.t…
代码如下: function hasClass(obj, cls) { let reg = new RegExp("(\\s|^)" + cls + "(\\s|$)"); return obj.className.match(reg);} function addClass(obj, cls) { let Obj = obj; let objClass = obj.className; let blank = objClass !== "" ?…
最近在网上看到一个关于错位动画的文章,感觉非常有趣,便自己练习了一下,文章连接:http://www.w3cplus.com/animation/staggering-animations.html 练习出来的效果地址:http://godzbin.github.io/%E5%8A%A8%E7%94%BB%E6%B5%8B%E8%AF%95.html 基本由原生js编写,代码如下: <html> <head> <meta charset="utf-8"&g…
<html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> #abc-colorPicker .colorPick-close,#filter-colorPicker .colo…
function hasClass(elem, cls) { cls = cls || ''; if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时,返回false return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' '); } function addClass(ele, cls) { if (!hasClass(elem, cls)) {…
其实html5已经扩展了class操作的相关API,其中classList属性就以及实现了class的增删和判断. classList属性的方法有: add(value) 添加类名,如果有则不添加 contains(value) 判断是否存在类名,返回Boolean值 remove(value) 从列表中删除类名 toggle(value) 切换类名:如果列表中存在则删除,否则添加 为了更好的兼容性,我们可以自己手动实现这几个方法. 这里利用了DOM属性 className,我们始终是在操作这个…
ajax其本质就是XMLHttpRequest,现在jquery调用异步的方法很方便,但是也不能忘记原生的JS去编写ajax; 需要注意的是,很多人在写的时候喜欢只用XMLHttpRequest对象readyState 值去判断请求状态和结果,而readyState 的值也有不同的说明 当readyState 的值为0的时候,请求还未初始化(还没有调用open()方法) 当readyState 的值为1的时候,请求刚建立,但是还没有发送(还没有调用 Send()方法). 当readyState…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-…