jQuery对象和DOM元素

Question

我想了解jQuery对象和DOM元素之间的关系..

当jQuery返回一个元素时,它会[object Object]在警报中显示出来.当getElementByID返回它显示为一个元素[object HTMLDivElement].这究竟是什么意思？我的意思是他们俩都是有区别的对象吗？

还有什么方法可以对jQuery对象和DOM元素进行操作？单个jQuery对象可以表示多个DOM元素吗？

Answer 1

我想了解jQuery对象和DOM元素之间的关系

jQuery对象是一个包含DOM元素的类数组对象.jQuery对象可以包含多个DOM元素,具体取决于您使用的选择器.

还有什么方法可以对jQuery对象和DOM元素进行操作？单个jQuery对象可以表示多个DOM元素吗？

jQuery函数(网站上的完整列表)对jQuery对象进行操作,而不是对DOM元素进行操作.您可以.get()直接使用或访问所需索引处的元素来访问jQuery函数中的DOM元素:

$("selector")[0] // Accesses the first DOM element in this jQuery object
$("selector").get(0) // Equivalent to the code above
$("selector").get() // Retrieve a true array of DOM elements matched by this selector

换句话说,以下内容应该会得到相同的结果:

<div id="foo"></div>

alert($("#foo")[0]);
alert($("#foo").get(0));
alert(document.getElementById("foo"));

有关jQuery对象的更多信息,请参阅文档.另请查看文档.get()

Answer 2

当您使用jQuery获取DOM元素时,jQuery对象返回包含对该元素的引用.当您使用类似的本机函数时getElementById,您将直接获得对元素的引用,而不是包含在jQuery对象中.

jQuery对象是一个类似于数组的对象,可以包含多个DOM元素:

var jQueryCollection = $("div"); //Contains all div elements in DOM

上面的行可以在没有jQuery的情况下执行:

var normalCollection = document.getElementsByTagName("div");

实际上,当你传入一个简单的选择器时,这正是jQuery在内部所做的div.您可以使用以下get方法访问jQuery集合中的实际元素:

var div1 = jQueryCollection.get(0); //Gets the first element in the collection

当你在jQuery对象中有一个元素或一组元素时,你可以使用jQuery API中的任何可用方法,而当你有raw元素时,你只能使用本机JavaScript方法.

Answer 3

我上个月刚刚开始玩jQuery,我心里也有类似的问题.到目前为止,您收到的所有答案都是有效的,但有一个非常精确的答案可能是:

假设你在一个函数中,并且要引用调用元素,你可以使用this,或者$(this); 但有什么区别？事实证明,当你使用时$(this),你将包装this在一个jQuery对象中.好处是,一旦一个对象是一个jQuery对象,你就可以使用它上面的所有jQuery函数.

它非常强大,因为您甚至可以var s = '<div>hello <a href='#'>world</a></div><span>!</span>'在jQuery对象中包装元素的字符串表示,只需将其包装在$()中:$(s).现在,您可以使用jQuery操作所有这些元素.

Answer 4

大多数jQuery成员Functions没有返回值,而是返回当前jQuery Object或另一个jQuery Object.

所以,

console.log("(!!) jquery >> " + $("#id") ) ; 

将返回[object Object],即jQuery Object维护集合,这是评估选择器String("#id")的结果Document,

而,

console.log("(!!) getElementById >> " + document.getElementById("id") ) ;

将返回[object HTMLDivElement](或实际上[object Object]在IE中)因为/如果返回值是a div Element.

还有什么方法可以对jQuery对象和DOM元素进行操作？(1)单个jQuery对象可以表示多个DOM元素吗？(2)

(1)FunctionjQuery中有一大堆与DOM有关的成员Object.做imo的最好的事情是,Function一旦你有一个特定的任务(比如选择Nodes或操纵它们),就可以在jQuery API文档中搜索相关信息.

• jQuery文档

(2)是的,单个jQuery Object可以维护多个DOM Element的列表.有多个Functions(例如jQuery.find或jQuery.each)构建在此自动缓存行为上.