Как получить элемент DOM из селектора JQuery

У меня невероятно трудно найти фактический элемент DOME из селектора jquery. Образец кода:

<input type="checkbox" id="bob" />
  var checkbox = $("#bob").click(function() { //some code  } )

и в другой части кода я пытаюсь определить проверенное значение флажка.

  if ( checkbox.eq(0).SomeMethodToGetARealDomElement().checked )
    //do something.

И, пожалуйста, я не хочу делать

  if ( checkbox.eq(0).is(":checked"))
    //do something

Это заставляет меня обойтись без флажка, но иногда мне нужен настоящий элемент DOME.

Вы можете получить доступ к необработанному элементу DOM с помощью:

$("table").get(0);

или проще:

$("table")[0];

Однако на самом деле вам не так много нужно (по моему опыту). Возьмите пример с вашим флажком:

$(":checkbox").click(function() {
  if ($(this).is(":checked")) {
    // do stuff
  }
});

является более "jquery'ish" и (imho) более кратким. Что, если вы хотите их нумеровать?

$(":checkbox").each(function(i, elem) {
  $(elem).data("index", i);
});
$(":checkbox").click(function() {
  if ($(this).is(":checked") && $(this).data("index") == 0) {
    // do stuff
  }
});

Некоторые из этих функций также помогают маскировать различия в браузерах. Некоторые атрибуты могут быть разными. Классический пример - AJAX звонки. Чтобы сделать это правильно в сыром Javascript есть около 7 вариантов для XmlHttpRequest.

Изменить: кажется, я был неправ, предполагая, что вы не можете получить элемент. Как и другие опубликовали здесь, вы можете получить его с:

$('#element').get(0);

Я убедился, что это на самом деле возвращает элемент DOM, который был сопоставлен.

Мне нужно было получить элемент в виде строки.

jQuery("#bob").get(0).outerHTML;

Что даст вам что-то вроде:

<input type="text" id="bob" value="hello world" />

... как строка, а не как элемент DOM.

Если вам нужно напрямую взаимодействовать с элементом DOM, почему бы просто не использовать document.getElementById , если вы пытаетесь взаимодействовать с конкретным элементом, вы, вероятно, будете знать идентификатор, поскольку предполагается, что имя класса находится только в одном элементе, или какая-то другая опция имеет тенденцию к быть рискованным

Но я склонен согласиться с другими, что в большинстве случаев вы должны научиться делать то, что вам нужно, используя то, что дает вам jQuery, поскольку он очень гибкий.

ОБНОВЛЕНИЕ: на основе комментария: вот сообщение с хорошим объяснением: http://www.mail-archive.com/jquery-en@googlegroups.com/msg04461.html

$(this).attr("checked") ? $(this).val() : 0

Это вернет значение, если оно проверено, или 0, если это не так.

$(this).val() просто входит в DOM и получает атрибут «значение» элемента, независимо от того, проверен он или нет.