我将如何在香草js中编写这个JQuery addClass方法

How would I write this JQuery addClass method in vanilla js

本文关键字：JQuery 方法 addClass js 香草      更新时间：2023-09-26

那我到底该怎么写 

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

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

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

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

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

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

在jQuery术语中，它的意思是"选择文档中的所有'div'元素"。
$('div')是一个jQuery对象，表示文档中的所有div元素。但是在此代码中，没有任何地方专门针对单个 DOM 元素。

让我们编写自己的简化选择对象"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方法(

现在我们有一个元素选择对象，让我们向它添加一个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');

>element.classList是vanillaJS的做法

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');
});
#x {
  width: 50px;
  height: 50px;
  border: 1px dotted gray;
}
.blue {
  background-color: blue;
}
<div id="x"></div>
<button id="y">add the class</button>
<button id="z">toggle the class</button>

如果你的目标是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

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');

我写这篇文章与其说是一个建议，不如说是因为你似乎想创建一个方法，而不是一个函数;大概是在印象中，一个可能会更好。但是，它们大致相同，只是扩展原型以添加方法可能会导致麻烦。但是，如果您必须：

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属性(classList.add()(的字符串连接来代替它们。

相关文章：