3

在 Chrome 控制台中尝试这两行（当然使用 jQuery 上下文）：

$('<head><title>FooBar</title></head>').find('title')

会产生[]，但是

$('<head><title>FooBar</title></head>').filter('title')

给[<title>​FooBar​&lt;/title>​]. 但是在这个例子中，<title> 是的后代<head>，所以不应该使用find?

有人可以解释为什么不吗？

4

2 回答 2

6

因为$('<head><title>FooBar</title></head>')没有做你认为它在做的事情。

jQuery 文档解释了当您要求 jQuery 以这种方式创建一些 HTML 对象时会发生什么：

如果 HTML 比没有属性的单个标记更复杂，如上例所示，则元素的实际创建由浏览器的 innerHTML 机制处理。在大多数情况下，jQuery 会创建一个新<div>元素并将该元素的 innerHTML 属性设置为传入的 HTML 片段。当参数具有单个标签（带有可选的结束标签或快速结束标签）-$( "<img />" )或$( "<img>" )，$( "<a></a>" )或$( "<a>" )- jQuery 创建使用原生 JavaScript createElement() 函数的元素。

在传递复杂的 HTML 时，某些浏览器可能无法生成完全复制所提供的 HTML 源的 DOM。如前所述，jQuery 使用浏览器的 .innerHTML 属性来解析传递的 HTML 并将其插入到当前文档中。在此过程中，一些浏览器会过滤掉某些元素，例如<html>、<title>、 或<head>元素。因此，插入的元素可能不能代表传递的原始字符串。

重点补充。

尝试$('<head><title>FooBar</title></head>')在你的 JavaScript 控制台中运行，你会看到它只返回一个<title>元素。已<head>被您的浏览器删除。我在 Firebug 中的结果是：

Firebug 中的结果截图

Filter() 在一组元素中搜索匹配选择器的元素。您有一个由一个<title>元素组成的集合，因此它返回该元素。与此同时，Find() 在您的<title>元素内部查找子<title>元素，但根本找不到要返回的元素！

于 2013-07-01T00:34:01.473 回答
0

因为find搜索其论点的后代。给定一个完整的 DOM，它会发现title就好了：

<html>
<head>
    <title>Test</title>
    <script
        src="../jquery.min.js" ></script>
</head>
<body>
</body>


$('head').find('title')
[
<title>​Test​&lt;/title>​
]
于 2013-07-01T00:33:13.817 回答