Question

那我怎么写

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

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

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

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

Answer 1

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

$('div')的含义是什么？

在jQuery术语中，它意味着＆＃34;选择所有＆＃39; div＆＃39;文件中的元素＆＃34; $('div')是一个jQuery对象，它表示文档中的所有div元素。但是在这段代码中你没有自己专门针对单个DOM元素。

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

/**
 * `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方法）

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

/**
 * 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的工作原理。

您可以执行$语法：

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

像往常一样使用它：

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

Answer 2

element.classList是vanillaJS的做法

＆＃13;

var x = document.getElementById('x');
var y = document.getElementById('y');
var z = document.getElementById('z');

y.addEventListener('click',function(){

  x.classList.add('blue');

});

z.addEventListener('click',function(){

  x.classList.toggle('blue');

});

＆＃13;

#x {
  width: 50px;
  height: 50px;
  border: 1px dotted gray;
}

.blue {
  background-color: blue;
}

＆＃13;

<div id="x"></div>

<button id="y">add the class</button>
<button id="z">toggle the class</button>

＆＃13;

Answer 3

如果您正在重新定位IE10 +，则可以使用

 var el = document.getElementById("someId");
 el.classList.add(className);

适用于所有浏览器：

if (el.classList)
   el.classList.add(className);
else
   el.className += ' ' + className;

来源： http://youmightnotneedjquery.com/#add_class

Answer 4

function addClass(selector, class) {
    els = document.querySelectorAll(selector);
    for (var i = 0; i < els.length; i++) {
        els[i].className += class;
    }
}

然后你可以这样做：

addClass('div', 'border1');
addClass('#someID', 'someclass');
addClass('.someClass', 'someotherclass');

Answer 5

我写这不是推荐，而是因为你似乎想要创建一个方法，而不是一个函数;可能是因为人们可能会更好。然而，它们大致相同，除了扩展原型以添加方法可能会带来麻烦。但是，如果你必须：

NodeList.prototype.addClass = function (cName) {
    // creates an Array from the NodeList, and iterates through:
    return [].forEach.call(this, function (elem) {
        // adds the passed-in class-name:
        elem.classList.add(cName);
    });
};

以上可以通过以下方式调用：

document.querySelectorAll('div').addClass('newClassName');

或者：

document.getElementsByTagName('div').addClass('newClassName');

请注意，这会使用相对现代浏览器中的功能，但可以使用for循环（forEach）和带className属性的字符串连接（{{1} }）如果需要的话。

我如何在vanilla js中编写这个JQuery addClass方法

5 个答案: