jquery - resumen de aprendizaje

1. ¿Qué es jQuery?

jQuery es una biblioteca de JavaScript - Ligero "escribe menos, haz más"

Función jQuery:

2.sintaxis de jQuery

(1) Función de entrada: compruebe si la introducción de jq es exitosa

//原型
$(document).ready(function(){
    
    
	...
})
//缩写
$(function(){
    
    
	...
})

La diferencia entre la función de entrada jquery y javascript:

La función de entrada de jQuery se ejecuta después de que se cargan todas las etiquetas html (DOM).
El evento window.onload de JavaScript se ejecuta después de que se haya cargado todo el contenido, incluidos archivos como imágenes externas.

La diferencia entre cargar y listo:

	window.onload	$ (documento) .ready ()
Momento de ejecución	Debe esperar a que la página web se cargue por completo (incluidas las imágenes, etc.) y luego ejecutar el código del paquete	Solo es necesario esperar a que se cargue la estructura DOM en la página web, luego se puede ejecutar el código empaquetado
Número de ejecuciones	Solo se puede ejecutar una vez, si se ejecuta una segunda vez, se sobrescribirá la primera ejecución	Se puede ejecutar varias veces, las ejecuciones posteriores no sobrescribirán la anterior

(2) Formato de sintaxis:

$('selector').action()

'$' significa un objeto global jquery

(3) jQuery define múltiples tipos de selectores:

Tipo de selector	Formato gramatical	sentido
Selector de jerarquía	$ ('_> _')	Selector de elementos secundarios
	$ ('_ Espacio_')	Selector de elemento descendiente
	$ ('_ + _')	Selector de elemento siguiente
	$ ('_ ~ _')	Selector de elementos hermanos
Selector de filtros	$ ('li: primero / último')	Primera / última li
	$ ('li: par / impar')	Li con subíndice par / impar
	$ ('li: gt (5) / lt (4)')	Li con subíndice mayor que 5 / subíndice menor que 4
	$ ('li: eq (4)')	Li con subíndice igual a 4
Selector de filtro de contenido	$ ('div: contiene (' Runob ')')	Elemento div que contiene texto Runbo
	$ ('div: has (selector)')	Contiene elementos que coinciden con el selector
	$ ('tb: vacío')	Elemento vacío que no contiene texto ni elementos secundarios
	$ ('tb: padre')	Elemento vacío que contiene texto o elementos secundarios
Selector de filtro de visibilidad	$ ('li: visible')	Todos los elementos li visibles
Selector de filtro de visibilidad	$ ('li: oculto')	Todos los elementos li invisibles
Selector de filtro de atributos	$ ('div: [id =' 123 ']') / $ ('div: [id! =' 123 ']')	elementos div cuyo valor de atributo id es igual o no igual a 123
	$ ('div: [id ^ =' 123 ']') / $ ('div: [id $ =' 123 ']')	El elemento div cuyo valor de atributo id comienza / termina con 123
	$ ('div: [id * =' 123 ']')	Un elemento div cuyo valor de atributo id contiene 123
Selector de filtro de estado	$ ('entrada: habilitado / deshabilitado / marcado')	Elementos de entrada disponibles / no disponibles / opcionales
Selector de filtro de forma	$ (': entrada')	Coincidir con todos los elementos de entrada (entrada, área de texto, seleccionar, botón)
Selector de filtro de forma	$ (': texto')	Coincidir con todos los cuadros de texto de una sola línea (contraseña / radio / casilla de verificación / enviar / restablecer / botón / archivo)

3.jQuery eventos

Eventos DOM comunes:

Evento del mouse	Eventos de teclado	Evento de formulario	Eventos de documento / ventana
hacer clic	pulsación de tecla	enviar	carga
doble clic	keydown	cambio	cambiar el tamaño
mouseenter (mouseleave)	tecla Arriba	atención	Desplazarse
mousedown (mouseup)		difuminar	descargar
flotar

Sintaxis del método de evento:

//以click事件为例：
$(document).ready(function(){
    
    
	$(' ').click(function(){
    
    
		//click执行事件函数代码
	})
})

4. recorrido de jQuery

根据其相对于其他元素的关系来"查找"（或选取）HTML 元素

Inserte la descripción de la imagen aquí

5.jQuery效果

显示/隐藏
hide() show() toggle()

参数’1000’ ->规定隐藏/显示的速度，可以取slow，fast或毫秒
toggle() 显示被隐藏的元素，隐藏已显示的元素

<!--隐藏-->
$("#hide").click(function(){
  $("p").hide(1000);
});
 <!--显示-->
$("#show").click(function(){
  $("p").show(1000);
});

<!--切换hide()和show()-->
$("button").click(function(){
  $("p").toggle();
});

淡入/淡出

fadeIn() 淡入已隐藏的元素

fadeOut() 淡出可见元素

fadeToggle() 切换fadeIn()和fadeOut()元素
```
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
```
fadeTo() 允许渐变为诶定的不透明度（值介于0和1之间）

滑动

slideDown() 向下滑动元素

slideUp() 向上滑动元素

slideToggle() 切换slideDown()和slideUp()元素

如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。

动画
animate() 方法用于创建自定义动画

语法：$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

下面的例子演示 animate() 方法的简单应用。它把 < div> 元素往右边移动了 250 像素：

$("button").click(function(){
    
    
  $("div").animate({
    
    left:'250px'});
});

停止动画

stop() 方法用于停止动画或效果，在它们完成之前。适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
格式： $(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

6. jQuery agregar // eliminar elementos

Agregar elemento

adjuntar() -Insertar contenido al final del elemento seleccionado
anteponer () -Insertar contenido al principio del elemento seleccionado
después() -Insertar contenido después del elemento seleccionado
antes de() -Insertar contenido antes del elemento seleccionado

La diferencia entre añadir / anteponer y después / antes:
append / antepend está incrustado dentro del elemento seleccionado.

after / before se agrega fuera del elemento.
Eliminar elemento

retirar() -Eliminar el elemento seleccionado (y sus subelementos)
vacío() -Eliminar elementos secundarios del elemento seleccionado

7. jQuery para obtener contenido o atributos

Obtener el contenido

texto() -Establecer o devolver el contenido de texto del elemento seleccionado
html () -Establecer o devolver el contenido del elemento seleccionado (incluido el marcado HTML)
val () -Establecer o devolver el valor de un campo de formulario
Obtener atributos

attr () -Utilizado para obtener el valor del atributo

Introducción a la diferencia entre attr y prop:
para los atributos inherentes del propio elemento HTML, utilice el método prop al procesarlo.
Para nuestros propios atributos DOM personalizados de elementos HTML, usamos el método attr cuando los procesamos.

8. jQuery get / set css atributos

addClass () -Añadir una o más clases al elemento seleccionado
removeClass () -Eliminar una o más clases del elemento seleccionado
toggleClass () -Cambiar la operación de agregar / quitar el elemento seleccionado
css () -Establecer o devolver atributos de estilo