关于 jQuery 代码的一些基本问题答案

【问题标题】：Some basic questions regarding jQuery code关于 jQuery 代码的一些基本问题
【发布时间】：2014-04-25 18:01:55
【问题描述】：

我刚开始学习 JQuery，正在尝试找出一些基本的东西。非常感谢您对三个问题的帮助：

$(document).ready(function()
{
    var ADbanner = '<img src="http://image.banana.com/is/image/banana/checkout?$checkout%20shopping%20bag%20image$" class="ADscratch_img" />';  

    $(".right-space").after(ADbanner);
});

这个函数什么时候执行？
这个函数选择的是什么元素？
这个函数如何操作这个元素？

我知道对于第一个问题，该函数将在 DOM 加载后且在页面内容加载之前加载。现在class="ADscratch_img" 对我来说没有多大意义。我知道该功能可能正在移动图像，但不确定$(".right-space").after(ADbanner); 是什么意思。

【问题讨论】：

标签： jquery function class element

【解决方案1】：

这个函数什么时候执行？

在收到所有资源后文档准备就绪后执行。即触发事件DOMContentLoaded时。

这个函数选择的是什么元素？

这个函数选择所有类right-space的元素。

这个函数如何操作这个元素？

该函数查找类为 right-space 的元素，并在该元素旁边添加 HTML：

<img src="http://image.banana.com/is/image/banana/checkout?$checkout%20shopping%20bag%20image$" class="ADscratch_img" />

这意味着，在该元素之后，它将添加一个图像。

【讨论】：

【解决方案2】：

这将在文档的 DOM 为 ready 时运行
被选择的元素是所有具有right-space 类的元素
After 类为 right-space 的所有元素正在附加图像。

【讨论】：

【解决方案3】：

这个函数什么时候执行？

此函数将在 DOM 就绪时执行。也就是说，这个函数会在DOMContentLoaded事件被触发时执行。

这个函数选择的是什么元素？

此函数正在选择所有类为 right-space 的元素。

这个函数如何操作这个元素？

此函数正在放置以下 HTML sn-p:

<img src="http://image.banana.com/is/image/banana/checkout?$checkout%20shopping%20bag%20image$" class="ADscratch_img" />

在每个匹配的元素之后。

【讨论】：

【解决方案4】：

该函数将在文档准备就绪时执行（您可以放置一个 alert("something") 以查看它何时执行。

关于函数选择的内容，......好吧，您拥有的唯一选择器是右空间类

什么在操纵？正在操作您选择的元素，

您正在将该 img 标记添加到 .right-space 元素的末尾。

【讨论】：

【解决方案5】：

这个函数什么时候执行？

由于您将代码放入 DOM ready 中，因此它将在页面加载时执行

这个函数选择的是什么元素？

$(".right-space") 将匹配您页面中具有类right-space 的任何元素

这个函数如何操作这个元素？

$(".right-space").after(ADbanner); 将插入ADbanner，它是任何具有right-space 类的元素之后的图像。参考.after()

还可以参观 jQuery 的官方 learning center

Fiddle Demo

【讨论】：

【解决方案6】：

$(document).ready(function(){}) 行告诉函数在文档（网页）完成加载时执行。
内部 JQuery 表示要选择所有具有“.right-space”类的元素，然后
通过在选定元素（具有.right-space 类属性的元素）之后写入 HTML（使用 img 标签）插入图像。

【讨论】：