`
hiuman
  • 浏览: 52511 次
  • 性别: Icon_minigender_2
  • 来自: 广州
社区版块
存档分类
最新评论

原生JavaScript实现jQuery的hasClass,removeClass,addClass,toggleClass

阅读更多

介绍:
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);
    }
}
分享到:
评论

相关推荐

    原生js实现addclass,removeclass,toggleclasss实例

    在现代Web开发中,虽然广泛使用了jQuery等库来简化操作,但在不依赖这些库的环境中,我们需要使用原生JavaScript来实现相同的功能。 首先,我们需要了解几个关键的方法: 1. addClass:此方法用于给指定的DOM元素...

    原生js封装的一些jquery方法(详解)

    然而,在现代浏览器环境中,许多jQuery的方法已经被原生JavaScript实现所替代,这使得我们可以更高效地编写代码,同时减少依赖。以下是一些常见的jQuery方法,以及如何使用原生JavaScript进行封装。 ### 1. `...

    CSSClass:一个小的 (~2kB) 填充以将 .hasClass()、.addClass()、.removeClass() 和 .toggleClass() 添加到每个 HTML 元素

    CSSClass 是一个 JavaScript 微框架,它将函数 .hasClass、.addClass、.removeClass 和 .toggleClass 添加到 Element 原型中。 使用很简单。 包含脚本文件并仅使用函数(它们可以链接)。 您还可以通过在它们之间...

    原生JavaScript来实现对dom元素class的操作方法(推荐)

    使用原生JavaScript而非jQuery来实现这些功能,不仅可以减少项目对第三方库的依赖,还可以让我们更深入地了解DOM操作的内部机制。 首先,我们来理解一下文章标题中提到的几个关键词汇: - 原生JavaScript:指的是...

    Jquery实现简单的书本翻页效果_电纸书翻书效果

    在本文中,我们将深入探讨如何使用jQuery来实现一个基本的电子书翻页效果,这通常被称为电纸书翻书效果。jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理和动画效果,使得创建交互式的网页变得更加容易...

    jQuery样式有关1

    在本文中,我们将深入探讨jQuery中的样式操作,特别是与标题和描述相关的功能:hasClass()、removeClass()、addClass()、toggleClass()以及DOM元素尺寸和位置的处理。 1. hasClass(): hasClass() 方法用于检测一...

    domster:轻巧,快速的DOM包装器

    考虑到性能,domster使用内置选择器以2kb的速度提供类似jQuery的体验。 它放弃了较新的方法,而取而代之的是较旧的和优化效果更好的方法,它比其他方法查询DOM的速度要快得多。 适用于IE9 + 通过npm i domster或...

    一些有用的JavaScript和jQuery的片段分享

    jQuery的`toggleClass()`方法可以实现这个功能。例如: ```javascript $('#myelement').toggleClass('active'); ``` 如果`myelement`元素当前有`active`类,该方法会移除它;如果没有,则添加它。 ### 动态CSS...

    JQuery框架元素的属性与样式

    此外,JQuery还提供了`removeAttr()`方法来移除元素的属性,以及`hasClass()`, `addClass()`, `removeClass()`, 和 `toggleClass()`等方法来处理类(class)属性,极大地提高了处理元素样式的灵活性。 总结来说,...

    学习jquery

    3. **hasClass(), addClass(), removeClass() 和 toggleClass() 方法** 这些方法主要用于操作CSS类。`hasClass()`检查元素是否包含指定的类,`addClass()`添加类,`removeClass()`移除类,而`toggleClass()`则根据...

    jQuery1.11.0_中文版.chm.zip

    jQuery提供了便捷的CSS操作接口,如`.css()`, `.addClass()`, `.removeClass()`, `.toggleClass()`,使得改变样式、切换类名变得简单。 四、事件处理 jQuery的事件处理机制简化了JavaScript原生事件的绑定和解绑。...

    jQuery制作侧边悬浮折叠影藏弹窗特效

    在IT行业中,jQuery是一款非常流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。本教程将详细讲解如何利用jQuery创建一个侧边悬浮折叠影藏弹窗特效,以提升用户体验并增加网站互动性...

    dollabill:从零开始的jQuery精简版实现

    我决定尝试从零开始实现jQuery,作为学习普通JS的一种方法。 但是,通过此练习,我知道了它对您有多大的作用,使我对jQuery有了更大的赞赏! dollabill DOM操作(dom_manip.js) addClass removeClass ...

    Jquery技巧(必须掌握)

    在JavaScript的世界里,jQuery是一个非常流行且强大的库,它简化了许多DOM操作,事件处理,以及动画效果。在本文中,我们将深入探讨一些必备的jQuery技巧。 1. **检查jQuery是否加载**:在使用jQuery功能之前,确保...

    jqueryapi文档

    `.attr()`用于获取或设置元素的属性,`.removeAttr()`用于移除属性,`.hasClass()`检查元素是否包含指定类,`.addClass()`、`.removeClass()`和`.toggleClass()`分别用于添加、移除和切换类。 四、事件处理 jQuery...

    jayScript:一种不同的方法

    addEvent removeEvent triggerEvent 选择selectById selectByClass selectByTag selectByQuery selectParentById selectParentByClass selectParentByTag 第一的addClass removeClass hasClass toggleClass ...

    50个必备的实用jQuery代码段

    它简化了原本需要使用 `hasClass()`, `addClass()`, 和 `removeClass()` 来实现的功能。 ```javascript // 示例:根据 blueButton 类的存在与否切换该类 var a = $("#someElement"); a.toggleClass('blueButton'); ...

    我的JQuery笔记.doc

    1. 添加/删除类:$.addClass("class")和$.removeClass("class"),用于增加或删除元素的类样式。 2. 隐藏/显示元素:$.hide()和$.show(),隐藏或显示元素。可传入时间参数实现过渡效果,例如:$.hide(1000)表示1秒后...

Global site tag (gtag.js) - Google Analytics