7.JQuery (1)

jq es una biblioteca JS, adquisición de objetos y definición de objetos (aquí está la categoría de toda la biblioteca no es el objeto del tipo de datos en JS,) el
objeto DOM es el objeto que obtenemos por el método tradicional (javascript), el objeto jQuery es el Biblioteca de clases jQuery El objeto obtenido por el selector.
El objeto JQuery es el objeto producido al envolver el objeto DOM a través de jQuery.
La ventaja de JQ es que necesita escribir una gran cantidad de código simplemente con código JS, y solo usar una oración con JQ, como el $error de análisis de KaTeX: Expected'EOF ', got' # 'at position 2: (# ̲id 名) puede usar la operación de identificación, No ...$ (function () { $Error de análisis de KaTeX: Se esperaba 'EOF', obtuvo '#' en la posición 3: ("# ̲btn2") (enlazar eventos al botón) ...$ (" #username "). val () (Obtiene el valor del cuadro de entrada) alert (in) })}) Uso de JQ 1. Función JQ (todos los $ corchetes se convertirán en objetos JQ) 1. Usar como función general .Después de cargar el archivo, ejecute esta devolución de llamada Función

$（ F u n c t i o n （）） J q u e r y （ f u n c t i o n （）) Ley del lenguaje de Liang Zhong Dou Ke Yi, la tabla muestra$ y las palabras clave de jquery, como $ === jquery (congruente)
$: 1, se pueden usar como usos de funciones, entre corchetes para llamar a
2 también se pueden usar como objetos para usar, Use $. Para llamar a la función interna
2. Cuando el parámetro es la cadena de selección, se puede usar para encontrar todas las etiquetas coincidentes y encapsularlas como objetos JQ, y luego puede agregar otros métodos para usar
$ ("# btn (ID name Selector) "). click (function () {console.log (this.innerHTML (como la etiqueta del selector de parámetros en sí, más innerHTML para obtener su contenido de texto))))
(El método click aquí no es onclick, sino click)
3. El parámetro es el objeto dom (el objeto seleccionado en la página web), y un objeto dom se convertirá en un objeto JQ.
$Error de análisis de KaTeX: Se esperaba 'EOF', obtuvo '#' en la posición 3: ("# ̲Btn "). Click (fun ...$ (this) .html ())})
4. El parámetro es la cadena completa de etiquetas html, cree un objeto de etiqueta y encapsúlelo como un objeto JQ.
Caso 1. Haga clic en el botón para mostrar el texto del botón y mostrarlo en un nuevo cuadro de entrada
Características: El código interno debe ejecutarse después de cargar todos los documentos
(tenga en cuenta que las comillas dobles de la etiqueta serán $(" ") En una doble ventaja número punzón proyectar, la orden cuando el H T m L escala pestaña de la palabra carácter cadena es un doble citado número de tiempos de espera,$ entre comillas comillas simples, y viceversa comillas dobles)
$ (function () {
$ ("# btn"). click (function () { $ ("<input type =" "... id =" mg ".") .appendTo (método para volver al cuadro) ("div"); $Error de análisis de KaTeX: Se esperaba 'EOF', se obtuvo '#' en la posición 3: ("# ̲mg" (el objeto se asigna aquí v ...$ (esto) .html ())(simplemente pase los parámetros correspondientes. Copie el valor);})})Caso 2. Recorra todos los elementos de la matriz de salida

var arr = [1, 55, 7] Primero cree una matriz
$. e a c h （ a r r ， f u n c t i o n （ i, n-) (parámetro de forma primero a th es el valor del índice citado, primero dicarboxílico th es el valor de los cebadores de índice para ser el número de datos)) A L E R & lt T (I + ” ： “ + n-)) Caso Ejemplo 3, estadísticas recuento de un total de hay múltiples pequeña una prensa botón (paquete incluyendo no han de escritura seleccionado del selección dispositivo nombre de la) lateral de fórmula como C O n- S O L E . L O G ($ ("Botón"). Length (el método para verificar el número de paquetes)) aquí hay una forma simple de escribir la etiqueta del botón.
Si el nombre del selector no está escrito, se debe recuperar el contenido de texto del segundo botón.
el método es var btn = $ ("botón");
consola. log (btn [1]) Aquí puede usar la función de lista de la matriz para usar el valor del índice para obtener
Aquí, el elemento obtenido a través del subíndice de btn [1] es un objeto dom, por lo que para obtener su contenido de texto, innerHTML
console.log (btn [1] .innerHTML) también se puede usar para btn [1]. Btn.get (1) En cambio, todos son objetos dom

