jquery动画、事件绑定、事件委托知识点总结

jquery的动画

基本动画 ：

show() 没有参数 等价 css：display：block
可以有三个参数
第一个参数 ：动画执行的时间
第二个参数 ： 动画执行方式 linear swing
第三个参数 ：动画完成后的回调函数
hide() 隐藏 等价 css：display：none
toggle() 切换 显示 / 隐藏

上拉/下拉 ：
slideDown() 通过高度的改变 显示 某个元素
slideUp() 通过高度的改变 隐藏 某个元素
slideToggle() 切换

透明度 ：

fadeIn(1000，function（） { }) 淡入 通过透明度的改变 显示 某个元素
fadeOut() 隐藏
fadeToggle() 切换

fadeTo() 调整某个元素的透明度
第一个参数 ： 时间 （不能省略） 时间为0 也要写出来
第二个参数 ： 透明度值

自定义动画 ：animate

对象.animate( { } , 时间 , 回调函数 )
stop() 停止当前正在运行的动画 其余动画继续执行 （多个相同的元素含有多个同样的事件时 ）
delay() 动画延时
return false 在jq的事件中可以完成阻止事件冒泡
//案例（点击按钮，将盒子顺时针围绕屏幕一圈，各阶段实现不同的动画效果）
1、给booton按钮一个点击事件
2、给盒子自定义动画，第一次动画让盒子的宽度变为200px,透明度变为0.3，让盒子运动到右侧停止，left值等于屏幕宽度减去盒子的宽度，这个过程所有时间为2秒
3、第二次运动，盒子运动到屏幕下方停止运动，top值为屏幕的高度减去盒子的高度所有时间为1秒
4、设置延时，延时2秒回执行接下来运动
5、让盒子运动到左侧，left值为0；
6、让盒子运动到上方，top值为0；

jquery遍历

$().each( function(){

} ) 或
$.each( $() , function(){

} )

jquery中阻止冒泡方式 ：return false

size()方法 length属性 获取jq元素的个数
jquery的offset 和 position
position() 获取具有定位的元素的偏移量 结果是一个对象 有left和top两个属性
offset() 获取相对于文档顶部和左侧的偏移量 结果是一个对象 有left和top两个属性

jquery中的事件处理

事件 ： 原生的去掉on
mouseover和mouseenter的区别 :
前者可以产生冒泡现象 会频繁触发事件处理程序
后者不会产生冒泡行为 不会频繁触发事件处理程序

jquery的页面加载 ：
$(document).ready(function(){

}) 简写成
$(function(){

})

jquery的页面加载中的代码 不需要等页面所有内容全部加载完成后执行 dom元素准备就绪即可执行
jquery的页面加载函数可以存在多个
$(document).ready( callback )
或简写成
jQuery（callback）
$( callback )

事件处理 ：

事件绑定 ：
bind()
用法 ：
对象.bind(“事件”,function(){ })
对象.bind({
事件 ： function(){},
事件 : function(){},
…
})
unbind() 解除绑定 unbind 也可以用
来关闭on绑定的事件

//案例，对一个盒子使用jq完成拖拽

<script>
	$("#box").bind("mousedown",function(e){
		let disx = e.pageX - $(this).offset().left;
		let disy = e.pageY - $(this).offset().top;
		$(document).bind("mousemove" , function(e){
			$("#box").css({
				left : e.pageX -disx,
				top : e.pageY - disy
			})
		})
		$(document).bind("mouseup" , function(){
			$(document).unbind("mousemove")
		})
		return false;
	})
</script>

事件委托 delegate：
对象.delegate(“事件源”,事件,function(){
})
取消委托 ： undelegate

事件绑定+事件委托 ： on ---- off off可以用来关闭bind绑定的事件
事件绑定 用法 和bind()

事件委托 用法 ：

对象.on(事件 , "事件源" , function(){

})

one() 只触发一次事件的事件处理方法

事件切换 hover
用户 ：

  对象.hover(function(){
        mouseenter
    },function(){
        mouseleave
    })