jQuery 选择器返回啥样的对象? [复制]

Posted

技术标签:

【中文标题】jQuery 选择器返回啥样的对象? [复制]【英文标题】:What kind of object does a jQuery selector return? [duplicate]jQuery 选择器返回什么样的对象? [复制] 【发布时间】:2016-01-28 04:52:49 【问题描述】:

我正在尝试获取“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 选择器返回包装在 jQuery 对象中的 DOM 元素,以便我们可以在其上应用 jQuery 方法,但是为什么在没有 $ 的情况下,greeting.html() 行可以正常工作?

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

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

这里是fiddle。

【问题讨论】:

greeting 返回一个 Jquery 对象及其所有功能。 list 也返回一个 Jquery 对象,但由于您使用了“li”选择器,它有多个 html DOM。使用 li[i] 您现在正在使用单个 html DOM,周围没有 Jquery 对象。这就是你必须使用 $(li[i]) 来获取 JQuery 函数的原因。 【参考方案1】:

jQuery 选择返回一个 jQuery 选择集(一个“jQuery 对象”)。该对象也是一个“类似数组”的对象,这意味着您可以像示例中一样通过索引器表示法访问选择。

选择集中的元素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 个新对象是浪费的。

【讨论】:

var jQ = ("div"); ..?假设你的意思是$("div")jQ.eq(0) 返回一个 jQuery 对象,所以不需要$(jQ.eq(0)); @TJ 我回答说,看到用户留下的“可能重复”标志 - 并关闭它 - 我发布时已经有答案。重复的内容不会引起注意并无论如何都会被删除 - 它会将其从主页中删除,并且不会让其他用户在其上浪费时间(投票或回答)。 啊,我明白了,那没关系 为了效率!向 jQuery 团队致敬!谢谢本杰明。【参考方案2】:

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

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

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

【讨论】:

【参考方案3】:

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

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

【讨论】:

以上是关于jQuery 选择器返回啥样的对象? [复制]的主要内容,如果未能解决你的问题,请参考以下文章

如何查找未记录版本的 handleGesture 选择器(用于 UIWebView)需要啥样的参数?

对象对象的 GraphQL 模式/解析器是啥样的?

在 graphql-yoga 中返回枚举的解析器函数是啥样的?

jQuery:当 jQuery 对象找不到指定的类选择器时,jQuery 会返回啥? [复制]

在 swift 3 中为这种类型的选择推荐啥样的控制?

JavaScript变量应该选择啥样的命名规则