原生js 用正则实现removeclass hasclass getsclass addclass .

【原生js 用正则实现removeclass hasclass getsclass addclass .】的更多相关文章

原生js 用正则实现removeclass hasclass getsclass addclass .

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…

原生JS编写getByClass、addClass、removeClass、hasClass

前言: 年后换了工作,在现在的公司写交互主要使用JS原生:刚刚入门前端的时候写交互一直用的原生JS,虽然用的不怎么样.后来去之前的公司之后,leader主张把jQuery用好,JS原生自然就熟练了:一路下来,jQuery用的比较熟练了,但是原生JS反而退步了,很久没用,有的东西都有点手生了:现在的公司用原生JS也挺好的,感觉现在很多新的技术也都基于JS原生: 做了两个项目,其中对class的DOM操作挺多的,在网上看了很多资料,在别人的基础上总结封装了几个经常用到的函数:getByClass.a…

原生js实现增加（addclass）,删除（removeclass）,判断是否存在（hasclass）,如果存在删除，如果不存在添加（toggleclass）和获取类名（getbyclass）的方法

<!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 addclass,hasClass,removeClass,toggleClass的兼容

(function (window) { 'use strict'; // class helper functions from bonzo https://github.com/ded/bonzo function classReg(className) { return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); } // classList support for class management //…

原生JS实现addClass,removeClass,toggleClass

jQuery操作class的方式非常强大,但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery. 在此写了一个利用原生js来实现对dom元素class的操作方法 1.addClass:为指定的dom元素添加样式 2.removeClass:删除指定dom元素的样式 3.toggleClass:如果存在(不存在),就删除(添加)一个样式 4.hasClass:判断样式是否存在下面为一toggleClass的测试例子 <style type="text/css&quo…

原生JavaScript实现的addclass,removeclass,hasclass,toggleclass,getbyclass

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>addclass,removeclass,hasclass,toggleclass,getbyclass</title> </head> <body> <div class="div1" id="b…

抛开jQuery，拾起原生JS的DOM操作

常用的JS-DOM操作与jQuery的对比 jQuery用多了,还是需要来熟练熟练原生JS的操作,不然写JS都快离不开jQuery了目录 1. 获取DOM 2. 创建DOM 3. 添加DOM 4. 删除DOM 5. 添加class 6. 是否存在class 7. 删除class 8. 实现 JQ 的toggleClass 9. 获取DOM的css样式 10. 给DOM设置css样式 11. 删除DOM的css样样式 12. DOM的查找(遍历),例如查找父级,子级,兄弟等节点 13. 获取DO…

【前端性能】必须要掌握的原生JS实现JQuery

很多时候,我们经常听见有人说jquery有多快多快.在这个各种类库满天飞的时候,不得不说的是,能有原生JS快吗? 是的,明显原生JS要更快,因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许多其他的东西,考虑通用性必然会导致性能的损耗. 当然,我不是提倡写代码纯用原生JS实现,我记得淘宝玉伯曾经说的一句话“框架能够让我们走的更快,但只有了解原生的JS才能让我们走的更远”. 一些感(fei)想(hua): 原生的js,好比全真教的武功,一步步从基础开始(先练气再御剑),很长一段时间内和j…

原生js和jquery实现图片轮播特效

本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换式1.首先是个外围部分(其实也就是最外边的整体wrapper)2.接着就是你设置图片轮播的地方(也就是一个banner吧)3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式)4.然后是图片两端的左箭头和右箭头5.然后是一个透明背景层,放在图片底部6.然后是一个图片描述info…

原生js实现常见的jquery的功能

原生选择器充分利用 bind(this)绑定 <div id="box"> <ul> <li >111 </li> <li class="lione">2222</li> <li class="lione">3333</li> </ul> </div> <div id="box2"> <…