Descripción general de jQuery
jQuery es una biblioteca javascript liviana, el archivo principal tiene solo decenas de kb y los métodos y funciones en él son básicamente compatibles con los navegadores convencionales actuales. No solo admite eventos, estilos y animaciones, simplifica enormemente las operaciones DOM, permite la programación en cadena y la iteración implícita; también admite el desarrollo de extensiones de complementos, que se pueden desarrollar rápidamente utilizando complementos de terceros.
Concepto de biblioteca JavaScript
La biblioteca javascript se refiere a un archivo JS que encapsula (predefinido) muchas funciones y métodos específicos . Los desarrolladores encapsulan nuestro código js nativo de acuerdo con los requisitos funcionales, como animar, ocultar, mostrar y obtener elementos de animación, y almacenarlo en este archivo. De esta manera, podemos usar estas funciones encapsuladas de manera rápida y eficiente según sea necesario. Las bibliotecas javascript comunes incluyen el prototipo jQuery YUI Dojo zepto, etc. Todas encapsulan javascript nativo y se implementan internamente mediante javascript.
concepto de jQuery
jQuery es una biblioteca de JavaScript rápida y concisa, j significa javascript; y Query significa consulta. Principalmente encapsula la operación DOM en js, y podemos consultar y usar rápidamente las funciones internas. Además, los códigos de función comúnmente utilizados de jQuery encapsulados por javascript incluyen manejo de eventos, diseño de animación e interacción Ajax . La esencia de aprender jQuery es comprender las reglas gramaticales de las funciones y métodos encapsulados.
Uso básico de jQuery
Descargar e importar
Descarga Podemos ir a la web oficial de jquery para descargar la versión que queramos, y también podemos aprender a usarla aquí. Después de descargar la versión comprimida del archivo javascript, impórtelo a la página que queremos usar y luego use jQuery para el desarrollo.
Es posible que no se pueda acceder al sitio web oficial. Descargué el archivo jQuery aquí (descargar)
Función de entrada de jQuery
// 方式一:
$(function () {
... // 页面的DOM加载完成的入口
});
// 方式二:
$(document).ready(function () {
... // 页面的DOM加载完成的入口
});
- En ambos métodos, el código interno se puede ejecutar después de renderizar la estructura DOM (equivalente al evento DOMContentLoaded en js nativo). No es necesario esperar hasta que se carguen todos los recursos externos. JQuery nos ayuda a completar la encapsulación.
- A diferencia del evento de carga en js nativo, el código interno se ejecuta después de que se cargan el documento de página, el archivo js externo, el archivo css y la imagen.
Objeto de nivel superior de jQuery
El signo $ es otro nombre para jQuery. También puede usar jQuery en lugar del signo $ en su código. $ Es el objeto de nivel superior de jQuery, que es equivalente al objeto de ventana en nuestro javascript nativo . Después de usar $ para envolver el elemento en un objeto jQuery, puede llamar a los métodos en jQuery.
Objetos jQuery y objetos DOM
- El objeto de elemento obtenido mediante el uso de la API proporcionada en js nativo es el objeto DOM.
- El objeto elemento obtenido mediante el método jQuery es el objeto jQuery.
- Los objetos jQuery son esencialmente objetos generados al envolver objetos DOM con $, y se almacenan en forma de pseudo-matrices.
Nota especial: solo los objetos jQuery pueden usar los métodos proporcionados por jQuery, y los objetos DOM usan métodos javascript nativos .
Conversión mutua entre el objeto jQuery y el objeto DOM
Native js es más grande que jQuery (jQuery se implementa internamente usando js), y algunos de los atributos y métodos nativos jQuery no están encapsulados para nosotros. Entonces, si usamos algunos objetos jQuery obtenidos por métodos jQuery y queremos usar los atributos y métodos de js nativos, necesitamos convertir los objetos jQuery en objetos DOM antes de que puedan usarse.
// 1、DOM对象转换成为jQuery对象：$(DOM元素对象);
var search = $(".search"); // 类名为search的jQuery对象
var div = document.querySelector('div');
div = $(div); // 将div这个DOM对象转换为jQuery对象
// 2、jQuery对象转换为DOM对象的两种方式
// 因为是以伪数组的形式进行存储所以有
search = $(".search")[0] // 0（index）是索引号
// get 方法
search = $(".search").get(0) // 0（index）是索引号