这个jquery代码是如何工作的

How does this jquery code work?

本文关键字：工作 何工作 jquery 代码 这个      更新时间：2023-09-26

（很抱歉标题不好，我想不出更好的了）

我最近了解到，你可以在jquery中做这样的事情：

$("<div><span>content</span></div>").css("color", "red").appendTo("body");

我的问题是关于以下内容：

$("<div><span>content</span></div>")

jquery如何将其从字符串转换为dom元素，以及如何在vanillajs（没有jquery）中做同样的事情？

我试着浏览jquery的源代码，但我并没有真正理解它

非常感谢您的解释！

纯javascript中的等价物是

var newDiv = document.createElement("DIV");
newDiv.style.color = "red";
var newSpan = document.createElement("SPAN");
newSpan.innerHTML = "content";
newDiv.appendChild(newSpan);
document.body.appendChild(newDiv);

jquery通过定义可链接的函数来简化这一点，这意味着下一个函数使用前一个函数的返回值作为其输入，因此在您的示例中，它将css添加到html代码中，然后将所有代码添加到主体

jQuery正在创建一个jQuery对象的新实例，该对象包含对解析<div><span>content</span></div>创建的DOM元素的引用。

jQuery所做的一件非常有用的事情是，每次调用jQuery或其任何API方法都会返回新创建的jQuery实例或当前jQuery实例。这样做的好处是，您可以将调用链接起来以转换一组DOM元素。

在这种情况下，$(...)返回一个jQuery实例，该实例包含要操作的DOM元素。接下来，您链接了css()，它为该元素添加了样式属性。最后，您将appendTo()链接到一个目标DOM元素中。在这种情况下，该目标是<body>元素。

以下是这个过程在JavaScript:中（大致）的样子

首先，我们需要创建要插入的DOM元素。

var node = document.createElement("div");
node.innerHTML = "<div><span>content</span></div>";
var myElement = node.children[0];

然后我们将设置样式属性。

myElement.style.color = "red";

最后，让我们将它附加到现有元素中。

document.body.appendChild(myElement);

从字符串创建DOM元素是通过innerHTML属性的魔力实现的。当JavaScript解析器遇到一个字符串被设置为元素innerHTML时，它会将该字符串解析为DOM元素，并将这些元素作为子元素插入。

因此，jQuery在后台所做的是创建一个伪元素，将您提供的字符串设置为伪元素innerHTML属性的值。这导致创建DOM元素并将其作为伪元素的子元素插入。最后，它检索对children元素（您想要的元素）的引用。

这一行从html字符串创建一个jQuery包装的对象，本质上是创建一个包含span的div，其文本是单词content:

 $("<div><span>content</span></div>")

这将CSS属性应用于创建的元素，告诉它以红色显示文本：

.css("color", "red")

这将创建和样式化的元素添加到body标签末尾的DOM中：

.appendTo("body");
相关文章：