在DOM元素上应用jQuery方法

Question

我开始学习jQuery，我想知道为什么不能应用jquery方法

在这个例子中

：

$('p')[0].html('salut !'); //for this instruction i got this error :
                           //"TypeError: $(...)[0].html is not a function "

虽然这个有效：

$('body')[0].tagName.toLowerCase();

我很困惑，我想知道这两种情况之间有什么区别。

这是同一问题的另一个例子：

var listItems = $( 'li' );
var rawListItem = listItems[0]; // or listItems.get( 0 )
var html = rawListItem.html();
// Object #<HTMLInputElement> has no method 'html'

这里是如何使用.eq（）：

来使用jquery方法的方法

var listItems = $( 'li' );
var secondListItem = listItems.eq( 1 );
secondListItem.remove();

感谢您为此提供一些解释。

Answer 1

jQuery对象与DOMElement完全不同。

• jQuery对象允许您执行它们的jQuery操作。 html()，val()，eq()等
• DOMElement的...不要。因为它们是DOMElement，而不是jQuery对象。

如果你检查documentation for .get()，你会看到你得到DOMElement，而不是jQuery对象。 [0]等也是如此。

但是，

eq()会返回一个jQuery对象，允许您对它们执行jQuery操作。

tagName是DOMElement属性，这就是为什么可以在DOMElement返回的get()上执行它，但无法在返回的jQuery对象上执行它按eq()。在html()和get()上使用eq()则相反。

当然，您可以通过DOMElement将任何$()包装在jQuery对象中，这将允许您对其执行jQuery操作;

$($('p')[0]).html('salut !');

但在您的情况下，您应该使用eq()：

$('p').eq(0).html('salut !');

Answer 2

它通过练习来学习，巫婆是一件好事，所以这里有一些指针：

• jQuery使用对象，当你将它们包装到$(...)时，你将得到一个对象
• 当你使用数组指针时，如$('p')[0]，你将始终得到原生数组输出的内容，巫婆是一个字符串，因此，不是一个对象

为了将第一个元素作为对象检索，您有 3个选项

var jQueryObj = $('p:first'); // using :first

或

var jQueryObj = $("p").eq(0); // using eq()

或

var jQueryObj = $( $('p')[0] ); // wrap it in a jQuery call

请注意， console 始终是您测试javascript时最好的朋友