JQuery
biblioteca JavaScript
Una colección específica encapsulada (métodos y funciones). En esta biblioteca, se encapsulan muchas funciones bien definidas, que admiten operaciones regulares y extensiones de js
JQuery
Es una biblioteca js rápida y breve diseñada con el propósito de "escribir menos, hacer más"
Aprende la esencia de jquery: aprende a llamar a estas funciones (métodos)
Uso de jQuery
-
importar archivo jq
-
Utilice la etiqueta de secuencia de comandos a continuación
<script src="./jquery-3.6.0.js"></script>
<script>
var box1 = document.querySelector(".box1")
console.log(box1);
var caja1Jq = $('.caja1')
consola.log(caja1Jq);
</script>
Función de entrada de JQuery
-
Espere a que se cargue el documento (no es necesario cargar la imagen) y ejecute el código
$(documento).ready(función () { console.log(1, $(".box1")); }) -
Espere a que se cargue el documento (no es necesario cargar la imagen), ejecute el código, que es la abreviatura del anterior
$(función () { consola.log(2, $(".box1")); }) -
Espere a que se cargue el documento (la imagen debe cargarse) y ejecute el código
$(ventana).on("cargar", función () { consola.log(3, $(".box1")); }) $(ventana).on("cargar", función () { consola.log (33, $(".caja1")); }) -
Método de escritura nativo (la imagen debe cargarse)
window.onload = function () { console.log(4, $(".box1")); } // La forma original de escribir es sobreescribir window.onload = function () { console.log(44, $ ( ".caja1")); }
Objeto de nivel superior de JQuery $
$ es otro nombre para jQuery, puede usar jQuery en su lugar, pero por conveniencia, generalmente use $ directamente
API común de JQuery
Selectores para jQuery
Hay muchas formas de obtener DOM en js nativo, pero hay algunos problemas de compatibilidad, por lo que jq encapsula el método de selección, de modo que tenemos un estándar unificado para obtener elementos
$(selector) devuelve un objeto Jq, que es una matriz, no una matriz dom. Para usar el método jq, debe usar el objeto jq para llamar
<div class="box1"></div>
<div id="box1">
<div class="box2"></div>
</div>
<script>
// Ya sea id o clase, todo devuelve Es una matriz de objetos jq
// El uso de selectores es el mismo que el de los selectores CSS
console.log($(".box1"));
console.log($("#box1"));
console.log($ ( "div"));
consola.log($(".box2"));
consola.log($("#box1 .box2"));
</script>
iteración implícita
El proceso de atravesar los elementos DOM internos se llama iteración implícita.
jq recorrerá automáticamente los elementos coincidentes y ejecutará el método correspondiente. No necesitamos escribir la operación de recorrido del bucle nosotros mismos para simplificar el código.
// Agregar eventos de clic para cinco lis
// Escritura original
var lis = document.querySelectorAll("li")
for (var i = 0; i < lis.length; i++) {
lis[i].style.color = 'red '
}
// Cómo escribir jq
var liss = $('li')
liss.css("color", "blue")
Obtener el elemento con el subíndice especificado
// Obtenga el elemento con el subíndice especificado, use el método eq para obtener el elemento con el subíndice correspondiente
console.log(liss.eq(i));
liss.eq(i).css("color", colors[i ])
Obtener el subíndice del elemento actual
liss.click(function () {
// console.log(this);
// use $ para convertir esto en un objeto jq
console.log($(this).index());
})
pensamiento exclusivo
El elemento actual establece el estilo y otros elementos hermanos borran el estilo
hermanos (): devuelve el elemento hermano del elemento secundario seleccionado
lis.click(function () {
// console.log(this);
// lis.css("color", 'black')
// Establece el color de fuente del elemento actual en rojo
$(this).css ( "color", "red")
// Obtenga los elementos hermanos del elemento actual,
// Puede pasar un selector, lo que significa que solo busque elementos que sean elementos hermanos y cumplan con las reglas del selector
console.log($(this ).hermanos ('.elemento'));
$(esto).hermanos('.elemento').css("color", "negro") }
)
programación en cadena
Los objetos JQ siempre pueden llamar a funciones jq, y todos los códigos se pueden escribir en una línea
lis.click(función () {
$(esto).css("color", "rojo").siblings('.elemento').css("color", "negro") }
)
manipulación de estilo
-
$(selector).css(propiedad): obtener el valor de la propiedad
console.log($('.box1').css("color-de-fondo")); -
$(selector).css(propiedad, valor): establece el valor de la propiedad
$('.box1').css("color de fondo", 'azul') -
Si hay muchas propiedades para configurar, puede usar objetos para configurarlas
// Establecer el valor de la propiedad $('.box1').css({ ancho: '200px', alto: "200px", color: 'blanco', // Cuando el parámetro es un objeto, usa la denominación joroba método fontSize: '50px', // o use la cadena keb-base 'background-color': 'blue' }) -
El nombre de clase del elemento de control, establezca el nombre de clase
-
Añadir clase: $(selector).addClass("nombre de clase")
$('.add').click(función () { $('.box1').addClass("box4") }) -
Eliminar clase: $(selector).removeClass("nombre de clase")
$('.del').click(función () { $('.box2').removeClass("box2") }) -
Alternar clase: $(selector).toggleClass("nombre de clase")
$('.alternar').clic(función () { $('.box3').toggleClass("box4") })
-
animación
mostrar ocultar
mostrar (velocidad, devolución de llamada)
velocidad: especifica la velocidad de la animación, el valor puede ser lento, rápido o el número de milisegundos
devolución de llamada: función de devolución de llamada, una función que se ejecutará después de que finalice la animación
mostrar ocultar alternar
$('.btn1').click(function () {
$('.container').show(1000, function () {
console.log("La animación ha terminado");
})
})
$('.
btn2
' )
_
_
_ Ended");
}) }
)
$('.btn3').click(function () {
$('.container').toggle(1000, function () {
console.log("La animación ha terminado");
})
})
deslizar
deslizar hacia abajo deslizar hacia arriba deslizar alternar
$('.btn1').click(function () {
$('.container').slideDown(1000, function () {
console.log("La animación ha terminado");
})
})
$('. btn2 ').click(function () {
$('.container').slideUp(1000, function () {
console.log("La animación ha terminado");
}) }
)
$('.btn3'). click( function () {
$('.container').slideToggle(1000, function () {
console.log("La animación ha terminado");
})
})
desvanecerse y desvanecerse
fadeIn fadeOut fadeToggle
fadeTo (velocidad, opacidad, devolución de llamada)
opacidad: cambia la transparencia al valor especificado
$('.btn1').click(function () {
$('.container').fadeIn(1000, function () {
console.log("La animación ha terminado");
})
})
$('. btn2 ').click(function () {
$('.container').fadeOut(1000, function () {
console.log("La animación ha terminado");
}) }
)
$('.btn3'). click( function () {
$('.container').fadeToggle(1000, function () {
console.log("La animación ha terminado"); }
)
})
$('.btn4').click(function ( ) {
$ ('.contenedor').fadeTo(1000, 0.5,function () {
console.log("La animación ha terminado");
})
})
animación personalizada
animar (parámetros, velocidad, devolución de llamada)
params: el atributo de estilo en el momento de la terminación
velocidad: velocidad, igual que arriba
devolución de llamada: función de devolución de llamada, igual que arriba
$('.btn1').click(función () {
$('.container').animate({
ancho: '200px',
alto: '200px',
backgroundColor: '#00f',
fontSize: '80px'
color:'blanco'
}, 1000, function () {
console.log("La animación ha terminado");
})
})
detener la animación
detener la animación en curso
$('.btn2').clic(función () {
$('.container').stop()
})
manipulación de atributos
1. Atributos inherentes
prop("nombre de la propiedad") obtiene el valor de la propiedad
prop("nombre de la propiedad", "valor de la propiedad") establecer el valor de la propiedad
Los atributos del propio elemento.
1. Si el elemento tiene un atributo correspondiente, devolver el valor del atributo especificado
2. Si el elemento no tiene un valor de atributo correspondiente, devuelve una cadena vacía, y si el atributo no viene con el elemento, devuelve indefinido
$("img").prop("fuente", imgUrl)
2. Atributos personalizados
attr("nombre de atributo") Obtener valor de atributo personalizado
attr("nombre de atributo","valor de atributo") Establecer valor de atributo personalizado
1. Si el elemento tiene un atributo correspondiente, devolver el valor del atributo especificado
2. Si el elemento no tiene un valor de atributo correspondiente, devolver indefinido
$("img").attr("origen", imgUrl)
3. Caché de datos
datos, puede acceder a los datos en el elemento especificado sin cambiar la estructura dom, y los datos almacenados desaparecerán cuando se actualice la página
data("nombre de la propiedad") para obtener el valor de la propiedad personalizada
data("nombre de la propiedad", "valor de la propiedad") establece el valor de la propiedad personalizada
<!-- Para escribir datos en la etiqueta, debe usar el valor del atributo de datos -->
console.log($("img").data("src"));
$("img").data ("src", imgUrl)
console.log($("img").data("title"));
console.log($("img").data("href"));
la diferencia
prop y attr solo pueden almacenar cadenas, los datos pueden almacenar cualquier tipo
prop>attr prop>data La eficiencia de data y attr no es necesariamente
texto de contenido
html() Obtiene o establece el contenido del elemento equivalente a innerHTML
text() Obtiene o establece el contenido de texto del elemento equivalente a texto interior
val() Obtiene o establece el valor del elemento de formulario equivalente a valor
console.log($('.box1').text());
console.log($('.box1').html());
$('.box1').text("<button>Esto es Un botón</button>")
$('.box1').html("<button>Este es un botón</button>")
console.log($('input').val());
$( 'entrada').val("valor modificado")
operación transversal
La iteración implícita de jq hará la misma operación en el mismo tipo de elementos.Si desea realizar diferentes operaciones en diferentes elementos, debe usar transversal
atravesar elementos DOM
jqDom.each(función (índice,domEl) {})
índice: número de índice
domEl: objeto de elemento DOM, no un objeto jq, para usar el método jq, primero debe convertirlo en un objeto jq
// Solo se puede reproducir en bucle la matriz dom de jq
$("li").each(function (index, domEl) {
console.log(index, domEl);
// domEl.style.color = colors[index]
$(domEl) . css('color', colores[índice])
})
iterar sobre todos los objetos
ps each(obj,función(índice,elemento) {})
obj: el objeto a recorrer, cualquier objeto está bien, se utiliza principalmente para el procesamiento de datos
índice: número de índice
ítem: el elemento a recorrer
// puede atravesar cualquier objeto
$.each($('li'), function (índice, elemento) {
console.log(índice, elemento);
})
manipulación de elementos
1. Crear elementos
var li = $(`<li>4</li>`)
2. Agregar elementos
-
interno
append(el) // agrega al final del elemento interno
anteponer (el) // agregar al frente del elemento interno
-
externo
before(el) // agregado antes del exterior del elemento
after(el) // agregar después del exterior del elemento
$('ul').append(li)
$('ul').prepend(li)
$('ul').after(li)
$('ul').before(li)
// operar igual en el mismo elemento de tiempo, el resultado final será la última operación llamada
3. Eliminar elementos
remove() elimina los elementos coincidentes, incluido él mismo
vacío () elimina los elementos secundarios del elemento coincidente, sin incluirse a sí mismo
el caso html('') coincide con el contenido del elemento
operación de tamaño, operación de ubicación
1. Tamaño
console.log($(".box1").width()); // Obtenga el ancho del elemento coincidente, solo calcule el ancho
console.log($(".box1").height());// Obtenga la altura del elemento coincidente, solo calcule la altura
console.log($(".box1").innerWidth());// Obtenga el ancho del elemento coincidente, incluido el relleno
console.log($(".box1"). innerHeight()); // Obtiene la altura del elemento coincidente, incluido el relleno
console.log($(".box1").outerWidth());// Obtiene el ancho del elemento coincidente, incluido el relleno, border
console. log($(".box1") .outerHeight());// Obtener la altura del elemento coincidente, incluido el relleno, borde
console.log($(".box1").outerWidth(true));// Obtener el ancho del elemento coincidente, incluido el relleno, el borde y el margen
console.log($(".box1").outerHeight(true));// Obtener el alto del elemento coincidente, incluido el relleno, el borde y el margen
2. Ubicación
-
compensar
Se utiliza para establecer o restablecer el desplazamiento del elemento seleccionado en relación con el documento, no tiene nada que ver con el padre
// Puede obtener directamente dos propiedades: la distancia de la parte superior e izquierda en relación con la parte superior e izquierda del documento console.log($(".box1").offset()); // También puede establecer la posición $ (".box1" ).offset({ izquierda: 0, arriba: 60, }); -
posición
Se utiliza para devolver la posición de todo el elemento en relación con el elemento principal (el elemento principal debe tener un atributo de posición). Si no hay una posición, busque en el nivel superior hasta el cuerpo, y el margen se contará en la posición juntos Solo se puede obtener y no se puede configurar.
// Se pueden obtener dos atributos directamente: la distancia entre la parte superior e izquierda relativa a la parte superior e izquierda del elemento principal console.log($(".box1").position());
3. Evento de desplazamiento
$(documento).scroll(function () {
// scrollTop()/scrollLeft se usa para obtener la longitud de desplazamiento
si ($(documento).scrollTop() > 400) {
$(".top").fadeIn(1000 );
} else {
$(".top").fadeOut(1000);
}
});
$(".top").click(function () {
// Establecer la altura de desplazamiento en 0 para lograr el efecto de regresar arriba
$(documento).scrollTop(0);
});
evento
1. Registro de evento único
el.tipo de evento(función(){
// controlador de eventos
})
-
El evento de desplazamiento imita un mouseover
$(".box1").hover( función () { $(".box1").css({ ancho: "200px", altura: 200, }); }, función () { $(".box1" ).css({ ancho: "100px", alto: 100, }); } );
2. Procesamiento de eventos en eventos vinculantes
el.on('events',fn)
// eventos de uno o más tipos de eventos separados por espacios
// función a ejecutar por fn
ventaja
-
Se pueden enlazar múltiples funciones
// Vincular funciones múltiples, si varios eventos son la misma operación // se pueden escribir juntos $(".box1").on("mouseenter mouseleave click", function () { console.log(1 ); }); / / Vincular funciones múltiples, si varios eventos realizan operaciones diferentes // Usar el formulario de objeto $(".box1").on({ click: function () { console.log(1 ); }, mouseenter: function () { console .log(2); }, mouseleave: función () { consola.log(3); }, }); -
Vincular dinámicamente eventos a elementos secundarios
// Delegar eventos a elementos principales // Puede vincular eventos a elementos generados dinámicamente $("ul").on("click", "li", function () { console.log(this); });
Desactivar evento de desvincular
// Liberar vinculación de eventos
// Liberar todos los eventos
$("button").off();
// Liberar un solo evento
$("button").off("click"); hay un evento
El único evento se activa solo una vez
$("botón").one("clic", función () {
enviarMsg();
});
Activar eventos automáticamente
$("botón").clic();
objeto controlador de eventos de jq
// Evento de burbuja
// Al hacer clic en un elemento secundario, si hay el mismo tipo de evento en el elemento principal, el elemento principal también se activará
$(".box1").click(function (e) {
console.log ("box1" );
});
$(".box2").click(function (e) {
e.stopPropagation();
console.log("box2");
});
// evento predeterminado
$("a ").Haga clic en (función (e) {
e. preventDefault();
consola. log("a");
});