jQuery-关于事件(可编辑表格，自定义表格，对话，模拟抽奖)

jQuery中的事件会比js中简单的多，基本上都是js封装好的函数，我们直接调用就可以了，看了下最近写的东西，感觉都是基本的知识，有一点索然无味，所以准备改变画风，所有的知识点，都整理在思维导图里，然后正文添加案例帮助我们更好的消化知识，既然还有人选择看我的小文章，是对我大大的鼓励，那我就要不断努力呀！
老规矩，诺_，给你图

事件.png

今天准备的小案例，温习以前的知识，巩固今天的内容，同时也会加深对jQuery的认识。

一、表格操作

表格操作.gif

思路与难点：
1.我们先创建一个隐藏的一行，然后点击添加的时候，直接将其插入进来；
2.点击修改的时候需要给每个td添加一个可以编辑的input标签；
3.点击保存时获取input的val值，同时去掉input；
4.删除时删除整个删除按钮所在的tr；
看代码（页面搭建样式部分简写，忽略格式）

序号	姓名	年龄	性别
1	tom	18	男
2	jone	28	男
3	lily	21	女

二、对话

对话效果图.gif

思路与难点
1.仔细分析页面结构，学会创建节点和将节点插入到指定位置
2.难度系数不高；哪里不会看前面的笔记；
3.详细信息已在代码注释中体现；
代码如下：

三、自定义表格

思路与难点：
1.自定义表即我们输入行列，点击创建就可以创建出我们对应的表格；
2.难度系数不高，哪里不会看以前的笔记哦_{，其实看思维导图就可以了}；
3.这里用js和jQuery两种方式写，大家可以对照理解一下，也复习一下js；
代码如下：




    
    Document
    
    


    请输入行：

    请输入列：

四、模拟抽奖

模拟抽奖.gif

思路与难点：
1.利用随机数来确认是否中奖；
2.熟练的操作节点；
代码如下




    
    Document

文章的最后简单的梳理一下知识点，详细看思维导图哦~

添加事件

给元素添加响应事件

on（“事件名”，“相应函数”）

给多个事件添加同一个相应函数，事件名和事件名之间用空额隔开

on("事件名事件名",响应函数)

一次性添加多个事件的响应

on({"事件名1":"相应函数1","事件名2":"相应函数2","事件名3":"相应函数3"})
可以向相应函数中传参
参数写在函数名的后面，用逗号分隔
参数为对象或者是数字
注意：链式操作

移除事件

移除所有事件

off（）

移除某一事件

off（“事件名”）

移除某一相应函数

off（“事件名”，函数名）

小插曲：
页面载入：页面加载完毕会触发
$(document).ready(function(){});
简写：$(function(){正式代码在此处填写})

合成事件

mouseover和mouseout的合成事件
hover（）
格式：jQuery.hover(mouseover的事件函数，mouseout的事件函数)

事件对象

事件对象只需要获取，不需要创建，每触发一次事件，就会触发这个事件的所有信息

自定义事件

1、自己定义的事件，必须先通过on/bind绑定
2、然后通过trigger（）触发函数
小知识
jQuery.trigger("事件名")：在每一个匹配的元素上触发某类事件

事件委托

也叫事件代理，利用事件冒泡给父元素添加事件处理程序从而使所有子元素都可以触发该事件

优点：
1.减少DOM操作
2.新添加的子元素同样可以相应事件
适用场景：如果所有的子元素都要求实现这个同样的效果，可以考虑让父元素替子元素去响应事件

jQuery自带事件

show（）让元素显示，相当于 .css("display","bloak")

hidden（）让元素显示，相当于 .css("display","none")

fadeIn()
fadeOut()
fadeToggle() 通过不透明度的变化来控制所有匹配元素的淡入和淡出效果，并在动画完成后可选的触发一个回调函数

slideDown()
slideUp()
slideToggle() 过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。

累了吧_喏给你笑话~

【程序员被提bug之后的反应】1.怎么可能；2.在我这是好的，不信你来看看；3.真是奇怪，刚刚还好好的；4.肯定是数据问题；5.你清下缓存试试；6.重启下电脑试试；7.你装的什么版本的类库(jdk)8.这谁写的代码；9.尼玛怎么还在用360安全浏览器；10.用户不会像你这么操作的。

任何时候不要吝啬的你赞美，喜欢就点赞咯~