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

问题描述 投票:2回答:2

请友好一点。我的第一个问题。我正在学习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 jquery html html5
2个回答
4
投票

在纯JavaScript中,它只是一个更简洁的方法:

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

那就是这样的jQuery:

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

因为它是jQuery,它变得越来越简洁,它最终变成:

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

2
投票

这是你学习时要问的正确问题,对你有好处!话虽这么说,一个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的信息。

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

© www.soinside.com 2019 - 2024. All rights reserved.