【jQuery】對網頁節點的增刪改查
阿新 • • 發佈：2019-01-22
本文與《【JavaScript】網頁節點的增刪改查》（點選開啟連結）為姊妹篇，其實JavaScript對DOM的操作已經總結了很久的，而對於jQuery對網頁節點的操作，雖然一直在用，但一直沒有好好總結一下，實在是不應該。
下面舉同樣的例子來說明這個問題：
如上圖，提供3個按鈕，1個下拉列表，1個輸入框，提供增刪改查的操作。
網頁中最多10個節點，最少0個節點，多了不讓加，少了不讓減。
首先是本網頁的基本佈局：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jQuery對網頁節點的增刪改查</title> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> </head> <body> <button>增加節點</button> 選擇節點 <select id="nodeList"></select> <button>刪除節點</button> <input type="text" /> <button>修改節點</button> <div></div> </body> </html>
首先引入jQuery資源，之後，除了下拉列表以外其餘節點沒有ID，以展示兩個Jquery獲取節點的方式，一種通過id直接獲取，一種通過獲取子節點的方式的獲取。
這裡沒什麼特別的，關鍵是下面的jQuery程式設計：
可以看到，這裡jQuery設定css是先指明要修改的css屬性，再寫上要修改的內容，Javascript修改css則是對節點的style修改。<script type="text/javascript"> var i = 1;//定義一個節點的id $("body>div").css("border","1px solid #cccccc");//先把body下面的所有div的上style="border:1px solid #cccccc"屬性。此乃jQuery對節點的css操作。 $("body>button:eq(0)").click(function(){//body下面的第0個按鈕的onclick事件 if (i < 11) {//如果節點數少於在1-10之間 $("body>div").append("<p id='p" + i + "'>text" + i + "</p>");//則在body下面的所有div，也就是唯一一個div中新增上id=p1,p2,p3...的節點，且文字為text1,2,3... $("#nodeList").append("<option id='option" + i + "' value='" + i + "'>text" + i + "</p>");//同時在下拉列表中加上id=option1,option2....，value=1,2,3...的選項，一會兒，供下面的修改、刪除使用 i++;//節點數加1 $("body>div").css("border","1px solid #cccccc");//如果符合要求，使邊框變灰 } else {//如果不符合要求，彈出警告，使邊框變紅 alert("最多10個節點！"); $("body>div").css("border","1px solid #ff0000"); } }); $("body>button:eq(1)").click(function(){//body下面的第1個按鈕的onclick事件 if (i > 1) { var removeId = $("#nodeList").val();//獲取要下拉列表中的值 $("#option" + removeId).remove();//刪除相應的選項、p節點 $("#p" + removeId).remove(); i--;//節點數減1 $("body>div").css("border","1px solid #cccccc"); } else{ alert("最少0個節點！"); $("body>div").css("border","1px solid #ff0000"); } }); $("body>button:eq(2)").click(function(){//body下面的第2個按鈕的onclick事件 if (i > 1) { var updateText = $("body>input[type='text']").val();//獲取文字框的輸入內容 var updateId = $("#nodeList").val();//獲取下拉拉列表中的值 var updateFlag = true;//用來驗證是否有同名節點的flag $("body>div>p").each(function(){//遍歷div下的所有p節點 if(updateText==$(this).html()){//如果輸入的值等於p節點的值 alert("已有同名節點，不得修改！");//則彈出警告 $("body>div").css("border", "1px solid #ff0000"); updateFlag = false;//收起flag } }); if (updateFlag) { if (updateText != "") { $("#option" + updateId).html(updateText);//修改下拉列表中的值 $("#p" + updateId).html(updateText);//修改相應p節點的值 $("body>input[type='text']").val("");//清空輸入框 $("body>div").css("border", "1px solid #cccccc"); } else { alert("修改內容不得為空！"); $("body>div").css("border", "1px solid #ff0000"); } } } else{ alert("沒有節點，修改毛線！"); $("body>div").css("border", "1px solid #ff0000"); } }); </script>
jQuery對節點的遍歷，用each方法則可以。Javascript則要對要遍歷的節點，賦予name，然後利用document.getElementbyName將所有name拿下，則進行遍歷。
jQuery刪除一個節點，比Javascript簡便多了，一個remove()搞掂一切，Javascript則要找自己的父節點測能刪除自己。
jQuery找子節點，可以直接用>符號來檢視，Javascript則要通過xx.getElementsByTagName去查詢。