jQuery > $関数の戻り値

by s_hiroshi

HTML

<p id="foo1">abc</p>
<p id="foo2" class="bar">ced</p>
<p id="foo3" class="bar">efg</p>

JavaScript

var elem1 = document.getElementById('foo1');
console.log(elem1); // <p id="foo1">
console.log(elem1.id) // foo1
var elem2 = $('#foo1');
console.log(elem2); // 配列 [p#foo1]
console.log(elem2[0]); // <p id="foo1">
console.log(elem2.id); // undefined
console.log(elem2[0].id); // foo1
var elem3 = $('.bar');
console.log(elem3); // 配列 [p#foo2.bar, p#foo3.bar]
console.log(elem3[0]); // <p id="foo2" class="bar">
console.log(elem3[1]); // <p id="foo3" class="bar">
console.log(elem3[0].id); // foo2
console.log(elem3[1].id); // foo3
// ループのthisは配列elem3の各要素を参照する。
// 1回目 p#foo2.bar
// 2回目 p#foo3.barを指す。
$(elem3).each(function() {
    console.log(this.id); // 1回目 foo2, 2回目 foo3
});