jQuery 选择器 return 是什么类型的对象？

Question

我正在尝试获取 "li" 个元素中的 html 个，并以字符串形式提醒它们。

HTML:

<ul>
    <li>lorem ipsum dolor <span>sit</span> amet 1</li>
    <li>lorem ipsum dolor <span>sit</span> amet 2</li>
    <li>lorem ipsum dolor <span>sit</span> amet 3</li>
    <li>lorem ipsum dolor <span>sit</span> amet 4</li>
    <li>lorem ipsum dolor <span>sit</span> amet 5</li>
    <li>lorem ipsum dolor <span>sit</span> amet 6</li>
</ul>

<p id="greeting">Hello <strong>World</strong>!</p>

Javascript:

$(document).ready(function(e){
    var list =  $("li");
    var greeting = $("#greeting");
    var content ="";
    for(var i=0, len = list.length; i<len; i++) {
        content += $(list[i]).html();   
        //why do I have to use the $ here instead of just doing list[i].html()

      //content += list[i].html(); why does this not work?
    }
    alert(content);
    alert(greeting.html());  //why does this work without the $ ?
});

我做了一些研究，了解到 jQuery 选择器 return DOM 元素包裹在 jQuery 对象中，这样我们就可以应用 jQuery 方法但是为什么 greeting.html() 行在没有 $ 的情况下工作正常？

TypeError: list[i].html 不是函数

为什么我在执行 list[i].html 而不是 $(list[i]).html() 时会出现此错误？

这里是 fiddle.

Answer 1

jQuery 选择return 一个jQuery 选择集（一个"jQuery object"）。该对象也是一个 "array like" 对象，这意味着您可以像示例中那样通过索引器表示法访问选择。

选择集中的个元素是dom个元素，而不是jQuery个选择集本身。如果要将 DOM 元素转换为 jQuery 选择集，则需要将其包装在 $(yourElement) 中。

var jQ = $("div"); // get all divs
jQ[0]; // the first div, a DOMElement
$(jQ[0]); // a selection containing the first div of the old selection
jQ.eq(0); // convenience for the above.

API这样做的原因是为了效率，如果你选择了10000个div，创建10000个新对象是浪费的。

Answer 2

它们存储为 HTMLElement 数组，包装为单个 jQuery 对象。

如果你想获得一个元素，你可以使用 .eq():

content += list.eq(i).html();

Answer 3

登录$("li")你就明白了。

它是 jQuery 对象中 DOM 元素的集合，当您使用 $("li")[i] 时，它会得到一个 DOM 元素返回存储在 jQuery 对象，您可以在家中使用 list[i].innerHTML 获取 html 而无需转换回 jQuery 对象，就像使用普通的 Javascript 选定元素一样。

jQuery 选择器 return 是什么类型的对象？

What kind of object does a jQuery selector return?

html

javascript

jquery

innerhtml