一个jQuery对象和一个DOM元素有什么区别? .get()和.index()之间的区别? [英] What's the difference between a jQuery object and a DOM element? Difference between .get() and .index()?

查看:75
本文介绍了一个jQuery对象和一个DOM元素有什么区别? .get()和.index()之间的区别?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图弄清楚jQuery的 .get() .index(),我已经查看了jQuery API,我仍然没有得到它们之间的区别,也许我不明白术语?

I'm lead to this question when trying to figure out the difference between jQuery's .get() and .index(), I've looked over the jQuery API and I still don't get what the difference is between them, maybe i'm not understanding the terminology?

jQuery对象和DOM元素有什么区别?而DOM元素和DOM节点是否相同?他们只是< div> < a> 等是一个DOM节点/ DOM元素只是一个HTML标签?

What's the difference between a jQuery object and a DOM element? And are a DOM element and a DOM node the same thing? Are they just <div> and <a> etc. is a DOM node/DOM element just an HTML tag?

编辑:DOM不仅仅是页面的结构? < html>< body>等< / body>< / html>

and isn't the DOM just the structure of the page? <html><body>etc.</body></html>?

推荐答案

get 方法用于访问jQuery对象中的DOM元素:

The get method is used to access the DOM elements within a jQuery object:

var allDivs = $("div").get();

在这个例子中, allDivs 将成为数组包含所有匹配的元素(在这种情况下,它将包含DOM中的每个 div 元素。

In that example, allDivs will be an array containing all the matched elements (in this case, it would contain every div element in the DOM).

index 方法返回一个整数,告诉您所选元素相对于其兄弟的位置。请考虑以下HTML:

The index method returns an integer that tells you the position of the selected element relative to its siblings. Consider the following HTML:

<ul>
    <li>1</li>
    <li id="second">2</li>
    <li>3</li>
</ul>

以下jQuery:

console.log($("#second").index()) //Prints "1"

至于您的另一个问题,DOM节点几乎是DOM中的任何东西。元素是节点的类型(类型1)。您也可以使用文本节点(类型3)。一个元素几乎是任何标签。

As for your other question, a DOM node is pretty much anything in the DOM. Elements are types of nodes (type 1). You also have, for example, text nodes (type 3). An element is pretty much any tag.

为了使之更清楚,请考虑以下HTML:

To make that clearer, consider the following HTML:

<div id="example">
    Some text
    <div>Another div</div>
    <!--A comment-->
</div>

以下JS:

var div = $("#example").get(0);
for(var i = 0; i < div.childNodes.length; i++) {
   console.log(div.childNodes[i].nodeType);   
}

这将打印出来:

3 - Text node ("Some text")
1 - Element node (div)
3 - Text node ("Another div")
8 - Comment node (<!-- -->)
3 - Text node ("A comment")

您可以在 here 找到节点类型列表。要了解DOM的实际情况,请参阅 MDN文章

You can find a list of node types here. For an excellent introduction to what the DOM actually is, see this MDN article

这篇关于一个jQuery对象和一个DOM元素有什么区别? .get()和.index()之间的区别?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