jQuery-关于事件(可编辑表格，自定义表格，对话，模拟抽奖)
2016-12-24 本文已影响543人
范小饭_
jQuery中的事件会比js中简单的多，基本上都是js封装好的函数，我们直接调用就可以了，看了下最近写的东西，感觉都是基本的知识，有一点索然无味，所以准备改变画风，所有的知识点，都整理在思维导图里，然后正文添加案例帮助我们更好的消化知识，既然还有人选择看我的小文章，是对我大大的鼓励，那我就要不断努力呀！
老规矩，诺，给你图
事件.png
今天准备的小案例，温习以前的知识，巩固今天的内容，同时也会加深对jQuery的认识。
一、表格操作
表格操作.gif
思路与难点：
1.我们先创建一个隐藏的一行，然后点击添加的时候，直接将其插入进来；
2.点击修改的时候需要给每个td添加一个可以编辑的input标签；
3.点击保存时获取input的val值，同时去掉input；
4.删除时删除整个删除按钮所在的tr；
看代码（页面搭建样式部分简写，忽略格式）
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
tr{height: 20px;width: 300px;}
td{width: 150px;}
.hid{display: none;}
</style>
</head>
<body>
<table border="1px" cellspacing="0">
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>tom</td>
<td>18</td>
<td>男</td>
<td>
<button class="add">添加</button>
<button class="update">修改</button>
<button class="del">删除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>jone</td>
<td>28</td>
<td>男</td>
<td>
<button class="add">添加</button>
<button class="update">修改</button>
<button class="del">删除</button>
</td>
</tr>
<tr>
<td>3</td>
<td>lily</td>
<td>21</td>
<td>女</td>
<td>
<button class="add">添加</button>
<button class="update">修改</button>
<button class="del">删除</button>
</td>
</tr>
<tr class="hid">
<td></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td>
<button class="add">添加</button>
<button class="update">修改</button>
<button class="del">删除</button>
</td>
</tr>
</table>
<script type="text/javascript" src="jquery/jquery-3.0.0.min.js"></script>
<script type="text/javascript">
function resetIndex(){
//计算序号
$("tr>td:first-child").each(function(index,element){
$(this).html(index+1)
})
}
//点击添加
$(".add").click(function(){
//01 克隆
var $tr = $(".hid").clone(true);
//disply=block
$tr.removeClass("hid");
//把修改按钮的值为保存
$tr.find("button:contains(修改)").html("保存");
//02 after()
$(this).closest("tr").after($tr);
resetIndex();
})
//点击修改
$(".update").click(function(){
//可操作的全部区域
var $tds = $(this).parents("tr").children("td").not(":first,:last");
//点击修改按钮的时候，先判定是修改还是保存
var $content = $(this).html();
if ($content=="修改") {
//如果是修改,给每个操作的td添加一个input标签
$tds.each(function(){
$(this).html("<input type='text' value='"+$(this).html()+"'>")
});
$(this).html("保存")
}else{
//如果是保存,将修改的内容保存下来
$tds.each(function(){
var contentIn= $(this).children("input").val()
$(this).html(contentIn);
});
$(this).html("修改")
}
})
//点击删除
$(".del").click(function(){
$(this).parents("tr").remove();//将对应的一行删除
resetIndex();
})
</script>
</body>
</html>
二、对话
对话效果图.gif
思路与难点
1.仔细分析页面结构，学会创建节点和将节点插入到指定位置
2.难度系数不高；哪里不会看前面的笔记；
3.详细信息已在代码注释中体现；
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Title</title>
<style>
* { margin: 0; padding: 0;}
.ovfl { overflow: hidden}
.fr{ float: right}
.t-cent { text-align: center}
li { list-style: none}
.header { position: relative; top: -5px;}
.header span { width: 40px; height: 12px; display: inline-block; background-color: #999; border-radius: 10px;}
.list-wrap { width: 300px; margin: 20px auto; height: 520px; padding: 10px; border: 1px solid #999;
box-shadow: 0 0 0 2px rgba(0,0,0,.2); border-radius: 10px; }
#list {background-color: #f9f9f9; border-radius: 10px 10px 0 0 ;border: 1px solid #f1f1f1; height: 400px; overflow: auto; padding: 15px;}
.cont { overflow: hidden}
img { width: 50px; height: 50px; border-radius: 5px;}
.user1 img{ float: left}
.user2 img { float: right}
.text { max-width: 160px; margin: 10px 15px; padding: 10px; line-height: 20px; border-radius: 5px;}
.user1 .text { float: left; background-color: #fff;}
.user2 .text { float: right; text-align: right; background-color:#9f0;}
.box { padding: 20px 5px; border-top: 1px solid #f1f1f1; }
.user {float: left; width: 60px;line-height: 24px; position: relative; text-align: center;white-space: nowrap;
border-radius: 3px; padding:3px;border: 1px solid #eee;}
.name-list { position: absolute; padding:0 5px; left:-5px; text-align:left; bottom: 35px; width: 100px; display: none;
background-color: #fff; border-radius: 6px;border: 1px solid #eee; cursor: pointer}
.name-list li { border-bottom: 1px solid #eee;line-height: 30px; padding:0 0 0 8px; }
.name-list li:nth-child(2) { border: none}
.name { overflow: hidden;cursor: pointer;
text-overflow: ellipsis;; }
#text { float: left; margin:0 10px; height: 20px; line-height: 20px; width: 140px; padding: 5px;
border-radius: 5px; border: 1px solid #eee; box-shadow: 0 0 1px rgba(0,0,0,.5)}
#send {float: left; width: 40px; border: none; outline: none; cursor: pointer; box-sizing: content-box; color: #fff; background-color: #35d;border-radius: 3px; text-align: center; line-height: 20px; padding: 5px;}
</style>
</head>
<body>
<div class="list-wrap">
<div class="header t-cent">
<span> </span>
</div>
<ul id="list">
<li class="user1">
<div class="cont">
<img src="1.jpg">
<p class="text">hi！史塔克</p>
</div>
</li>
<li class="user2">
<div class="cont">
<img src="2.jpg">
<p class="text">hi！莉莉妮特</p>
</div>
</li>
</ul>
<div class="box">
<div class="user">
<div class="name" id="name" data-id="1">莉莉妮特</div>
<ul class="name-list" id="name-list">
<li data-id="1">莉莉妮特</li>
<li data-id="2">史塔克</li>
</ul>
</div>
<input type="text" id="text" value="">
<input type="button" type="button" id="send" value="发送">
</div>
</div>
<script type="text/javascript" src="jquery/jquery-3.0.0.min.js"></script>
<script type="text/javascript">
var yuan;//定义全局变量，用来标记选择的名字
$("#name").on("click",function(){
$("#name-list").css("display","block");//点击时显示出名字列表
$("#name-list li").click(function(){ //当点击时选择其中一个名字
yuan = $(this).html();//记录下选择的名字，用于后面判断
$("#name").html($(this).html());//将选择的名字显示在列表里
$("#name-list").css("display","none");//名字列表消失
})
})
//输入文字,点击发送
// <li class="user2">
// <div class="cont">
// <img src="2.jpg">
// <p class="text">hi！莉莉妮特</p>
// </div>
// </li>
//此刻先分析页面结构
//1.每一句话的显示都是一个li标签
//2.里面有一个div都有一个img标签（用来放置头像）和一个p标签（用来存将要发送的文字）
//3.所以，每创建一句话，都要创建这些标签，才能保证页面不会错乱
$("#send").on("click",function(){
//得到文字$("#text").val()
var $language=$("<p class='text'></p>");//创建一个p标签
var $cont = $("<div class='cont'></div>");//创建一个div
$language.html($("#text").val());//得到即将发送的文字
//进行判断，当时选择的是莉莉妮特
if(yuan=="莉莉妮特") {
var $img=$("<img src='1.jpg'>"); //创建莉莉妮特的头像
$cont.append($img);//将头像添加到div里
$cont.append($language);//将即将发送的文字添加到div里
var $li = $("<li class='user1'></li>");//创建一个li用来
$li.append($cont); //将div添加到li标签里
$("#list").append($li) //将li标签显示在页面上
}else{
var $img=$("<img src='2.jpg'>");//创建史塔克的头像
$cont.append($img);//将头像添加到div里
$cont.append($language);//将即将发送的文字添加到div里
var $li = $("<li class='user2'></li>");//创建一个li用来
$li.append($cont);//将div添加到li标签里
$("#list").append($li)//将li标签显示在页面上
}
})
</script>
</body>
</html>
三、自定义表格
思路与难点：
1.自定义表即我们输入行列，点击创建就可以创建出我们对应的表格；
2.难度系数不高，哪里不会看以前的笔记哦，其实看思维导图就可以了；
3.这里用js和jQuery两种方式写，大家可以对照理解一下，也复习一下js；
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery/jquery-3.0.0.min.js"></script>
<style type="text/css">
table{
border: 1px solid #000;
}
td{
width: 80px;height: 40px;border:1px solid #000;
}
input{
border-radius: 7px;
background-color: skyblue;
}
</style>
</head>
<body>
请输入行：<input class="colValue" type="text" id="row"><br>
请输入列：<input class="rowValue" type="text" id="col"><br>
<button id="btn">生成表格</button>
<table cellpadding="0" cellspacing="0" id="tab">
</table>
<script type="text/javascript">
//用JavaScript写的代码
document.getElementById("btn").onclick = function(){
var r = document.getElementById("row").value;
var c = document.getElementById("col").value;
var oTab = document.getElementById("tab");
for (var i = 0; i < r; i++) {
var tr = document.createElement("tr");
oTab.appendChild(tr);
for(var j=0;j<c;j++){
var td = document.createElement("td");
tr.appendChild(td);
}
}
}
//用jQuery写的代码
$("button").click(function(){
$("table").html("");
var h = parseInt($(".colValue").val());//得到输入的行
var l = parseInt($(".rowValue").val());//得到输入的列
for (var i = 0; i < h; i++) {//循坏创建表格的行
var $tr = $("<tr></tr>");
$tr.appendTo("table");//将创建的行添加到table标签中
for(var j = 0 ; j < l ; j++){//循环在表格的行中创建每一个单元格
$("<td></td").appendTo($tr);
}
}
})
</script>
</body>
</html>
四、模拟抽奖
模拟抽奖.gif
思路与难点：
1.利用随机数来确认是否中奖；
2.熟练的操作节点；
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
}
table{
margin: 0 auto;
margin-top: 100px;
}
td{
width: 80px;
height: 82px;
/*background-color: green;*/
}
</style>
</head>
<body>
<table>
<tr>
<td><img src="1.png" alt=""></td>
<td><img src="2.png" alt=""></td>
<td><img src="3.png" alt=""></td>
</tr>
<tr>
<td><img src="1.png" alt=""></td>
<td><img src="2.png" alt=""></td>
<td><img src="3.png" alt=""></td>
</tr>
<tr>
<td><img src="1.png" alt=""></td>
<td><img src="2.png" alt=""></td>
<td><img src="3.png" alt=""></td>
</tr>
</table>
<script type="text/javascript" src = jquery/jquery-3.0.0.min.js></script>
<script type="text/javascript">
$("td").one("click",function(){
if (Math.random()*10 < 1) {
this.innerText = "你中奖了"
}else{
this.innerText = "你未中奖"
}
$(this).css("background-color","lawngreen");
}).on("mouseout",function(){
$(this).css("background-color","white");
$("tr :first-child").html('<img src="1.png" alt="">');
$("tr :nth-child(2)").html('<img src="2.png" alt="">');
$("tr :last-child").html('<img src="3.png" alt="">');
})
</script>
</body>
</html>
文章的最后简单的梳理一下知识点，详细看思维导图哦~
添加事件
给元素添加响应事件
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.用户不会像你这么操作的。
任何时候不要吝啬的你赞美，喜欢就点赞咯~
