Cómo obtener un elemento DOM de un selector de JQuery

Me está costando mucho trabajo encontrar el DOMElement real de un selector de jquery. Código de muestra:

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

y en otro código estoy tratando de determinar el valor marcado de la casilla de verificación.

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

Y por favor, no quiero hacer:

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

Eso me lleva a la casilla de verificación, pero otras veces he necesitado el verdadero DOMElement.

Puede acceder al elemento DOM sin procesar con:

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

o más simplemente:

$("table")[0];

Sin embargo, no hay mucho para lo que necesites esto (en mi experiencia). Tome su ejemplo de casilla de verificación:

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

es más "jquery'ish" y (en mi humilde opinión) más conciso. ¿Y si quisieras numerarlos?

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

Algunas de estas características también ayudan a enmascarar las diferencias en los navegadores. Algunos atributos pueden ser diferentes. El ejemplo clásico son las llamadas AJAX. Hacer esto correctamente en Javascript sin procesar tiene alrededor de 7 casos alternativos para XmlHttpRequest.

Editar: parece que me equivoqué al suponer que no pudo obtener el elemento. Como otros han publicado aquí, puede obtenerlo con:

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

Verifiqué que esto realmente devuelve el elemento DOM que coincidió.

Necesitaba obtener el elemento como una cadena.

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

Lo que te dará algo como:

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

... como una cadena en lugar de un elemento DOM.

Si necesita interactuar directamente con el elemento DOM, ¿por qué no usarlo document.getElementByIdya que, si está tratando de interactuar con un elemento específico, probablemente conocerá la identificación, ya que se supone que el nombre de clase está en un solo elemento u otra opción? ser arriesgado

Pero, tiendo a estar de acuerdo con los demás, en la mayoría de los casos, debe aprender a hacer lo que necesita usando lo que le ofrece jQuery, ya que es muy flexible.

ACTUALIZACIÓN: Basado en un comentario: Aquí hay una publicación con una buena explicación: http://www.mail-archive.com/[email protected]/msg04461.html

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

Esto devolverá el valor si está marcado, o 0 si no lo está.

$(this).val() es solo alcanzar el dom y obtener el atributo "valor" del elemento, esté o no marcado.