jquery.动画和事件

一.了解本章学习的东西

1.首先来总结一下一部分常用的事件

点击事件 onclick

鼠标事件

onmouseover（鼠标移入）

onmouseout（鼠标移出）

onmousemove（鼠标移动）

onmouseleave（鼠标移开） onmouseenter（鼠标点击）

onmousedown（鼠标按下） onmouseup（鼠标移开）

onmousewheel（鼠标滑轮）

键盘事件

onkeydown（键盘按下）

onkeyup（键盘松开）

onkeypress（键盘按一次）

表单事件

onsubmit（表单提交）

onreset（表单重置）

onchange（表单或输入框的值改变事件）

onblur（失去焦点）

onfocus（得到焦点）

ondblclick（双击事件）

注：在鼠标事件中两个连写的是两两搭配的不能随意组合使用，在jquery中的事件就是js中的事件去掉on

二.用法和代码展示

1.表格增删

js只能有一个事件（只显示最后一个），jquery可以有多个

加载事件整个窗口加载完毕是执行

 this在正常函数中就是this

 this在箭头函数中就是window(需要传this为参是就不能使用箭头函数)

let声明一个局部变量(注意用反引号的地方)

注意不能将所有的button设点击事件（$("td button")用这种方法设点击事件）

新增按钮时注意要调用方法给新增按钮也增加事件

	
	
	

    

        

        

            点我删除
        
    
    

        

        

            点我删除
        
    

增加
		

 一个简单的表格行的增加，删除就完成了，往往很多人以为真的完成了，但细心的人就会发现有些地方会重复执行一般不容易被发现。

 $("td button").click(function (){
		 	$(this).parents("tr").remove()
alert("---")
		 })

当你在删除后面加一行提示框时你运行时会发现随着你增加次数的增加提示框提示次数也会变多

那么问题来了怎么解决？

代码如下：

元素.on  委托事件

	
	
	

    

        

        

            点我删除
        
    
    

        

        

            点我删除
        
    

增加
		

2.div的动态隐藏

!important 设置隐藏方式不从那个方向开始（设为不改变）

display: inline-block   行块标签，使其在同一行，在span a标签加上后使其能设置宽和高

toggle()  设置是否显示，后面填时间，多少秒后隐藏

	
	
		

		aaa
		//toggle设置是否显示，后面填时间，多少秒后隐藏
	

3.动画效果

坐标事件

offsetX     clientX     pageX（获得横坐标，前面相对于body，后者相对于屏幕）

unbind   移出事件（移除坐标事件）

fadeOut   淡出事件      fadeIn   淡入       fadeToggle   切换

div动态变大代码如下:

div居中变大

使div居中需要用到：margin：auto(设外边距居中)

left：50% 左边距居自身50%

top：50%上边距居自身50%

transform: translate(-50%,-50%)   左，上-50%

注：在设div样式时我经常不注意将它设为行块时的语句放在中间没有在意顺序，就会出现一个问题div不显示，还不易发现，我们要注意最好将display: inline-block;语句放最前面。

今天的分享就到这了，图片中还有许多方法只不过不常用没有一一列举，可以自己试试，会有不一样的效果