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