Question

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

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

会产生[]，但

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

给出[<title>FooBar</title>]。但在此示例中，<title> 是<head>的后代，所以不应该使用find找到它？

有人可以解释原因吗？

Answer 1

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

The jQuery docs explain当你让jQuery以这种方式创建一些HTML对象时会发生什么：

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

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

强调补充。

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

Screenshot of the results in Firebug

Filter（）在元素集中搜索与选择器匹配的元素。您有一个由<title>元素组成的集合，因此它返回该元素。同时，Find（）在<head>元素中查找子<title>元素并找不到任何元素返回！

Answer 2

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

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

$('head').find('title')
[
<title>Test</title>
]

怎么来.filter可以找到一个标签而.find不能？

2 个答案: