1. Reemplazar / clonar:
Clonar: var $ newImg = $ img.clone ()
2. Evento:
Estándar:
1. Enlace ordinario: $ (). On ("nombre del evento", función () {...})
.addEventListener (...);
Desenlazado: $ (). Desactivado ("nombre del evento", objeto de función original)
2. Use burbujas:
$ parent.on ("nombre del evento", "selector de condición de juicio", función () {
this-> e.target
})
2 beneficios:
1. Use automáticamente el "selector de condiciones de juicio" para filtrar los elementos que cumplan las condiciones antes de ingresar a la ejecución de la función; no es necesario escribir si usted mismo juzga
2. Cambie esto-> e.target sin escribir e y e.target
Se proporcionan 21 eventos comunes con taquigrafía: $ (). Nombre del evento (función de controlador)
Después de cargar la página, ejecute:
1. Ejecute solo con anticipación después de cargar el contenido DOM: DOMContentLoaded
Solo espere el contenido DOM: HTML y JS
Ejecutable: enlace de eventos, agregar / eliminar / recorrer / modificar el contenido de los elementos
No se puede ejecutar: obtener / modificar CSS, obtener el tamaño de la imagen
Cómo: $ (document) .ready (function () {...})
$ (). ready (function () {...})
$ (function () {...})
Resumen: Casi todo el código jQuery debe colocarse en $ (function () {...})
2. Después de cargar todo el contenido de la página, ejecútelo solo: window.onload
Espere todo el contenido web: HTML, CSS, JS, imágenes
Todo ejecutable
Cómo: $ (ventana) .load (function () {...})
Resumen: solo el código que depende de CSS e imágenes se coloca en $ (ventana) .load ()
Eventos del mouse:
El problema con el mouseout mouseout:
La entrada y salida frecuente de elementos secundarios también burbujeará para activar eventos del mouse en el elemento primario
jQuery se reemplaza con mouseenter y mouseleave
Ventajas: incluso si la entrada y salida frecuente de elementos secundarios, no se activará para activar eventos del mouse en el elemento primario.
Si vincula mouseenter y mouseleave al mismo tiempo, solo necesita vincular un elemento emergente:
$ (). hover (// mouseenter + mouseleave
función () {...}, // 给 mouseenter
function () {...} // 给 mouseleave
)
Si las dos funciones de procesamiento se fusionan en una función de procesamiento, de hecho, solo escriba una función de procesamiento
Disparo analógico: la función de procesamiento de botones se puede ejecutar sin hacer clic en el botón, sin escribir el código dos veces
$ (btn) .trigger ("事件 名") $ (btn) .trigger ("clic")
De hecho, se puede abreviar como: $ (btn) .click ()
3. Animación:
1. Animación simple: tres efectos de animación fijos de escritura muerta:
1. Mostrar hide: .show () .hide () .toggle ()
Sin parámetros, display: block / none se usa por defecto para controlar la ocultación de la pantalla, el cambio instantáneo y ningún efecto de animación.
Proporcione un parámetro de duración: .show (ms) .hide (ms) .toggle (ms)
2. Deslice hacia arriba y hacia abajo: .slideUp (ms) .slideDown (ms) .slideToggle ()
3. Fundido de entrada y salida: .fadeIn (ms) .fadeOut (ms) .fadeToggle ()
Pregunta 1: El efecto de escribir código muerto con código js no se puede mantener
Pregunta 2: El efecto de animación realizado por js timer no es tan eficiente como la animación css
2. Animación universal: puede implementar efectos de animación en cualquier atributo css
$().animate({
css属性:目标值,
... : ...
},持续ms)
强调: 只支持单个数值的属性
不支持:不是数值的属性
不支持颜色渐变——不如transition
排队和并发:
排队: 多个css属性先后依次变化
并发: 多个css属性同时变化
放在一个animate函数内的多个css属性是并发变化
停止动画: $().stop();
问题: 默认只能停止队列中正在播放的一个动画，后续动画依然会执行
解决: $().stop(true) 停止当前动画并清空队列
选择器: :animated 选择和判断正在播放动画的元素
动画播放后执行:
每个动画API都有最后一个参数——回调函数
回调函数会在动画播放后自动调用执行
总结: 首选CSS: 效率高，可维护
和交互有关的动画，只能用JS定时器/JQUERY
和动态添加/删除DOM元素有关的动画，也必须用JS定时器/jQuery
4. 类数组操作:
2个API:
1. 遍历:
//实例方法
$()->jQuery()->new jQuery()
$().each(function(i,elem){ //forEach(function(elem,i,arr))
//i 获得当前位置
//elem 获得当前元素对象
})
//静态方法
//$->jQuery
$.each(类数组对象/数组,function(i,elem){
})
2. 查找:
$("所有元素").index("要找的元素")
在"所有元素"的jQuery对象中，查找"要找的元素"的位置
如果在同一个父元素下找子元素的位置:
$(要找的子元素).index()
5. 添加自定义API:
其实就是在jQuery的原型对象中添加自定义函数:
jQuery.fn=jQuery.prototype
定义新函数:
jQuery.fn.新函数=function(){
}
调用新函数:
$(...).新函数()