jQuery 动画和事件

目录

一，事件

常用的基本事件：

1.加载Dom两种方式

1>.window.onload方式

2>.jQuery方式

3>.两个都有的情况下执行顺序

2.绑定事件的两种方式：

元素.事件名(function(){})

3.合成事件/事件切换 

hover():鼠标悬停合成事件（鼠标放入，鼠标移开两种状态）

toggle():鼠标点击合成事件(控制是否显示)

4.事件传播(事件冒泡)

五，事件坐标 

offsetX:当前元素左上角  针对整个body的位置

clientX:窗口左上角  针对屏幕位置

pageX:网页左上角  针对屏幕位置

效果图：

 六：移除事件

元素.unbind("事件名")

二，动画效果 

1.基本

显示：show（Time）

隐藏：hide（Time）

切换：toggle（Time） 它就包含了上面两个

2.滑动

slideUp（Time）：动画收缩（向上滑动）-->隐藏

slideDown（Time）：动画展开（向下滑动）-->显示

slideToggle（Time）：动画切换

3.淡入淡出（透明度）

fadeIn（Time）：淡入（透明度减少）

fadeOut（Time）：淡出（透明度增大）

fadeToggle（Time）：切换

4.自定义动画

元素.animate({属性:属性值},Time)

缩放：width  heigth

移动：top  left

移动(本元素),距离：top="+="    left="-="

---

一，事件

常用的基本事件：

        点击 onclick
        鼠标 onmouseover onmouseout onmousemove
        键盘 onkeydown onkeyup onkeypress
        onsubmit 表单提交  onreset
        onchange 输入框的值发生改变的时候
        onblur 失去/onfocus 得到
        ondblclick 双击事件

 注意事项：

jquery的事件就是js去掉on

js的事件只能有一个，但是jQuery可以有多个事件，写代码时要注意不要出现事件重复的现象。

1.加载Dom两种方式

1>.window.onload方式

执行时间：整个网页中所有内容（包括图片）加载完成后，才会执行
编写个数：1个

2>.jQuery方式

执行时间：网页结构绘制完成后，执行
编写个数：多个

3>.两个都有的情况下执行顺序

jQuery3.0：window.onload比jQuery先执行
jQuery1.0和2.0：jQueryt比window.onload先执行

2.绑定事件的两种方式：

元素.事件名(function(){})

效果图： 

由于jQuery可以有多个事件，所以它会弹出两次提示，而js则只会弹出后面事件的提示。 

元素.on("事件名",function(){})  事件委托

可以将事件委托给 body html 等·，但是注意千万不要委托在容易受影响的元素上，如：tr，td

3.合成事件/事件切换 

hover():鼠标悬停合成事件（鼠标放入，鼠标移开两种状态）

鼠标移上去第一个函数

鼠标移除第二个函数

toggle():鼠标点击合成事件(控制是否显示)

注意：在箭头函数中 this代表的是window 

           在普通函数中，this代表的是 这个函数本身

	
		
		
		
		
	
	
		

        //设置了延迟时间为1S 
        点我
		
	

点击前：

点击后：

---

4.事件传播(事件冒泡)

传播：小-->中-->大

阻止传播：时间后面加上 return false

事件的传播是从上到下传播，事件的冒泡是从下到上冒泡。它们是两个不同的方向。

	
		
		
		
		
	
	
    		

        
            
dasdasdasdsada
        
		
	

五，事件坐标 

offsetX:当前元素左上角  针对整个body的位置

clientX:窗口左上角  针对屏幕位置

pageX:网页左上角  针对屏幕位置

效果图：

                                                                                                     

 六：移除事件

元素.unbind("事件名")

$("body").unbind("mousemove")

二，动画效果 

1.基本

显示：show（Time）

隐藏：hide（Time）

切换：toggle（Time） 它就包含了上面两个

---

2.滑动

slideUp（Time）：动画收缩（向上滑动）-->隐藏

slideDown（Time）：动画展开（向下滑动）-->显示

slideToggle（Time）：动画切换

---

3.淡入淡出（透明度）

fadeIn（Time）：淡入（透明度减少）

fadeOut（Time）：淡出（透明度增大）

fadeToggle（Time）：切换

---

4.自定义动画

元素.animate({属性:属性值},Time)

缩放：width  heigth

移动：top  left

移动(本元素),距离：top="+="    left="-="

---

今天的分享就到此为止了，更多代码小知识下期精彩继续。