jQuery事件与动画

1 jQuery事件

1.1 事件的绑定和解除绑定

on(事件名, fn)   绑定事件
off()           解除事件绑定
one(事件名, fn)  仅仅绑定一次

1.2 代码触发事件动作

trigger(事件名)

1.3 委派

$('.list li').on('click', fn)   非委派,绑定给li
$('.list').on('click','li',fn)  委派,绑定给父元素

1.4 特殊事件

ready()     事件  类似于onload
hover()     事件  mouseenter和mouseleave相结合的事件

1.5 事件列表

同之前的js事件

1.6 事件对象

属性
offsetX, offsetY    鼠标在本元素上的位置
pageX, pageY        鼠标在页面上的位置坐标
clientX, clientY    鼠标在视口上的位置
which               按键的值(ASCII)或鼠标按键的值(1,2,3)
target

方法
stopPropagation()   阻止冒泡
preventDefault()    阻止默认动作

2 jQuery动画

2.1 基本效果

hide([speed],[fn])      隐藏
show([speed],[fn])      显示
toggle([speed],[fn])    切换

盒子大小与不透明度变化

2.2 滑动效果

slideUp([speed],[fn])       隐藏
slideDown([speed],[fn])     显示
slideToggle([speed],[fn])   切换

高度(height y方向的padding)变化

2.3 淡入淡出

fadeOut([speed],[fn])       隐藏
fadeIn([speed],[fn])        显示
fadeToggle([speed],[fn])    切换
fadeTo(speed,opacity,[fn])  不透明度变化到指定大小

只有opacity变化

2.4 自定义动画

animate(对象,speed,[fn])

2.5 动画控制

delay()                     延迟
finish()                    瞬间完成动作
stop()                      停止动画

is(':animated')             判断是非在执行动画 返回boolean

2.6 jQuery插件

经典jQuery插件
下拉框搜索插件
官网 https://select2.org/
github https://github.com/select2/select2

datetimepicker 时间日期插件
github https://github.com/xdan/datetimepicker
文档 https://xdsoft.net/jqplugins/datetimepicker/

fullpage 全屏滚动插件
官网 https://alvarotrigo.com/fullPage/zh/
github https://github.com/alvarotrigo/fullpage.js/

layer 弹窗插件
官网 http://layer.layui.com/?alone
github https://github.com/sentsin/layer/

nice validator 表单验证
官网 https://validator.niceue.com/
github https://github.com/niceue/nice-validator