jQuery objeto y elemento DOM

Question

Me gustaría entender la relación entre el objeto jQuery y el elemento DOM ..

Cuando jQuery devuelve un elemento se muestra como [object Object] en una alerta. Cuando getElementByID devuelve un elemento, aparece como [object HTMLDivElement]. ¿Qué significa eso exactamente? Quiero decir, ¿ambos son objetos con una diferencia?

¿Qué métodos pueden operar en el elemento jQuery frente al elemento DOM? ¿Puede un solo objeto jQuery representar múltiples elementos DOM?

Answer 1

me gustaría comprender la relación entre el objeto jQuery y el elemento DOM

Un objeto jQuery es un objeto de matriz similar que contiene elemento (s) DOM. Un objeto jQuery puede contener varios elementos DOM dependiendo del selector que use.

¿Qué métodos pueden operar en el elemento jQuery frente al elemento DOM? ¿Puede un solo objeto jQuery representar múltiples elementos DOM?

jQuery funciones (la lista completa está en el sitio web) funcionan en objetos jQuery y no en elementos DOM. Se puede acceder a los elementos DOM dentro de una función jQuery usando .get() o acceder al elemento en el índice deseado directamente:

$("selector")[0] // Accesses the first DOM element in this jQuery object 
$("selector").get(0) // Equivalent to the code above 
$("selector").get() // Retrieve a true array of DOM elements matched by this selector 

En otras palabras, el siguiente debe conseguir que el mismo resultado:

<div id="foo"></div> 

alert($("#foo")[0]); 
alert($("#foo").get(0)); 
alert(document.getElementById("foo")); 

Para más información sobre el objeto jQuery, see the documentation. También echa un vistazo a la documentación de .get()

Answer 2

Eso es solo su navegador siendo inteligente. Ambos son objetos, pero los elementos DOME son objetos especiales. jQuery solo envuelve DOMElements en un objeto Javascript.

Si desea obtener más información de depuración, le recomiendo que consulte herramientas de depuración como Firebug para Firefox y el inspector incorporado de Chrome (muy similar a Firebug).

Answer 3

miembro más jQuery Functions no tienen un valor de retorno, sino más bien volver la corriente jQuery Object u otra jQuery Object.

---

Así,

console.log("(!!) jquery >> " + $("#id")) ; 

volverá [object Object], es decir, un jQuery Object que mantiene la colección que es el resultado de evaluar el selector de String ("#id") contra la Document,

mientras que,

console.log("(!!) getElementById >> " + document.getElementById("id")) ; 

devolverá [object HTMLDivElement] (o de hecho [object Object] en IE) porque/si el valor de retorno es divElement.

---

también qué métodos pueden funcionar con objeto jQuery vs elemento DOM? (1) ¿Puede un solo objeto jQuery representar múltiples elementos DOM? (2)

(1) hay un anfitrión de miembro Function s en jQuery que pertenecen a DOM Object s. Lo mejor que puede hacer es buscar imo la documentación de la API jQuery para un relevante Function una vez que tenga una tarea específica (como seleccionar Node s o manipularlos).

• jQuery documentation

(2) Sí, una sola jQuery Object puede mantener una lista de múltiples DOM Element s. Existen múltiples Functions (como jQuery.find o jQuery.each) que se basan en este comportamiento automático de almacenamiento en caché.

Answer 4

Cuando se utiliza jQuery para obtener un elemento DOM, los rendimientos objeto jQuery contiene una referencia al elemento. Cuando utiliza una función nativa como getElementById, obtiene la referencia al elemento directamente, no contenida dentro de un objeto jQuery.

Un objeto jQuery es un objeto de matriz-como que puede contener múltiples elementos DOM:

var jQueryCollection = $("div"); //Contains all div elements in DOM 

La línea anterior podría realizarse sin jQuery:

var normalCollection = document.getElementsByTagName("div"); 

De hecho, eso es exactamente lo jQuery lo hará internamente cuando pase en un selector simple como div. Se puede acceder a los elementos reales dentro de una colección de jQuery utilizando el get método:

var div1 = jQueryCollection.get(0); //Gets the first element in the collection 

Cuando se tiene un elemento o conjunto de elementos, dentro de un objeto jQuery, puede utilizar cualquiera de los métodos disponibles en la API jQuery , mientras que cuando tienes el elemento en bruto, solo puedes usar métodos nativos de JavaScript.

Answer 5

apenas he empezado a jugar con jQuery este último mes, y que tenía una pregunta similar dando vueltas en mi mente. Todas las respuestas que ha recibido hasta ahora son válidos y en punto, pero una respuesta muy precisa puede ser la siguiente:

Digamos que usted está en una función, y para referirse al elemento que llama, puede utilizar this, o $(this); ¿Pero, cuál es la diferencia? Resulta que, cuando se utiliza $(this), que está envolviendo this dentro de un objeto jQuery. El beneficio es que una vez que un objeto es un objeto jQuery, puede usar todas las funciones jQuery en él.

Es bastante potente, ya que incluso se puede envolver una representación de cadena de elementos, var s = '<div>hello <a href='#'>world</a></div><span>!</span>', dentro de un objeto jQuery con sólo literalmente, envolviéndolo en $(): $(s). Ahora puedes manipular todos esos elementos con jQuery.