Question

我正在尝试在jQuery之上编写的第三方库。

我注意到，对于他们的一些小工具，当你的来源说，例如，

<div id="myWidgetInst" class="their-widget-class-0" ... </div>

Firebug显示生成的DOM元素为：

 <div id="myWidgetInst" class="their-widget-class-0 their-widget-class-1 ..." ... </div>

他们是怎么做到的？非常感谢。

Answer 1

这可能是jquery！

可能正在运行向元素添加类的函数

Answer 2

不确定我是否完全理解您的问题，但在查看网站的“常规”来源时，此来源不会显示由于javascript修改而对DOM进行的任何修改。 Firebug确实显示了这些更新。

使用jQuery，只需在要修改的元素上使用.addClass("className")或.removeClass("className")函数即可添加/删除类

Answer 3

他们会使用jQuery向元素添加类。例如，如果插件的目的是隐藏页面上的所有元素（创新且非常实用，我知道），他们可以使用以下内容：

$(document).ready(function() {
    $("*").addClass("my-widget-made-your-element-invisible");
});

使用CSS：

.my-widget-made-your-element-invisible { display: none; }

您可以在jQuery中操作class属性的方法包括以下内容：

$("#elem").addClass("a");       // adds the class "a" to elem
$("#elem").removeClass("a");    // removes the class "a" from elem
$("#elem").attr("class", "a");  // gives elem a complete class of "a"
$("#elem").attr("class", "");   // removes all classes from attribute

对于某些标记元素，“class”属性的值会隐含地扩展

3 个答案: