有两个示例先粘过来
<!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.3); ???????????z-index: 999; ???????} ???????.modal { ???????????position: fixed; ???????????top: 50%; ???????????left: 50%; ???????????width: 400px; ???????????height: 300px; ???????????margin-top: -150px; ???????????margin-left: -200px; ???????????background-color: white; ???????????z-index: 1000; ???????} ???????.hide { ???????????display: none; ???????} ???</style></head><body><button id="add-btn">新增</button><table border="1"> ???<thead> ???<tr> ???????<th>#</th> ???????<th>姓名</th> ???????<th>爱好</th> ???????<th>操作</th> ???</tr> ???</thead> ???<tbody> ???<tr> ???????<td>1</td> ???????<td>晓梅</td> ???????<td>烧热水</td> ???????<td> ???????????<button class="edit">编辑</button> ???????????<button class="delete">删除</button> ???????</td> ???</tr> ???<tr> ???????<td>2</td> ???????<td>小雨</td> ???????<td>烧热水</td> ???????<td> ???????????<button class="edit">编辑</button> ???????????<button class="delete">删除</button> ???????</td> ???</tr> ???<tr> ???????<td>3</td> ???????<td>建超</td> ???????<td>烧热水</td> ???????<td> ???????????<button class="edit">编辑</button> ???????????<button class="delete">删除</button> ???????</td> ???</tr> ???<tr> ???????<td>4</td> ???????<td>Egon</td> ???????<td>烧热水</td> ???????<td> ???????????<button class="edit">编辑</button> ???????????<button class="delete">删除</button> ???????</td> ???</tr> ???<tr> ???????<td>5</td> ???????<td>李岩</td> ???????<td>喝热水</td> ???????<td> ???????????<button class="edit">编辑</button> ???????????<button class="delete">删除</button> ???????</td> ???</tr> ???</tbody></table><div class="cover hide"></div><div class="modal hide"> ???<p> ???????<label for="modal-name">姓名</label> ???????<input id="modal-name" type="text" name="name"> ???</p> ???<p> ???????<label for="modal-hobby">爱好</label> ???????<input id="modal-hobby" type="text" name="hobby"> ???</p> ???<p> ???????<button id="modal-submit">提交</button> ???????<button id="modal-cancel">取消</button> ???</p></div><script src="jquery-3.2.1.min.js"></script><script> ???// 弹出模态框函数 ???function showModal() { ???????$(".cover, .modal").removeClass("hide"); ???} ???// 关闭模态框 ???function hideModal() { ???????$(".cover, .modal").addClass("hide"); ???????// 清空模态框里面的input ???????$(".modal input").val(""); ???} ???// 绑定事件 ???$(document).ready(function () { ???????// 添加按钮绑定事件 ???????$("#add-btn").on("click", function () { ???????????showModal(); ???????}); ???????// 模态框里面的取消按钮，绑定关闭模态框事件 ???????$("#modal-cancel").on("click", function () { ???????????hideModal(); ???????}); ???????// 表格中删除按钮绑定事件 ???????$("tbody").on("click", ".delete", function () { ???????????// this 当前点击的删除按钮 ???????????// $(this) ?--> 变成jQuery对象 ???????????var $currentTr = $(this).parent().parent(); ???????????// 更新当前行后面的所有tr的序号（tr的第一个td儿子） ???????????$currentTr.nextAll().each(function () { ???????????????var $firstTd = $(this).children().first(); ???????????????// this --> ?当前循环中的那个tr ???????????????var currentNum = parseInt($firstTd.text()) - 1; ???????????????$firstTd.text(currentNum); ???????????}); ???????????// 删除当前行 ???????????$currentTr.remove(); ???????}); ???????// 点击模态框里面的提交按钮，把数据添加到表格中 ???????$("#modal-submit").on("click", function () { ???????????// 获取模态框里面input的值 ???????????var name = $("#modal-name").val(); ???????????var hobby = $("#modal-hobby").val(); ???????????// 如果是编辑操作，我应该去更新原来的td的值 ???????????var $tds = $("#modal-submit").data("tds"); ???????????if ($tds !== undefined) { ???????????????// 能够取到$tds,表示我是一个编辑的操作 ???????????????// 更新$tds ???????????????$tds.eq(1).text(name); ???????????????$tds.eq(2).text(hobby); ???????????} else { ???????????????// 取不到tds,表示我是一个新增的操作 ???????????????// 因为是新增操作，所以要创建新的tr ???????????????// 创建tr标签 ???????????????var trEle = document.createElement("tr"); ???????????????// 获取当前表格里面所有的tr标签的个数，正好就是我新增tr的序号 ???????????????var currentNum = $("table tr").length; ???????????????$(trEle).append("<td>" + currentNum + "</td>"); ???????????????$(trEle).append("<td>" + name + "</td>"); ???????????????$(trEle).append("<td>" + hobby + "</td>"); ???????????????$(trEle).append("<td>" + ‘<button class="edit">编辑</button> <button class="delete">删除</button>‘ + "</td>"); ???????????????// 把生成的tr标签添加到tbody的最后 ???????????????$(trEle).appendTo("tbody"); ???????????} ???????????// 清空一下$tds ???????????$("#modal-submit").removeData("tds"); ???????????// 隐藏模态框 ???????????hideModal(); ???????}); ???????// 编辑按钮 ???????$("tbody").on("click", ".edit", function () { ???????????// 显示模态框 ???????????showModal(); ???????????// 取出当前行的数据，填写到模态框里面的input中 ???????????// 1.取当前行的数据 ???????????// this 当前点击的那个编辑按钮 ???????????// 找到当前行所有的td ???????????var $tds = $(this).parent().parent().children(); ???????????$("#modal-submit").data("tds", $tds); ???????????var name = $tds.eq(1).text(); ???????????var hobby = $tds.eq(2).text(); ???????????console.log(name, hobby); ???????????// 将取到的数据填写到模态框里面的input ???????????$("#modal-name").val(name); ???????????$("#modal-hobby").val(hobby); ???????}) ???})</script></body></html>表格的增删改查,这是jQuery的核心内容,事件绑定和函数调用,以及标签查找都在这里灵魂运用到了,还有data的方法
data方法使用
<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>data()示例</title>
</head>
<body>
<div id="d1">div</div>
<script src="jquery-3.2.1.min.js"></script>
</body>
</html>
我们上面的这段代码里面只有一句话就是body里面的那个div标签
我们的data就在这里演示:
$("#d1").data("晓风干","泪痕残") //这里是使用id值找到div标签然后使用data方法在里面添加键值对
[div#d1]0: div#d1length: 1__proto__: Object(0) //这里的length:1 说明我们添加的内容在里面
$("#d1").data("晓风干") //就像取出我们字典键值对的方式那样去把key对应的value值取出来
"泪痕残" //这里我们拿到了value的值
$("#d1").data("k1","v1")
[div#d1]0: div#d1length: 1__proto__: Object(0)
$("#d1").data("k1")
"v1" // 这个例子同上
$("#d1").data("世情薄","人情恶")
[div#d1]0: div#d1length: 1__proto__: Object(0)
$("#d1").data("世情薄")
"人情恶" //同上
$("#d1").data() //这样写就拿出了所有的我们之前存入的值了
{晓风干: "泪痕残", k1: "v1", 世情薄: "人情恶"} //这里是结果
$("#d1").data("age",30) //基于上面都是存入的字符串,所以我们这里存入数字,试一下
[div#d1]
$("#d1").data("age")
30 //一样得到结果
$("#d1").data("arg",true) //这里存入bool值,试一下
[div#d1]
$("#d1").data("arg")
true //一样得到结果
$("#d1").data("body").html() //还可以使用html方法
"
<div id="d1">div</div>
<script src="jquery-3.2.1.min.js"></script>
"
引号里面的内容是结果
$("#d1").data("a",[1,2,3,4,5])
[div#d1]
$("#d1").data("a")
(5) [1, 2, 3, 4, 5]0: 11: 22: 33: 44: 5length: 5__proto__: Array(0) //还可以在data里面存入数组
除了一味地添加,我们还可以进行删除使用removeData,要注意是驼峰体,
$("#d1").removeData("a")
[div#d1]0: div#d1length: 1__proto__: Object(0)
$("#d1").data("a")
undefined //删除成功执行之后我们再对其进行查询的时候,得到undefined的结果.
day 57 ?jQuery插件
原文地址：https://www.cnblogs.com/2012-dream/p/8205614.html