jquery - jQuery 和 $(' 有什么区别') 和 $('p')

Question

$('<p>')有人可以向我解释一下 jQuery和$('p')jQuery之间的区别吗？

例如，如果我写：

$('body').append($('<p>').html('hello my friend'));

然后出现文本“你好，我的朋友”。

但是，当我写：

$('body').append($('p').html('hello my friend'));

然后什么也没有发生。

Answer 1

$('<p>')创建一个新的段落 ( <p>) 元素。( <p></p>)

$('p')选择所有现有的段落元素。

例如：

$('p').after($('<p>').html('foo'))

将选择所有段落并在其后添加新段落。

Answer 2

区别：

$('<p>')创建一个新的段落元素

$('p')选择 DOM 中的所有段落元素

您的案例：

示例 1：

$('body').append($('<p>').html('hello my friend'));

将创建一个新的段落元素，给它一些文本，然后将元素添加到正文中。

示例 2：

$('body').append($('p').html('hello my friend'));

将选择 DOM 中已经存在的所有段落元素并将其内容更改为“你好，我的朋友”，然后将它们全部附加到正文中，这没有多大意义，因为它们已经在 DOM 中。

由于运行此代码时没有任何内容可见，因此您的页面可能不包含任何<p>元素，因此没有任何内容与$("p")选择器匹配。

Answer 3

jQuery 可以解析 HTML 并创建一个实际的 DOM 元素。也就是说，当您执行类似的操作时$("<p />")，jQuery 会解析标记并在内部创建一个可以附加到文档的 DOM 段落元素。

另一方面，jQuery 集成了 CSS 选择器引擎Sizzle 。jQuery 函数接受 CSS 选择器，这意味着$("p")选择文档中的所有段落元素。您还可以使用更复杂的选择器$("p:first-child")，例如选择文档的第一段。

在此处了解有关 jQuery CSS 选择器的更多信息。