Question

当我执行下面的代码，它的行为像我期望（记录了DIV元素的内容）：

var html = '<form action="/" method="get" name="myform"><div>123</div></form>'; 
console.log($('div', html)); 

什么我不明白是为什么以下代码不起作用：

var html = '<form action="/" method="get" name="myform"><div>123</div></form>'; 
console.log($('form', html)); 

他们似乎是相同的，所以为什么当FORM选择不将DIV选择工作？

Answer 1

var html = '<form action="/" method="get" name="myform"><div>123</div></form>'; 
console.log($(html).html()); 

的形式是html根元素，$(html)就已经返回你所期望的jQuery对象。 所以，如果你尝试选择一个表单标签，jquery会尝试在你的表单中找到另一个表单标签，当然这个标签不存在。

Answer 2

对于选择器，第二个参数应该是一个jQuery或DOM对象。如果你提供一个字符串，它将搜索字符串的内容。要使其工作，你应该做的HTML变量是一个对象是：

var html = $('<form action="/" method="get" name="myform"><div>123</div></form>'); 
console.log($('div', html)); 

然后，如果你愿意，你可以把它添加到您的网页：

$('body').add(html); 

这也是一个不错的主意使用jQuery的对象变量$：

var $html = $('<form action="/" method="get" name="myform"><div>123</div></form>'); 

所以，你可以很容易地知道，这是一个jQuery对象已经和你没有呼吁前。 $（html）.show（）每次你想使用它时，你可以直接调用$ html.show（）;

Answer 3

$('form', html)作为$(html).find('form')。 .find()不看原始元素，只在其子级，因此无法找到form。

你可以使用一些解决方法是，像这样的：

var html = '<form action="/" method="get" name="myform"><div>123</div></form>'; 
console.log($('form', '<div>' + html + '</div>')); 

Fiddle。

Answer 4

很简单，第二个例子中不起作用，因为没有到字符串上下文中找到元素，而在第一个例子中，有是字符串的上下文中存在的一个div 。

在jQuery中，格式$('div', html)表示在html变量的上下文中查找div元素。这相当于$(html).find('div')。见http://api.jquery.com/jQuery/#expressioncontext

选择上下文 默认情况下，选择在DOM内执行他们的搜索在文档根目录开始 。但是，通过对$（）函数使用可选的第二个参数，可为 提供备用上下文。 例如，做一个事件处理程序内的搜索时，搜索可以 限制像这样：

$("div.foo").click(function() { 
    $("span", this).addClass("bar"); 
}); 

当跨度选择的搜索被限制为 此上下文中，仅在被点击的跨越元素将获得额外的 类。

在内部，选择器上下文是通过.find（）方法实现的，因此$("span", this)等于$(this).find("span")。

因为你的第二个例子中有没有形式字符串的内容（仅一个div是在它），它发现匹配。