我如何在vanilla js中编写这个JQuery addClass方法 [英] How would I write this JQuery addClass method in vanilla js

问题描述

那我怎么写呢

$('div').addClass('border1');

，就像我的add class方法一样。到目前为止我所拥有的是，

in Vanilla javascript, like what would my add class method look like. So far what I have is,

function addClass(x,y) {
    x.className += " " + y;
}

但我知道这是错误的，因为参数已关闭。我真的输了。

but i know this is wrong, as the parameters are off. Im really lost.

推荐答案

让我们仔细看看jQuery在这里做了什么。

Let's take a closer look at what jQuery does here.

$（'div'）是什么意思？

在jQuery术语中，它意味着选择文档中的所有'div'元素。

$（'div'）是一个jQuery对象，它表示文档中的所有 div 元素。但是在这段代码中你没有自己专门针对单个DOM元素。

In jQuery terms it means "select all 'div' elements in the document".
$('div') is a jQuery object which represents all div elements in the document. But nowhere in this code you specifically target a single DOM element by yourself.

让我们编写自己的简化选择对象MySelect：

Let's write our own simplified selection object "MySelect":

/**
 * `MySelect` object constructor.
 */
function MySelect(selector){
    this.elementList = document.querySelectorAll(selector);
}

现在让我们使用它：

var divs = new MySelect('div');
divs.elementList; // all `div` elements in the document.

（请注意 querySelectorAll 是一种原生的javascript DOM方法）

(Note that querySelectorAll is a native javascript DOM method)

现在我们有了一个元素选择对象，让我们为它添加一个 addClass 方法：

Now that we have an elements selection object, let's add an addClass method to it:

/**
 * Add the specified class to all elements selected by this object.
 */
MySelect.prototype.addClass = function(cls){
    var i, e;
    for (i = 0; i < this.elementList.length ; i++){
        e = this.elementList[i];
        e.className += " " + cls;
        // can also use e.classList.add
    }
}

瞧：

divs.addClass('xyz');

这是一个非常简单的方式，就是jQuery的工作方式。

This, in a very simplified fashion, is how jQuery works.

您可以使用 $ 语法：

function $(selector){
    return new MySelect(selector);
}

并照常使用：

$('div').addClass('xyz');

这篇关于我如何在vanilla js中编写这个JQuery addClass方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！