`
hiuman
  • 浏览: 50751 次
  • 性别: 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实例

    在此写了一个利用原生js来实现对dom元素class的操作方法 1.addClass:为指定的dom元素添加样式 2.removeClass:删除指定dom元素的样式 3.toggleClass:如果存在(不存在),就删除(添加)一个样式 4.hasClass:判断样式是否...

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

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

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

    写了一个利用原生js来实现对dom元素class的操作方法 1.addClass:为指定的dom元素添加样式 2.removeClass:删除指定dom元素的样式 3.toggleClass:如果存在(不存在),就删除(添加)一个样式 4.hasClass:判断样式是否存在...

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

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

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

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

    jayScript:一种不同的方法

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

    jQuery 1.4.1 中文参考

    5.1.4 hasClass(class) 73 5.1.5 filter(expr) 73 5.1.6 filter(fn) 74 5.1.7 is(expr) 75 5.1.8 map(callback) 75 5.1.9 has(expr) 76 5.1.10 not(expr) 77 5.1.11 slice(start, [end]) 77 5.2 查找 79 5.2.1 ...

    stardom:在dom中注视自己的方式

    星星 在dom中注视自己的方式 原料药 addClass removeClass hasClass toggleClass findAncestor 执照

    jQuery详细教程

    &lt;script type="text/javascript" src="/jquery/jquery.js"&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); &lt;p&gt;If you click on me, I ...

    JQuery新版中文手册

    JQuery开发手册 jQuery 核心函数 jQuery([sel,[context]]) jQuery(html,[ownerDoc]) jQuery(callback) jQuery.holdReady(hold)1.6+ jQuery 对象访问 each(callback) size() length selector context get...

    jQuery样式有关1

    DOM操作hasClass():某个元素是否有指定样式removeClass():移除指定样式addClass():添加样式toggleClass:切换样式(有

    jQuery 1.5 API 中文版

    $.jQuery( selector [, context] ), .jQuery( element ), .jQuery( elementArray ), .jQuery( jQueryObject ), .jQuery( ) $.jQuery( html [, ownerDocument] ), .jQuery( html, props ) $.jQuery( fn ) jQuery ...

    支持单选多选全选的jQuery房屋楼层选择代码.zip

    js代码 [removed] ... function choiceTitle(obj){ ... $(obj).parent().parent().find("tr:nth-child(" (index i) ")")....这是一款功能强大支持单选多选全选的jQuery房屋楼层选择代码,具体看演示效果就明白了。

    jquery1.11.0手册

    jQuery 1.11.0 速查表 核心 jQuery 核心函数 jQuery([sel,[context]]) jQuery(html,[ownerDoc])1.8* jQuery(callback) jQuery.holdReady(hold) jQuery 对象访问 each(callback) size() length selector ...

    Jquery 1.3 简体中文手册

    toggleClass(class [, switch]) HTML代码 html( [val] ) 文本 text( [val] ) 值 val( [val] ) CSS CSS css(name) css(properties) css(name, value) 位置 offset() position() scrollTop( [val] ) ...

    fd-class:修改元素的类

    var addClass = require ( 'fd-class' ) . addClass ; var removeClass = require ( 'fd-class' ) . removeClass ; var toggleClass = require ( 'fd-class' ) . toggleClass ; var hasClass = require ( 'fd-class...

    JQuery 1.3 中文参考手册

    toggleClass(class [, switch]) HTML代码 html( [val] ) 文本 text( [val] ) 值 val( [val] ) CSS CSS css(name) css(properties) css(name, value) 位置 offset() position() scrollTop( [val] ) ...

    jQuery完全实例.rar

    jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都构建于这个函数之上,或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式(通常由 CSS 选择器组成),然后根据这个...

Global site tag (gtag.js) - Google Analytics