介绍:

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. Android 如何在xmL 里面动态设置padding

    如题,Android 如何在xmL 里面动态设置padding 有时候,你的布局加载完成之后,你findViewByid 找到控件,设置padding 会导致白条,布局闪动,那怎么办呢? 你是不是就想 ...

  2. vue计算属性和观察者

    1. 计算属性 模板内的表达式非常便利,但在模板中放入太多的逻辑会让模板过重且难以维护,所有就有了计算属性 例子: //html代码 <div id="example"> ...

  3. __bridge 使用注意

    前奏 在平常开发中,我们可能遇到 CoreFoundation(CF) 框架的对象和 OC 对象之间的类型转换,这时候我们需要 __bridge 来帮忙 注意 : 如果是使用 CF __bridge ...

  4. linux统计分析流量-wireshark

    wireshark是一款带界面的开源抓包工具,可以用来对系统流量进行统计分析. 安装 由于wireshark是带界面的,所以一般在界面环境下运行,可以通过yum安装: $ yum install -y ...

  5. Http状态码枚举(摘自 Microsoft 程序集 System.dll)

    // 摘要: // 包含为 HTTP 定义的状态代码的值. public enum HttpStatusCode { // 摘要: // 等效于 HTTP 状态 100. System.Net.Htt ...

  6. 自动化测试环境搭建--Python及selenium

    安装pyhton 访问Python官网:http://www.python.org 下载页Windows下找到适合64位系统的版本 下载后双击安装 安装后查看计算机->属性->高级系统设置 ...

  7. katalon系列一:初识Katalon Studio自动化测试工具

    最近准备把公司的系统搞上UI自动化,先是自己用Python+selenium+pytest写了一个框架,开始写case的时候发现效率极其慢.原因为: (1)开发为提高前端响应时间,使用前端路由技术,一 ...

  8. Appium与python自动测试环境及demo详解

    App--UI自动化这种高端的名词已经被越来越多的人所高呼,可是从实际角度来讲,个人觉得还是有点鸡肋,不如接口自动化敏捷度高,工作量 也是接口自动化的好几倍.但是,[划重点了]  在技术时代中,作为测 ...

  9. win10 ubuntu16双系统安装教程

    一. 知识准备 1.材料 前提: 本文档是在win10 64位下进行安装的!32位的安装注意其中的一些细节即可 硬件: X86_64 位电脑 硬盘有 40G 空闲 软件:[百度搜索即可] (1) Ul ...

  10. c++知识点总结--静态与动态类型

    对象的静态类型(static type),就是它在程序中被声明时所采用的类型 对象的动态类型(dynamic type)是指“目前所指对象的类型”   vitual 函数是动态绑定而来,调用一个vir ...