Red de conocimiento informático - Conocimiento sistemático - Comprensión profunda de la diferencia entre los objetos jQuery y los objetos DOM ordinarios

Comprensión profunda de la diferencia entre los objetos jQuery y los objetos DOM ordinarios

1. Objetos JavaScript JavaScript proporciona múltiples objetos integrados, como cadenas, fechas, matrices, etc.

Los objetos son simplemente tipos de datos especiales con propiedades y métodos.

Acceder a las propiedades del objeto:

[javascript]

var message="Hello World!"

var x=; mensaje. longitud;

Crear objeto JavaScript:

[javascript]

persona=nuevo objeto(); "Bill ";

persona.apellido="Puertas";

persona.edad=56; >

Usar constructor de objetos:

[javascript] ver copia simple

función persona(nombre, apellido, edad, color de ojos)

{

this.firstname=nombre;

this.lastname=apellido;

this.age=edad;

this.eyecolor=eyecolor; p >

}

[javascript]

var myFather=new person("Bill", "Gates", 56, "azul"); > var myMother=new person("Steve", "Jobs", 48, "green");

2. Objeto DOM

DOM es en realidad un documento descrito en un objeto. Modelo de manera orientada. El DOM define los objetos necesarios para representar y modificar un documento, los comportamientos y propiedades de estos objetos y las relaciones entre estos objetos.

Según la especificación DOM del W3C, DOM es la interfaz de programación de aplicaciones (API) de HTML y XML.

A través del DOM, puedes acceder a todos los elementos HTML, junto con el texto y los atributos que contienen. El contenido se puede modificar y eliminar, y también se pueden crear nuevos elementos.

HTML DOM es independiente de la plataforma y del lenguaje de programación. Puede ser utilizado por cualquier lenguaje de programación como Java, JavaScript y VBScript.

Los objetos DOM son objetos que obtenemos mediante métodos tradicionales (javascript).

3. Objeto jQuery

El objeto jquery es en realidad una matriz de JavaScript

Este objeto de matriz contiene 125 métodos y 4 propiedades

El cuatro atributos son

número de versión actual de jquery framework jquery

la longitud indica el número de elementos del objeto de matriz

el contexto generalmente apunta al objeto HtmlDocument

el selector pasa el contenido del selector como: #yourId o .yourClass, etc.

Si obtiene el objeto jquery a través del método $("#yourId"),

Y solo hay un elemento con el id yourId en tu página

Entonces $("#yourId")[0] es el elemento HtmlElement

Con document.getElementById("yourId ") Los elementos obtenidos son los mismos

El simple entendimiento es que son objetos creados por jQuery

El objeto jQuery es el objeto generado al envolver el objeto DOM a través de jQuery. El objeto jQuery es exclusivo de jQuery. Puede usar métodos en jQuery, pero no puede usar métodos DOM

4. La diferencia entre objetos DOM y objetos jquery

[javascript]

[javascript]

p>

var domObj = document.getElementById("id"); //objeto DOM

var $obj = $("# id"); //objeto jQuery;

[javascript]

$("#img").attr("src","test.jpg"); //$ ("#img") aquí es para obtener el objeto jQuery;

[javascript]

document.getElementById("img").src="test.jpg"; El document.getElementById("img") aquí es el objeto DOM;

Otro ejemplo: este es el siguiente. A menudo escribo así cuando escribo jQuery:

this.attr(" src", "test.jpg");

Pero algo salió mal. De hecho, este es un objeto DOM y

.attr("src", "test.jpg")

es un método jQuery, por lo que se produjo un error. Para resolver este problema, necesita convertir el objeto DOM en un objeto jQuery, por ejemplo:

$(this).attr("src", "test.jpg");

5. Conversión de objetos DOM y objetos jquery

Conversión de objetos DOM en objetos jQuery:

Para un objeto DOM que ya es un objeto DOM, solo necesita envolver el Objeto DOM con $() para obtener un objeto jQuery.

Método: $(objeto DOM)

[javascript]

var v=document.getElementById(“v”); //objeto DOM

var $v=$(v); //objeto jQuery

Convertir objeto jQuery en objeto DOM:

Dos métodos de conversión convierten un objeto jQuery en un objeto DOM: [index] y .get(index);

(1) El objeto jQuery es un objeto de datos y el objeto DOM correspondiente se puede obtener mediante el método [index].

[javascript]

var $v =$("#v"); //objeto jQuery

var v=$v[0]; /Objeto DOM

alert(v.checked) //Detecta si esta casilla de verificación está seleccionada

(2) jQuery proporciona el DOM correspondiente a través del método del objeto .get(index). .

[javascript]

var $v=$(“#v”); //objeto jQuery

var v=$v.get(0) ; //objeto DOM

alert(v.checked) //Detecta si esta casilla de verificación está seleccionada