2

我开始使用 JavaScript 和 jQuery 不仅仅是为了做一些闪亮的效果，而且我对 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 时我正在处理的实际元素是什么。

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

4

5 回答 5

5

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

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

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

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

如果这就是你想要对元素做的所有事情，那么你甚至不需要将它保存到变量中。但是，如果您以后想再次使用它，那么这样做可能会更快；完全取决于您将要使用它做什么。

于 2012-06-06T22:55:20.423 回答
1

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

您可以对新创建的对象执行大多数操作，而无需先将其添加到页面中，例如设置 CSS 样式：

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

在将元素添加到页面之前，您无法对元素执行某些操作。例如，除非元素存在于页面中，否则某些动画将不起作用。

于 2012-06-06T23:00:16.067 回答
0

这会选择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 的边缘。

于 2012-06-06T22:54:49.213 回答
0

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

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

如果您将选择器传递给它，它将定位与选择器匹配的所有 dom 元素，并在 jquery 包装器中将它们包装器返回。

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

于 2012-06-06T22:56:03.670 回答
0

为了简单起见：

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

有趣的事实：

  • $(function(){ /*blah.*/ })- 当 DOM 完成加载时运行。
  • $()实际上可以做很多事情！
  • $(".img", document.body)- 这比$(".img")因为它是作用域（或任何你称之为的）更快。
于 2012-06-06T22:56:49.910 回答