В чем разница между получением DOM через id и классом

Question

У меня вопрос при использовании jQuery (1.8.3), получающего DOM.

$(function() { 
 
    //method 1 
 
    var $y = $('.u')['0'], 
 
    $n = $('.u')['1']; 
 
    $y.click(function(e) { 
 
    alert('hello y'); 
 
    }); 
 
    $n.click(function(e) { 
 
    alert('hello n'); 
 
    }); 
 

 
    //method 2 
 
    var $yid = $('#y'), 
 
    $nid = $('#n'); 
 
    $yid.click(function(e) { 
 
    alert('hello yid'); 
 
    }); 
 
    $nid.click(function(e) { 
 
    alert('hello nid'); 
 
    }); 
 
});

<!-- method 1 --> 
 
<button class="u">yes</button> 
 
<button class="u">no</button> 
 
<br> 
 
<!-- method 2 --> 
 
<button id="y">yesid</button> 
 
<button id="n">noid</button>

code in jsfiddle

Я не знаю, почему я не могу использовать «метод 1», чтобы сделать щелчок событие работает, я думаю, что это что-то фундаментальное, что я не хватает , может кто-нибудь дать мне советы?

Answer 1

$('.u')[0] возвращает dom объект не объект jQuery. click() обработчик работает только с объектом jQuery, поэтому используйте eq(), чтобы получить объект jQuery.

var $y = $('.u').eq(0), 
    $n = $('.u').eq(1); 

FIDDLE

Answer 2

При использовании .u для выбора вы получите объект массив DOM. В соответствии с вашим кодом, чтобы сделать его как объект JQuery вы должны снова выбрать его как

$($('.u')['0']) 
$($('.u')['1']) 

Fiddle Demo

Answer 3

Выбор что-то по class возвращает другой тип пункта, чем выбрать что-то по id.

Представьте себе, что что-то выбрать class возвращает поле (массив), содержащее все с этим классом. Тогда представьте, что выбор чего-то id просто возвращает элемент с этим id.

Если вы выберете что-то по классу, вы все равно получите коробку (массив) для «всех ваших домов этого класса», даже если в классе есть только 1 элемент dom.

Использование функции .eq() в jquery может дать вам первый или n-ый элемент класса.

дал HTML

<div class="myDiv" id="myId"></div> 

В JQuery скрипт

$(".myClass").eq(0) 

выбирает то же самое, как

$("#myId")