jQuery $('<p>')和$('p')</p>之间有什么区别

时间:2013-03-17 21:58:26

标签: jquery

有人可以向我解释jQuery中$('<p>')$('p')之间的区别。

例如,如果我写:

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

然后出现'你好我朋友'的文字。

然而,当我写道:

$('body').append($('p').html('hello my friend'));
然后没有任何反应。

3 个答案:

答案 0 :(得分:2)

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

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

例如:

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

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

答案 1 :(得分:1)

差异:

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

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

您的案例:

示例1:

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

将创建一个新的paragraph-element,给它一些文本,然后将该元素添加到正文中。

示例2:

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

将选择已经存在于DOM中的所有段落元素并将其内容更改为“hello my friend”,然后将它们全部附加到正文中,这没有多大意义,因为它们已经在DOM中

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

答案 2 :(得分:1)

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

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

Learn more about jQuery CSS selectors here.