1

我正在查看以下来自http://jqfundamentals.com/chapter/jquery-basics的显式迭代示例:

$( 'li' ).each(function( index, elem ) {
  // this: the current, raw DOM element
  // index: the current element's index in the selection
  // elem: the current, raw DOM element (same as this)
  $( elem ).prepend( '<b>' + index + ': </b>' );
});

注释被称为原始 DOM 元素,elem但随后代码调用.prepend().elem

我刚刚开始使用 jQuery,但据我了解,您只能在 jQuery 对象上调用 jQuery 方法,而不能在原始 DOM 元素上调用。我是不是误会了?

4

7 回答 7

5

该代码不调用prependelem它调用它$(elem)使其成为一个 jquery 对象。

于 2013-03-18T15:02:54.083 回答
3

您再次将原始 DOM 元素转换为 jquery 对象。请参阅elem. elem是原始的,但是 $(elem)是 jquery 对象,因此您可以使用任何可用的 jQuery 函数(方法)prepend作为一个

   $( elem ).prepend( '<b>' + index + ': </b>' );
//-^-- here this $ sign
于 2013-03-18T15:03:26.867 回答
3

elem是一个原始的 DOM 元素。通过包装 elem$(elem)您正在从原始 DOM 元素创建一个 jQuery 对象。jQuery 允许你这样做。然后,您将调用.prepend()从创建的 jQuery 对象elem

于 2013-03-18T15:04:25.243 回答
3

这可能会有所帮助..

var test = document.getElementById('test') //returns a HTML DOM Object
var test = $('#test') //returns a jQuery Object
var test = $('#test')[0] //returns a HTML DOM Object
于 2013-03-18T15:41:13.317 回答
1

上例中的“elem”可以是任何标签(h1、p、body、标签组合、对 id 或类的特定引用),就像 CSS 一样。然后“前置”是对该元素执行的操作。在这种情况下,前置操作采用一个参数,这是另一个元素,它将作为页面上与您选择的“elem”匹配的每个元素的第一个子元素动态放置到 html 中

于 2013-03-18T15:05:23.847 回答
1

jQuery 创建一个“包装”元素 - 一个 jQuery 对象,所以也许这会给你一些见解:

$('li').each(function (index, elem) {
    alert(elem === this); // true
    alert($(this) === $(elem)); // false
    alert(elem.tagName + $(elem).tagName); // LI undefined
    alert(typeof elem + typeof $(this));// object object
    alert(elem.tagName ===  $(this).prop('tagName')); // true
});

请注意,第二个警报 = false,因此即使它们“引用”相同的元素,$(this) 和 $(elem) 也不是同一个包装对象。请注意,“原始”元素具有 .tagName 而 jQuery 包装对象没有。

所以为了你

$(elem).prepend('<b>' + index + ':</b>');

jquery 采用包装的 elem ( $(elem)),然后在新包装的 'b' 元素前添加索引和“:”字符作为其内容文本

编辑:在另一个示例中将 tagName 的属性示例添加到 jQuery 对象并添加了前置说明。

于 2013-03-18T15:20:24.970 回答
0

Prototype不同,jQuery 不扩展原生对象。这就是为什么你必须使用$函数来获得一个 jQuery 包装的。

于 2013-03-18T15:04:08.077 回答