常见的事件
click(function(){...}) 点击触发事件
hover(function(){...}) 鼠标移动到上面触发
blur(function(){...}) 鼠标取消选中触发
focus(function(){...}) 鼠标选中触发
change(function(){...}) 元素的值发生变化的时候触发，常用与select
keyup(function(){...}) 键盘按键按下的时候触发
keydown(function(){...}) 键盘按键松开的时候触发
绑定事件的两种方式
1. click(function(){...}) -----绑定点击事件 2. $('父标签').on("对象","事件名称", function(){...}) ----事件委托 事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。 1.常用来作用于哪些会在未来创建或者增加的元素上面，使未来元素也能继承特点功能 2.实现的原理时冒泡原理，即从触发者本身开始往上一级查找绑定的事件，直到找到为止，类似气泡从水底上浮 事件委托在表格的增删改查中有使用 $("对象").on("事件名称", function(){...}) ----另一种事件的写法,但是没有使用事件冒泡
表格的增删改以及模态框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>今日作业</title>
<style>
.cover {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
z-index: 9;
}
.modal {
position: absolute;
left: 50%;
top: 50%;
height: 300px;
width: 400px;
background-color: white;
z-index: 100;
margin-top: -150px;
margin-left: -200px;
}
.hide {
display: none;
}
</style>
</head>
<body>
<button id="add">新增</button>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Egon</td>
<td>喊麦</td>
<td>
<input type="button" value="编辑" class="edit">
<input type="button" value="删除" class="delete">
</td>
</tr>
<tr>
<td>2</td>
<td>Alex</td>
<td>吹牛逼</td>
<td>
<input type="button" value="编辑" class="edit">
<input type="button" value="删除" class="delete">
</td>
</tr>
<tr>
<td>3</td>
<td>苑昊</td>
<td>不洗头</td>
<td>
<input type="button" value="编辑" class="edit">
<input type="button" value="删除" class="delete">
</td>
</tr>
</tbody>
</table>
<div class="cover hide"></div>
<div class="modal hide">
<p><input type="text" id="username"></p>
<p><input type="text" id="hobby"></p>
<p>
<button id="submit">提交</button>
<button id="cancel">取消</button>
</p>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
function hideModal() {
$('.cover,.modal').addClass('hide');
}
function showModal() {
$('.cover,.modal').removeClass('hide');
}
$('#add').click(function () {
showModal();
});
$('#submit').click(function (index) {
hideModal();
// 打开模态框
// 获取input的值
let type = $($('tbody tr').eq[index]).data('type');
console.log(type);
if (typeof ($('.modal').data('tr'))==='object'){
// let username = $($('tbody tr').eq[index]).data('tr1');
// let hobby = $($('tbody tr').eq[index]).data('tr2');
// $($($('tbody tr')[index]).children()[1]).text(username);
// $($($('tbody tr')[index]).children()[2]).text(hobby);
let new_username=$('#username').val();
let new_hobby=$('#hobby').val();
$($('.modal').data('tr').children()[1]).text(new_username);
$($('.modal').data('tr').children()[2]).text(new_hobby);
$('.modal').removeData('tr')
}
else {
let username=$('#username').val();
let hobby=$('#hobby').val();
// 把值拼接给TR>TD(创建节点是显示的,必须在append之后才会显示)
let trEle = document.createElement('tr');
let td1 = document.createElement('td');
td1.innerText=$('table tr').length;
$(trEle).append(td1);
let td2 = document.createElement('td');
td2.innerText=username;
$(trEle).append(td2);
let td3 = document.createElement('td');
td3.innerText=hobby;
$(trEle).append(td3);
let td4 = document.createElement('td');
td4.innerHTML=`<input type="button" value="编辑" class="edit">
<input type="button" value="删除" class="delete">`;
$(trEle).append(td4);
$('table tbody').append(trEle);
}
});
// 事件委托,冒泡事件(从当前向上一级找事件触发的函数)
$('table').on('click','.delete',function () {
// 删除当前行
$(this).parent().parent().remove();
//删除之后动态调整序号
let len = $('table tr').length;
for (let i = 1; i < len; i++) {
$('table tr:eq(' + i + ') td:first').text(i);
}
});
$('table').on('click','.edit',function () {
showModal();
// 将列表的信息填入模态框的input中
let tr = $(this).parent().parent();
let username=$(tr.children()[1]).text();
let hobby=$(tr.children()[2]).text();
console.log(username);
console.log(hobby);
$('#username').val(username);
$('#hobby').val(hobby);
//新思路:jQuery对象代表的是对象被修改,对象所在的节点的数据也会被修改,$('.modal')这个对象填谁都可以,只要能保证jq对象数据不会被清除就行,其次需要考虑多次编辑的情况下,之前保留的jq对象数据会不会残留,
//导致后面回填数据错误,实际测试好像并不影响,可能是数据对象呗重新赋值,所以老数据呗新数据替换掉了-.-||,实测以上全错,编辑之后再新增,会出错,新增的对象不会出现,会对被编辑的对象做修改,
//解决方案,每次使用完jq对象,就.removeDate('key')清除原来的对象
$('.modal').data('tr',tr);
//自己的思路
// let new_username=$('#username').val();
// let new_hobby=$('#hobby').val();
// let index=$(this).parent().parent().index();
// console.log(index);
// tr.data({'type':1,'index':index,'tr1':123,'tr2':1234});
// console.log(tr.data());
// return tr.data();
//点击提交按钮时,怎么判断用哪个功能?
// type(jquery对象) 如果是对象就是object类型,否则是undefined
//老师的方法我不会
// let tr = $(this).parent().parent();
// $(this).data('tr',tr);
});
$('#cancel').on('click',function () {
hideModal();
$('#username').val('');
$('#hobby').val('');
})
</script>
</body>
</html>