或者，当JQ在某个地方出现问题时，只使用老派的DOM方法。

var myElement = $('#my_element')[0];
var myElClass = myElement.getAttribute('class').split(/\s+/g);
//splits class into an array based on 1+ white space characters

myElClass.push('new_class');

myElement.setAttribute('class', myElClass.join(' '));

//$(myElement) to return to JQ wrapper-land

了解DOM人。即使是在2016年的框架狂欢中，它也经常有所帮助。此外，如果您曾经听到有人将DOM与汇编进行比较，请替我踢他们一脚。

jQuery 2.2支持SVG类操作

jQuery 2.2和1.12发布的帖子包括以下引用:

While jQuery is a HTML library, we agreed that class support for SVG elements could be useful. Users will now be able to call the .addClass(), .removeClass(), .toggleClass(), and .hasClass() methods on SVG. jQuery now changes the class attribute rather than the className property. This also makes the class methods usable in general XML documents. Keep in mind that many other things will not work with SVG, and we still recommend using a library dedicated to SVG if you need anything beyond class manipulation.

jQuery 2.2.0示例

它测试:

.addClass（） .removeClass（） .hasClass（）

如果你点击那个小方块，它会改变它的颜色，因为class属性被添加/删除了。

$ (" # x”).click(函数(){ if ($(this).hasClass("clicked")) { (美元).removeClass(“点击”); }其他{ (美元).addClass(“点击”); ｝ })； .clicked { 填充:红色!重要; ｝ < html > < >头 < script src = " https://code.jquery.com/jquery-2.2.0.js " > < /脚本> > < /头 身体< > <svg width="80" height="80"> <rect id="x" width="80" height="80" style="fill:rgb(0,0,255)"/> < / svg > 身体< / > < / html >

jQuery 3没有这个问题

jQuery 3.0版本中列出的一个变化是:

添加SVG类操作(#2199,20aaed3)

这个问题的一个解决方案是升级到jQuery 3。它很有效:

Var翻转= true; setInterval(函数(){ //可以使用toggleClass，但要演示addClass。 If(翻转){ $ (svg圆).addClass(“绿色”); ｝ 其他{ $ (svg圆).removeClass(“绿色”); ｝ 翻转= ! }, 1000); SVG圆{ 填充:红色; 中风:黑色; 笔划宽度:5; ｝ svg圆。绿色{ 填充:绿色; ｝ < script src = " https://code.jquery.com/jquery-3.0.0.min.js " > < /脚本> svg < > <circle cx="50" cy="50" r="25" /> < / svg >

存在的问题:

jQuery类操作函数不能与SVG元素一起工作的原因是jQuery 3.0之前的版本对这些函数使用className属性。

摘自jQuery attributes/classes.js:

cur = elem.nodeType === 1 && ( elem.className ?
    ( " " + elem.className + " " ).replace( rclass, " " ) :
    " "
);

这与HTML元素的行为一致，但对于SVG元素，className略有不同。对于SVG元素，className不是字符串，而是SVGAnimatedString的实例。

考虑下面的代码:

var test_div = document.getElementById('test-div'); var test_svg = document.getElementById('test-svg'); console.log (test_div.className); console.log (test_svg.className); # test-div { 宽度:200 px; 高度:50 px; 背景:蓝色; ｝ <div class="test div" id="test-div"></div> <svg width="200" height="50" viewBox="0 0 200 50"> <rect width="200" height="50" fill="green" class="test svg" id="test-svg" /> . < / svg >

如果运行这段代码，您将在开发人员控制台中看到如下内容。

test div
SVGAnimatedString { baseVal="test svg",  animVal="test svg"}

如果我们要将SVGAnimatedString对象转换为jQuery所做的字符串，我们将有[object SVGAnimatedString]，这是jQuery失败的地方。

jQuery SVG插件如何处理这个:

jQuery SVG插件通过修补相关函数来添加SVG支持，从而解决了这个问题。

摘自jQuery SVG jQuery .svgdom.js

function getClassNames(elem) {
    return (!$.svg.isSVGElem(elem) ? elem.className :
        (elem.className ? elem.className.baseVal : elem.getAttribute('class'))) || '';
}

这个函数将检测一个元素是否是SVG元素，如果是，它将使用SVGAnimatedString对象的baseVal属性(如果可用)，然后返回到class属性。

jQuery在这个问题上的历史立场:

jQuery目前在Won 't Fix页面上列出了这个问题。以下是相关部分。

SVG/VML或命名空间元素bug jQuery主要是HTML DOM的库，因此大多数与SVG/VML文档或名称空间元素相关的问题都不在讨论范围之内。我们确实尝试解决“渗透”到HTML文档的问题，比如从SVG冒出来的事件。

显然，jQuery认为完全支持SVG超出了jQuery核心的范围，更适合插件。

一个解决方法是将class添加到svg元素的容器中:

$ (' .svg-container ') .addClass(“svg-red”); . SVG -红色SVG圆圈{ 填充:# ED3F32; ｝ < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> < div class = " svg-container”> <svg height="40" width="40"> <circle cx="20" cy="20" r="20"/> < / svg > < / div >

只需将缺失的原型构造函数添加到所有SVG节点:

SVGElement.prototype.hasClass = function (className) {
  return new RegExp('(\\s|^)' + className + '(\\s|$)').test(this.getAttribute('class'));
};

SVGElement.prototype.addClass = function (className) { 
  if (!this.hasClass(className)) {
    this.setAttribute('class', this.getAttribute('class') + ' ' + className);
  }
};

SVGElement.prototype.removeClass = function (className) {
  var removedClass = this.getAttribute('class').replace(new RegExp('(\\s|^)' + className + '(\\s|$)', 'g'), '$2');
  if (this.hasClass(className)) {
    this.setAttribute('class', removedClass);
  }
};

然后你可以这样使用它，而不需要jQuery:

this.addClass('clicked');

this.removeClass('clicked');

所有功劳都归功于托德·莫托。

编辑2016:阅读下面两个答案。

JQuery 3修复了潜在的问题 Vanilla JS: element.classList.add('newclass')适用于现代浏览器

JQuery(小于3)不能向SVG添加类。

.attr()与SVG一起工作，所以如果你想依赖jQuery:

// Instead of .addClass("newclass")
$("#item").attr("class", "oldclass newclass");
// Instead of .removeClass("newclass")
$("#item").attr("class", "oldclass");

如果你不想依赖jQuery:

var element = document.getElementById("item");
// Instead of .addClass("newclass")
element.setAttribute("class", "oldclass newclass");
// Instead of .removeClass("newclass")
element.setAttribute("class", "oldclass");