day 57 jQuery插件
有兩個示例先粘過來
<!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-colorView Code: 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 //一樣得到結果
var $body=$("body") //聲明一個變量
這裏跟上面是一樣的,我們粘了一個簡潔版過來:
var $body=$("body")
undefined
$body
[body, prevObject: r.fn.init(1)]0: bodylength: 1prevObject: [document]__proto__: Object(0)
$("#d1").data("body",$body)
[div#d1]0: div#d1length: 1__proto__: Object(0)
$("#d1").data("body")
[body, prevObject: r.fn.init(1)]
$("#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插件