Question

我开始使用JavaScript和jQuery，而不仅仅是做一些闪亮的效果，我对jQuery中的基本内容有疑问。我经常不知道我在中真正使用了什么。

例如，如果a具有以下标记：

<img class="image" src="picture.png" width="100" height="100" />

在jQuery中做

var img = $('.image');

img然后和我做的时间不一样

var img = $('<img class="image" src="picture.png" width="100" height="100" />');

但是，如果我想在图像上创建一个新图像并在其上运行一些jQuery函数，比如.css()，我必须这样做：

var img = $('<img class="image" src="picture.png" width="100" height="100" />');
img.appendTo('.myElement');
$('.image').css("border","none");

这是一个双重步骤？

我的问题：我在这里遇到的不同类型的东西是什么？第一个例子有什么区别？我想了解在使用jQuery / JavaScript时我正在使用的元素。

我的问题[更新]：我可能有点不清楚，我不想知道这些示例实际上做了什么，但我在调用这些函数时选择/创建了什么（a指向DOM元素的指针，JavaScript中表示HTML的字符串，但仍需要添加到要显示的DOM中，等等。）

Answer 1

当您将选择器（例如$('.image')）传递给jQuery函数时，它就是这样：选择。 jQuery对象将包含DOM中已存在的与该选择器匹配的所有元素。

当您将HTML字符串传递给jQuery函数时，它会创建一个包含HTML表示的元素的jQuery对象。但是，它不会自动将它们添加到DOM中，因此您无法选择它们;您需要使用各种方法之一来添加它们 - .append()，.appendTo()，.before()，.after()等。

然而，您的CSS操作示例存在缺陷，因为您可以将jQuery函数链接在一起。您可以将它组合成一行代码：

var img = $('<img class="image" src="picture.png" width="100" height="100" />')
          .css("border","none")
          .appendTo('.myElement');

如果您只想对元素进行操作，那么您甚至不需要将其保存到变量中。但是，如果您以后想要再次使用它，那么这样做可能会更快;取决于你将要用它做什么。

Answer 2

使用选择器查找元素和使用HTML代码创建元素之间的区别仅在于，页面中已存在一个元素，而另一个元素已创建并与页面分开存在。

您可以在没有先将其添加到页面的情况下对新创建的对象执行大部分操作，例如设置CSS样式：

var img = $('<img class="image" src="picture.png" width="100" height="100" />').css("border","none");
img.appendTo('.myElement');

在将元素添加到页面之前，有些事情是您无法对元素执行的。例如，某些动画不起作用，除非页面中存在该元素。

Answer 3

这将选择页面中包含class="image"的所有div，并将它们保存在img变量中以供将来操作：

var img = $('.image');

所以如果你以后再做：

img.remove();

此代码将从页面中删除所有先前选定的元素。

虽然我很确定你想要选择页面上的所有图像（而不是div）：

var img = $('img');

而

var img = $('<img class="image" src="picture.png" width="100" height="100" />');

创建一个新元素，它只存在于你的img变量中，而不是在网页中，直到你决定将它附加到dom中。

你可以对两种元素类型使用相同的操作，唯一的区别是后一个元素还没有显示在你的网页中，它存在于dom的边缘。

Answer 4

jquery函数做了太多不同的任务，IMO。

如果你传递jquery函数$()一些html，它将为你创建一个包装在jquery包装器对象中的dom元素。

如果你传递一个选择器，它将找到所有与选择器匹配的dom元素，并在jquery包装器中返回它们的包装。

在您的示例中，如果文档中没有其他内容class="image"，那么您的变量img与$('.image')完全相同（将其插入文档后）。以$('.image')方式访问它只是回到插入元素的一种更迂回的方式 - 您基本上是在搜索dom中插入刚刚插入的元素，而不是使用代码中已有的对它的引用。

Answer 5

简单易懂：

$("<img>") - 创建新元素，与document.createElement("img")相同。
$(".img") - 在DOM中选择一个元素。

有趣的事实：

$(function(){ /*blah.*/ }) - 在DOM加载完成后运行。
$()实际上可以做很多事情！
$(".img", document.body) - 这比$(".img")快，因为它的范围是^{_{（或者你称之为的任何东西）}}。

jQuery - 所选DOM元素和新元素之间的差异

5 个答案: