day 57 jQuery插件
在jQuery的console里面 '321'+8 输出结果是"3218" 直接作为字符串给拼接上了
如果是"321"-8 输出结果就是313 直接转换成数字去进行计算了,得到的结果也是数字
有两个示例先粘过来
<!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的结果.
jQuery插件,
jQuery.entend(object)命名空间下添加新的功能,多用于插件开发者向jQuery中添加新函数时使用
jQuery插件示例:
/** * Created by Administrator on 2018/1/5. */ (function ($) { $.extend({ validate: function () { check(); } }); function check() { $("form :submit").on("click", function () { //这里的:submit是一种查找方式,在表单常用筛选里面, //我们要想找到所有的submit就直接写作$(":submit") 这样的形式,而在前面加上了form也就是加了一条限定条件,我们要在form里面找到所有的submit // 先把上一次的错误提示信息清空 $("form span.error").text(""); // 设置一个阻止submit默认提交事件执行的标志位 var flag = true; // 开始校验 // 1. 找到所有要填写的input $("form input[type!='submit']").each(function () { // this 指的是具体的每一个input 备注一点我们的所有的input框里面都会有name这个属性,所谓的属性就是标签属性就像id,class,type这些都是标签属性 //然后我们的attr是取到属性值,我们要取到每一个input框里面的属性值,所以要找到每一个框里面都会有的属性来取值,每一个input框里面都会有这个name属性, // 然而我们的每一个input里面都对应有不同的属性值,所以这里我们直接用attr(name)就可以得到每一个input的值了 var inputName = $(this).attr("name"); //而这里的inputName就是随便的一个变量名而已,它可以是abd或者随便什么 // 取input的值 var inputValue = $(this).val(); // 取出当前input筐的label文本 var inputLabel = $(this).prev().text(); var errMsg; // 提前申明一个错误信息的变量 // 1.5 只有必填项才做校验 if ($(this).attr("egon")) { // 是必填项 // 2. 针对inputValue做判断 if (inputValue.length === 0) { // 当前这个input没有值 errMsg = inputLabel + "不能为空"; // 把错误信息填到span标签中 $(this).next().text(errMsg); flag = false; return false; // 跳出each循环 } // 如果这个input筐是password，需要多做一个判断：密码位数不能少于6位 if (inputName === "password") { if (inputValue.length < 6) { errMsg = inputLabel + "不能少于6位"; // 把错误信息填到span标签中 $(this).next().text(errMsg); flag = false; return false; // 跳出each循环 } } // 如果inpur框是mobile,需要加一个判断|：判断手机号是不是合法的手机号 if (inputName === "mobile") { if (!/^1[345678]\d{9}$/.test(inputValue)) { errMsg = inputLabel + "格式不正确"; // 把错误信息填到span标签中 $(this).next().text(errMsg); flag = false; return false; // 跳出each循环 } } } }); return flag; }) } })(jQuery);
