lenguaje de script javascript, utilizado en el navegador para controlar los objetos del documento en la página web e interactuar con el usuario.
jquery es una biblioteca de clases en javascript, que integra las funciones comúnmente utilizadas en javascript, y puede realizar una gran cantidad de funciones en javascript.
1. Importar biblioteca jquery desde la red de entrega de contenido CDN de Baidu
<script src = "https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
2. $ (function () {}) de jquery; el kernel del navegador lo ejecuta inmediatamente después de analizar el objeto dom creado por la etiqueta de la página (más rápido)
Después de usar jquery para obtener el objeto de etiqueta, use el objeto de etiqueta .click (function () {}) para vincular el evento click al objeto de etiqueta obtenido.
Equivalente a en javascript: windows.onload = function () {} de js; después de que el kernel del navegador analiza el objeto dom creado por la etiqueta de la página, continúe esperando el contenido que la etiqueta necesita cargar para mostrar
3. $ representa la función central de jquery
Cuando el parámetro de transmisión es una función --- significa que después de cargar la página, es equivalente a windows.onload = function () {};
Cuando el parámetro de transmisión es una cadena html , se creará el objeto de etiqueta representado por estas cadenas html
Cuando el parámetro de transmisión es una cadena de selección , el objeto del nodo del elemento correspondiente se encontrará de acuerdo con la cadena
Cuando el parámetro de transmisión es un objeto dom , el objeto dom se convierte en un objeto jquery
4. La distinción entre objeto dom y objeto jquery:
Consultados por getElementById (), getElementsByName (), getElementsTagName () y creados por createElement () son todos los objetos dom .
Los objetos creados y consultados a través de la API (interfaz de programación de aplicaciones) proporcionada por jquery y los objetos dom empaquetados por jquery son objetos jquery
5. La esencia del objeto jquery: es una matriz de objetos dom y una serie de funciones funcionales proporcionadas por jquery.
6. Transformación mutua del objeto dom y el objeto jquery :
var $ jquery object = $ (objeto dom)
var dom object = $ jquery object [subíndice]
7. Selector básico
#idselector para buscar objetos de etiqueta por ID
.class selector para buscar objetos de etiqueta por clase
selector de elementos para buscar objetos de etiqueta por nombre de etiqueta
* Selector significa cualquier elemento
selector1, selector2 combinación selector Combine los resultados de selección de los selectores 1 y 2 para volver
8. Selector de nivel:
$ ("ancestro descendiente") Encuentra todos los subelementos de la etiqueta descendiente bajo ancestro
$ ("padre> hijo") Encuentra el elemento hijo directo hijo debajo de padre (el elemento padre nieto no cuenta)
$ ("pre + next") Una etiqueta siguiente inmediatamente después de encontrar un pre selector válido
$ ("pre ~ sibling") encuentra la etiqueta de hermano de su par detrás del selector previo
9. Selector de filtro: https://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
Filtro de contenido:
$ ("div: has (p)"). addClass ("prueba") coincide con las etiquetas div que contienen etiquetas p <div class = "test"> <p> </ p> </ div>
Filtro de visibilidad:
Filtro de atributos:
[atributo ^ = valor] Emparejar atributos de atributo que comienzan con valor
[atributo * = valor] coincide con los atributos de atributo que contienen valor
[attrSel1] [attrSel2] [attrSelN] Filtro de atributo combinado
Filtro de elemento hijo:
Filtro de formulario:
10. Selección de elementos: https://www.w3school.com.cn/jquery/jquery_ref_traversing.asp
11. Operación de la propiedad:
html () establece y obtiene el contenido entre las etiquetas de inicio y fin, que es equivalente al objeto dom. innerHTML ()
val () establece y recupera el valor del elemento de formulario, que es equivalente al objeto dom.value ()
text () Establece y obtiene el texto entre las etiquetas de inicio y fin, que es equivalente al objeto dom. innerText ()
attr () y prop () Al operar los valores de atributo de check, readOnly, selected, disabled, etc., para distinguir la información emergente de los errores generales, use prop () para obtener y establecer el atributo; en otros casos, use attr ()
12.dom agregar, eliminar, cambiar y verificar:
Inserción interna: a.appendTo (b) a se inserta al final de b y se convierte en el último elemento hijo a.prependTo (b) a se inserta al comienzo de b y se convierte en el primer elemento hijo
Inserto externo: a.insertAfter (b) ba a.insertBefore (b) ab
Reemplazar: a.replaceWith (b) b reemplaza a a.replaceAll (b) b reemplaza todo a
Eliminar: a.remove () elimina la etiqueta a a.empty () borra el contenido de la etiqueta a
13. Operaciones de CSS: https://www.w3school.com.cn/jquery/jquery_ref_css.asp
14. animación jquery
Animación básica: show () hide element display hide () display element hide toggle () oculta el elemento visualizado, el método de visualización del elemento oculto anterior puede agregar la duración de la animación (ms) y la función de devolución de llamada de animación (función que se llama automáticamente después de completar la animación) Dos parámetros
Animación de aparición y desaparición gradual: fadeIn () fade-in fadeOut () fade-out fadeTo () cambiará la transparencia al valor especificado dentro del tiempo especificado (0 transparente 0.5 semitransparente) fadeToggle () se desvanece y se desvanece
15. Otros métodos de procesamiento de eventos: https://www.w3school.com.cn/jquery/jquery_ref_events.asp
click (), mouseover (), mouseout (), bing (), one (), unbind (), live ( )
16. Evento burbujeante:
Cuando se desencadena el evento del elemento secundario, el mismo evento también se pasa al evento del elemento primario y se obtiene la misma respuesta.
Agregue returen false al cuerpo de la función de evento para evitar que el evento burbujee.
17. Eventos de objeto:
Se refiere a un objeto js que encapsula la información del evento desencadenante.
Método de adquisición: cuando se vincula un evento a un elemento, la función de evento se escribe como función (evento), donde evento es el objeto de evento de la función de procesamiento de eventos js.