JavaScript变量等于jQuery选择器创建开始和结束标记。为什么？

Posted 2021-03-27

请友好一点。我的第一个问题。我正在学习javascript和jQuery。谷歌没有多大帮助，因为我不知道如何提出正确的问题。需要人为干预。我试图用这个简单的代码来弄清楚发生了什么：

var myVar = $("<p>");

这创建了一个打开和关闭<p>标签，我不明白为什么。

接下来，我将此段添加到现有元素#myDiv。例如：

$("myDiv").html(myVar);导致以下结果：

<div id="myDiv"><p></p></div>

继续...

$("myDiv").html(myVar.text("A string for the paragraph"));

结果是：

<div id="myDiv"><p>A string for the paragraph</p></div>

为什么第一个片段会创建一个开始和结束的<p>标签？这个叫什么？

答案

在纯JavaScript中，它只是一个更简洁的方法：

var myVar = document.createElement("p");

那就是这样的jQuery：

var myVar = $("<p></p>");

因为它是jQuery，它变得越来越简洁，它最终变成：

var myVar = $("<p>");

另一答案

这是你学习时要问的正确问题，对你有好处！话虽这么说，一个SO帖子将无法完全回答它，至少在我认为你问的方式，但我（我们）会给你我能做的。

首先，JavaScript与HTML交互的方式是通过文档对象模型（DOM）。这就像获取整个HTML文档并将其切割为单个元素，标签，属性等，然后在“普通”JavaScript中构建该文档的表示形式（非常大）Object。分配给此Object的变量名称是document。这个特殊的对象具有各种神奇的属性和方法（函数），可用于读取和更新任何DOM（最终转换为您在浏览器中看到的HTML）。

到目前为止我所描述的与jQuery无关，所有这些操作都可以通过简单的JavaScript完成（例如Jack Bashford的答案）。但是，由于浏览器和其他Web技术多年来的发展方式，在“普通”JavaScript中执行任何此类操作时，存在（或曾经存在）许多“陷阱”。从历史上讲，jQuery是一个非常重要的工具，因为它提供了一种“标准”方式来编写非常直接的代码来完成所有这些DOM读取或操作，而jQuery库将确保避免所有的“陷阱”。

那么，什么是jQuery（在代码中，是）？那么，可能有很多技术答案，一个重要的技术答案是它是一个对象，因为在JavaScript中，(almost) EVERYTHING is an Object。但是，让我们关注手头的问题以及您提供的代码：

$("<p>");

这里，美元符号是IS jQuery（或指向jQuery对象的变量）。后面的括号表示jQuery对象被称为函数。就像在代码中说“用这个字符串做jQuery的事情：'<p>'。”退一步，完整的声明

var myVar = $("<p>");

正在说“这个变量'myVar'现在指的是用'<p>'给我们做jQuery事情的结果。”

关于在jQuery中编写的“神奇”的东西是语法几乎总是感觉相同（并给它一种直观的感觉）。

1. 抓住jQuery对象。这通常是变量$，但jQuery也会起作用。
2. 调用函数（$()）。在某些情况下，您不会像ajax请求那样，但这是一个单独的主题和用例。
3. 提供任何类型的selector（$('#myDiv')），这是一种基于文档属性和位置引用特定HTML元素的方式（这里我们正在查找基于它的id的特定元素）。
4. 使用结果（$('#myDiv').html(...etc)）

我将在这一点上指出jQuery documentation应该是方便的，所以你知道你得到的任何特定函数调用的结果，但几乎在所有情况下，这个函数将返回另一个jQuery对象，其中包含对任何元素的引用您在该功能调用期间选择或操纵。

在后一个例子中，我们将接收对#myDiv元素的引用，然后我们在其上调用另一个函数（.html()），该函数将读取或更新该html元素的内容。

对于您特别询问的行，用于“选择”'p'标记的语法将由jQuery解释为不查找文档中的所有'p'元素（该语法将为$("p")），而是创建一个新的'p'元素并将其作为指向这个新创建元素的jQuery Object存储在内存中。阅读更多关于语法及其可能性here的信息。

好吧，我希望这很有帮助。我确实喜欢写它，甚至自己也学到了一些东西。