【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去查詢。