介绍:

1、hasClass:判断DOM元素是否存在类。

2、addClass:为的DOM元素添加类。

3、removeClass:删除DOM元素的类。

4、toggleClass:如果DOM元素存在(不存在)类,就删除(添加)类。

原生 JavaScript 实现的代码:

// 实现方法2:传入一个数组

function hasClass(obj, className) {
// obj是数组或伪数组
for(var i = 0,len = obj.length;i<len;i++){
if((' '+obj[i].className+' ').indexOf(' '+className+' ')>-1){
return true;
}
} return false;
} // ----------------
// ----------------
// ----------------
// 实现方法1:传入单个对象 function hasClass(obj, cls) {
return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
} function addClass(obj, cls) {
if (!this.hasClass(obj, cls)) {
obj.className += " " + cls;
}
} function removeClass(obj, cls) {
if (hasClass(obj, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
obj.className = obj.className.replace(reg, ' ');
}
} function toggleClass(obj,cls){
if(hasClass(obj,cls)){
removeClass(obj, cls);
} else {
addClass(obj, cls);
}
}

原生JavaScript实现jQuery的hasClass,removeClass,addClass,toggleClass的更多相关文章

  1. 原生 JavaScript 代替 jQuery【转】

    目录 用原生JavaScript代替jQuery Query Selector CSS & Style DOM Manipulation Ajax Events Utilities Promi ...

  2. 四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现

    原文:四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现 虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们 ...

  3. 表单美化-原生javascript和jQuery单选按钮(兼容IE6)

    最近很多人问怎么美化表单的元素,大家都知道表单元素在各个浏览器中的表现不一,反正也是特别的丑,那么问题就来了,我们能自己设计表单元素的外观么?答案是可以的,现在我们就来试试吧.我们用两种方式来实现这一 ...

  4. jQuery学习之路(7)- 用原生JavaScript实现jQuery的某些简单功能

    ▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...

  5. 原生javascript与jquery 的比较

    JavaScript的优点和缺点: 优点: 性能:由于JavaScript运行在客户端,节省了web服务器的请求时间和带宽 轻量级的脚本语言,比较容易学习 运行在用户机器上,运行结果和处理相对比较快. ...

  6. 常见的dom操作----原生JavaScript与jQuery

    1.创建元素 文本节点 JavaScript: document.createElement(),只接收一个参数,创建后需要手动将其添加到文档树中,例如: var newDiv = document. ...

  7. 原生javascript和jquery实现简单的ajax例子

    后台C#代码 public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/p ...

  8. 原生JavaScript和jQuery的较量

    JavaScript和jQuery有很多相似知促,那么二者又是如何进行较量,我们先了解一下什么是JavaScript和jQuery,知其源头,才能知其所以然. 简介: [JavaScript] 一种直 ...

  9. 表单美化-原生javascript和jQuery多选按钮(兼容IE6)

    前些天我们讲了下单选按钮的美化今天来做表单元素多选按钮的美化.我们的想法是:利用多选按钮是否被选中和是否不给选择的特性来为按钮的父元素添加对应的样式,就是说用什么的样式是由按钮的状态来决定. 用到的图 ...

随机推荐

  1. 【UE4】二十三、UE4笔试面试题

    在CSDN博客看到的,带着这些问题,多多留意,正所谓带着问题学习. 一. 1.Actor的EndPlay事件在哪些时候会调用? 2.BlueprintImplementableEvent和Bluepr ...

  2. spark练习--统计xxx大学的各个少数名族的情况

    最近,有一份数据,是关于学校的数据,这个里面有所有学生的信息,今天闲来没事,我就想用spark的方式来读取文件,并且来统计这个学校的各个民族的情况,以前我用hadoop中mapReduce来计算,不得 ...

  3. FCS校验 C语言简单实现

    static uint8 calcFCS(uint8 *pBuf, uint8 len){  uint8 rtrn = 0;  while (len--)  {    rtrn ^= *pBuf++; ...

  4. 4 . GET方法实现文章分类

    复习:博客站点 <!DOCTYPE html> {% load staticfiles %} <html> <head> <meta charset=&quo ...

  5. 3437: 小P的牧场

    3437: 小P的牧场 思路 斜率优化. dp[i]表示到第i个点(第i个点按控制台)的最小代价. 代码 #include<cstdio> #include<iostream> ...

  6. 获取<考试>博文密码!o(*≧▽≦)ツ

    就是CJ高二组通用的密码 如果你想知道,请联系QQ,3057244225,或者直接面对面问博主(...) 是我们的内部材料,原创题目是不能外传的.请谅解. 当然如果是原题的话我们是不会上锁的啦

  7. 二分法求函数值的Pascal实现

    用二分法求在(a,b)上单调的函数近似值   第八行的表达式可更改,第三行的kexi决定的精度,小数值计算可将第五行的extended更为real或double PROGRAM EQUANTION ( ...

  8. Oracle 学习---- 练习语法 循环( loop end loop; for ;while; if elsif end if )

    /*--set serveroutput on;declare mynum number(3) :=0; tip varchar2(10):='结果是 ';begin mynum:=10+100; d ...

  9. Day4 自定义控件/ListView/RecyclerView

    创建自定义控件 引入布局 在新增的title.xml中创建一个自定义的标题栏: <LinearLayout xmlns:android="http://schemas.android. ...

  10. linux服务器基本安全配置手册

    转:忘了在哪转的,直接复制到笔记里了,贴出来分享 假如你想要搭建一个Linux服务器,并且希望可以长期维护的话,就需要考虑安全性能与速度等众多因素.一份正确的linux基本安全配置手册就显得格外重要. ...