Caso 4, muestra el texto de todos los botones
(aquí no se llama a cada uno a través del objeto JQ, aquí se llama a través de la colección de elementos del objeto JQ, por lo que no es necesario pasar el primer parámetro,
$ no tiene parámetro, btn representa el parámetro, por lo que el primer parámetro No es necesario escribir, simplemente escriba la función de devolución de llamada directamente)
btn.each (función (índice, elemento (no escribir i, n, normativo y regular)) { consola.log (índice + "
"+ Element.innerHTML +"= ")
Simplemente use thisconsole.log (this.innerHTML) para obtenerlo por completo, (esto juega un papel de devolución de llamada, que es más conveniente que iyn, y puede obtener la información del objeto por completo)
})

Caso 5. El tercer botón a generar es el primer
console.log ($ ("# btn"). Index ()) en el método index () para conocer el valor
del índice.Solo se puede obtener el subíndice del elemento hermano.

2. Objeto JQ (objeto devuelto al ejecutar $ ())

$Error de análisis de KaTeX: Se esperaba 'EOF', se obtuvo '#' en la posición 3: ("# ̲btn") La selección llamada en el objeto JQ ...$ () y el selector se pasa como un parámetro para tener un efecto, tal as $ ("# btn")
Encuentra todas las matrices de etiquetas coincidentes en toda la página de acuerdo con las reglas del selector y encapsúlalas en objetos JQ (inventario JS) para devolver

Caso 1. Seleccione el elemento cuya identificación es box y establezca el color (los objetos JQ pueden manipular css directamente, cuando se usa el método)
$ ("# box"). Css ("background", "red" o {"background ":" red ”}) (Se usa en el medio de escribir un atributo, separado por llaves cuando se escriben varios atributos)
$(" D I V, S P A n- ") en el plano también puede ser en la escritura multiplexar juntos seleccionado selección dispositivo, se proporciona opuesta que tiene filas el contenido y el cartucho de sub también puede utilizar transversal colector seleccionado de la selección unit$ ("div # box") y Coincidencia completa $ ("*")

Caso 2,
1. Seleccione todos los tramos en la lista desordenada ul. El
selector del objeto JQ puede usar el selector descendente, etc.
$ ("ul span (separados por espacios)"). Css ("background", "red")
2. Seleccione todos los elementos secundarios span
$ ("ul> span"). Css ("background", "red") debajo de ul. Aquí están los elementos secundarios de ul, separados por>, excluyendo a los nietos
3. Seleccione el siguiente li
$ (".sku + li"). css ("background", "red") (+ next)
bajo class = sku 4. Seleccione todos los elementos hermanos detrás de class = sku bajo ul
$ ("ul .sku _{") .css ("fondo", "rojo") (} todos los elementos hermanos detrás)

Caso 3. Selector de filtro
1. Seleccione el primer div
$ ("div: frist"). Css ("background", "red")
2. Seleccione el último div
$ ("div: last"). Css ("Background" , "rojo")
3. Seleccione el atributo de clase no es caja
$ ("div: no (.box)"). css ("fondo", "rojo")
4. Seleccione la segunda y tercera etiquetas
$ ("li: lt (3): gt (0) "). css (" background "," red ")
Aquí primero debes realizar la búsqueda desde atrás y luego buscar desde el frente, porque la búsqueda se hace desde el frente y luego el la búsqueda se ejecuta desde atrás. Reutilizará los encontrados como objetos de referencia
5. Seleccione el segundo li
$ ("li: eq (1)"). css ("background", "red")
$ ("li" ) .eq (1) .Css ("background", "red") también se puede utilizar de esta manera, el formato también es la definición del método del objeto
eq es el método para encontrar el valor correspondiente del índice
6. El el contenido seleccionado es li
$ ("li: contiene (py college))"). Css ("background", "red")
7. Seleccione li
$ ("li [class = sku]"). css ("background", "rojo") con un atributo de clase de sku

Eventos vinculantes de JQ
Caso 1. Configure el evento de movimiento del mouse para el menú de primer nivel, y el menú de segundo nivel muestra
$ (". Wrap> ul> li"). Mouseover (function () { $ (this) ( obtenga el objeto li primero, consígalo aquí El li es un objeto dom) .children ("ul"). css (" display", "block" (aquí hay atributos y valores de atributo, separados por comas, requeridos por las reglas de JQ) ) la pantalla se cambia para mostrar por conveniencia, puede cambiar el elemento css a .show (), lo que puede ahorrar muchos problemas. Mostrar es la función de visualización. En esencia, cambie el valor del atributo de visualización a bloquear (la visualización predeterminada es ninguno ) }) Establezca el evento mouse out para el menú de primer nivel y oculte el menú de segundo nivel. $ (". Wrap> ul> li"). Mouseout (function () { $ (this) .children ("ul ") .hide () (hide es una función oculta y puede omitir la configuración de none para mostrar) })

Cuando el objeto dom adquirido es una etiqueta (porque la etiqueta a está especificada, cuando el mouse se mueve fuera del menú de primer nivel de la etiqueta a, incluso se mueve hacia afuera, por lo que el menú de segundo nivel está oculto)
para establecer la evento de movimiento del mouse para el menú de primer nivel, el menú de dos niveles muestra
$ (". wrap> ul> li> a"). mouseover (function () { $ (this) .slblings ("ul"). show ( ) (slblings es un método para encontrar elementos hermanos) }) to El menú del primer nivel establece el evento mouse out, el menú del segundo nivel oculta $ (". wrap> ul> li> a"). mouseout (function () { $ (esto) .slblings ("ul"). hide () })

El mouseover y el mouseout se activan cuando el mouse se mueve dentro o fuera del elemento seleccionado y el elemento secundario (el elemento secundario se volverá a activar cuando el elemento seleccionado o el elemento seleccionado alcance el elemento secundario).
Para resolver todo el problema, deje que el mouse moverse dentro o fuera del elemento seleccionado Cuando se activa para moverse hacia adentro con mouseenter, y moverse hacia afuera con mouseleave

No hay un concepto de matriz en python, por lo que cuando JS usa var en python para obtener el objeto de clase, porque solo el valor de ID es único, la clase no es única, por lo que incluso si
solo hay un valor de clase , la clase extraída solo tiene uno value. También necesita usar el valor del índice para usarlo, porque no es una matriz, siempre que el valor del elemento que no sea id se tome con dom, devolverá un objeto pseudo-matriz

Supongo que te gusta