动态添加行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
font-size: 14px;
font-family: Century Gothic;
}
.wrap {
width: 410px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 400px;
}
tr,td {
/*width: 25%;*/
height: 25px;
}
.btnAdd {
width: 110px;
height: 29px;
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
}
.form_add_title span {
width: auto;
height: 18px;
font-size: 20px;
font-family: Century Gothic;
font-weight: bold;
color: rgb(102,102,102);
text-indent: 12px;
margin-right: 10px;
display: block;
text-align: center;
padding: 8px 0px 10px;
overflow: hidden;
background-color: #F5F5F5;
}
.form_add {
position: fixed;
top: 29%;
left: 50%;
margin-left: -197px;
padding-bottom: 20px;
background-color: #fff;
display: none;
border: 1px solid #080;
text-align: center;
}
.form_item > .txt {
width: 299px;
height: 32px;
}
.form_add_title div {
width: 16px;
height: 20px;
position: absolute;
right: 10px;
top: 6px;
font-size: 29px;
line-height: 16px;
cursor: pointer;
}
.form_submit input {
margin-top: 20px;
width: 169px;
height: 32px;
}
</style>
<script src="jquery-1.8.3.js"></script>
<script>
// 页面加载的事件
$(function(){
// 显示对话框
$("#addData").click(function(){
// 显示对话框
$("#formAdd").show();
// 显示遮挡层
$("#j_mask").show();
});
function closeKuang(){
// 隐藏对话框
$("#formAdd").hide();
// 隐藏遮挡层
$("#j_mask").hide();
}
// 点击x关闭对话框
$("#j_hideFormAdd").click(function(){
closeKuang();
});
// 添加数据的按钮
$("#j_btnAdd").click(function(){
// 先获取课程的文本框对象
var j_txtLesson = $("#j_txtLesson");
// 获取学院文本框的对象
var j_txtBelSch = $("#j_txtBelSch");
// 创建行和列并直接加入到tbody中
$("<tr><td>"+j_txtLesson.val()+"</td><td>"+j_txtBelSch.val()+"</td><td><a href='javascript:;' class='get'>GET</a></td></tr>").appendTo($("#j_tbody"));
// 关闭对话框
closeKuang();
// 清空课程的文本框
j_txtLesson.val("");
j_txtBelSch.val("前端与移动开发学院");
});
// 页面加载后就为a注册点击事件,使用的是on的方式
$("#j_tbody").on("click",".get",function(){
$(this).parent().parent().remove();
});
});
</script>
</head>
<body>
<div class="wrap">
<div>
<input type="button" value="添加数据" id="addData" class="btnAdd">
</div>
<table border="1" cellpadding="0" cellspacing="0">
<thead>
<th>课程名称</th>
<th>所属学院</th>
<th>已学会</th>
</thead>
<tbody id="j_tbody">
<tr>
<td>JavaScript</td>
<td>前端与移动开发学院</td>
<td><a href="javascript:;" class="get">GET</a></td>
</tr>
<tr>
<td>jQuery</td>
<td>前端与移动开发学院</td>
<td><a href="javascript:;" class="get">GET</a></td>
</tr>
<tr>
<td>HTML5</td>
<td>前端与移动开发学院</td>
<td><a href="javascript:;" class="get">GET</a></td>
</tr>
<tr>
<td>CSS</td>
<td>前端与移动开发学院</td>
<td><a href="javascript:;" class="get">GET</a></td>
</tr>
</tbody>
</table>
</div>
<!-- 遮挡的div -->
<div id="j_mask" class="mask"></div>
<div id="formAdd" class="form_add">
<div class="form_add_title">
<span>添加数据</span>
<div id="j_hideFormAdd">x</div>
</div>
<div class="form_item">
<label class="lb" for="j_txtLesson">课程名称:</label>
<input class="txt" type="text" id="j_txtLesson" placeholder="请输入课程名称">
</div>
<div class="form_item">
<label class="lb" for="j_txtBelSch">所属学院:</label>
<input class="txt" type="text" id="j_txtBelSch" value="前端与移动学院">
</div>
<div class="form_submit">
<input type="button" value="添加" id="j_btnAdd">
</div>
</div>
</body>
</html>
为元素解绑事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 400px;
height: 200px;
background-color: green;
cursor: pointer;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function(){
// 用什么方式绑定事件,最好用对应的方式解绑事件
// unbind括号中写什么事件的名字就会把这个事件解绑,会把这个元素的
// 这个点击的多个事件都会解绑
// 对象.click()这种方式添加的事件也可以使用unbind解绑
// 括号中没有任何参数,此时该元素的所有的事件全部解绑
// 同时解绑多个事件----每个事件的名字中间用空格即可
// 第一个按钮为div绑定事件
$("#btn").click(function(){
// div的点击事件
$("#dv").bind("click",function(){
console.log("div被点了");
}).bind("click",function(){
console.log("div点两次了");
});
// 鼠标进入
$("#dv").bind("mouseenter",function(){
$(this).css("backgroundColor","blue");
});
// 鼠标离开
$("#dv").bind("mouseleave",function(){
$(this).css("backgroundColor","pink");
});
});
// $("#dv").click(function(){
// console.log("哈哈");
// });
// 第二个按钮为div解绑事件
$("#btn2").click(function(){
// 解绑的是点击事件
// 解绑的是点击事件,所有的点击事件全部移除
// $("#dv").unbind("click");
// 括号中没有任何参数,此时该元素的所有的事件全部解绑
// $("#dv").unbind();
// 同时解绑多个事件
$("#dv").unbind("mouseenter mouseleave");
});
});
</script>
</head>
<body>
<input type="button" value="绑定事件" id="btn">
<input type="button" value="解绑事件" id="btn2">
<div id="dv"></div>
</body>
</html>
delegate的解绑事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 400px;
height: 200px;
background-color: green;
cursor: pointer;
}
p {
background-color: red;
width: 80px;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function(){
// delegate绑定事件对应的方式的解绑方式
// 点击第一个按钮,div有自己的点击事件,有鼠标进入和鼠标离开事件
// 同时为p绑定点击事件
$("#btn").click(function(){
// 为div绑定事件
$("#dv").click(function(){
console.log("div被点了");
}).mouseenter(function(){
console.log("鼠标进来了");
}).mouseleave(function(){
console.log("鼠标离开了");
});
// 在div中创建一个p,同时为p绑定点击事件
$("<p>这是一个p</p>").appendTo($("#dv"));
// 为p绑定事件
$("#dv").delegate("p","click",function(){
console.log("啊,p被点了");
});
$("#dv").delegate("p","mouseenter",function(){
console.log("p的鼠标进入");
});
});
// 第二个按钮解绑事件
$("#btn2").click(function(){
// p的点击事件没有了,移除了p的所有的事件
// $("#dv").undelegate();
// 移除的是p的点击事件
// $("#dv").undelegate("p","click");
// 可以移除多个事件,但是每个事件之间用空格隔开
$("#dv").undelegate("p","click mouseenter");
});
});
</script>
</head>
<body>
<input type="button" value="绑定事件" id="btn">
<input type="button" value="解绑事件" id="btn2">
<div id="dv">
</div>
</body>
</html>
off的解绑事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 400px;
height: 200px;
background-color: green;
cursor: pointer;
}
p {
background-color: red;
width: 80px;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function(){
// delegate绑定事件对应的方式的解绑方式
// 点击第一个按钮,div有自己的点击事件,有鼠标进入和鼠标离开事件
// 同时为p绑定点击事件
$("#btn").click(function(){
// 为div绑定事件
// 点击事件
$("#dv").click(function(){
console.log("div被点了");
// 鼠标进入
}).mouseenter(function(){
console.log("鼠标进来了");
// 鼠标离开
}).mouseleave(function(){
console.log("鼠标离开了");
});
// 在div中创建一个p,同时为p绑定点击事件
$("<p>这是一个p</p>").appendTo($("#dv"));
// 为p绑定事件
$("#dv").on("click","p",function(){
console.log("啊,p被点了");
});
$("#dv").on("mouseenter","p",function(){
console.log("啊,进入到p里面来了");
});
$("#dv").on("click","span",function(){
console.log("哦,span被点了");
});
});
// 第二个按钮解绑事件
$("#btn2").click(function(){
// 解绑事件
// 父级元素和子级元素的所有的事件全部解绑
// $("#dv").off();
// 把父级元素和子级元素的点击事件解绑
// $("#dv").off("click");
// 父级元素和子级元素的多个事件,中间用空格
// $("#dv").off("click mouseenter");
// 解绑p标签的点击事件
// $("#dv").off("click","p");
// p的两个事件都没了
// $("#dv").off("click mouseenter","p");
// p的所有的事件全部解绑
// $("#dv").off("","p");
// 干掉div中所有的子元素的点击事件
$("#dv").off("click","**");
});
// 页面加载
$(function(){
// 为按钮绑定点击事件
$("#btn1").on("click",function(){
console.log("哈哈,我又变帅了");
});
});
});
</script>
</head>
<body>
<input type="button" value="哈哈,我是按钮" id="btn1">
<input type="button" value="绑定事件" id="btn">
<input type="button" value="解绑事件" id="btn2">
<div id="dv">
<span>这是span</span>
</div>
</body>
</html>