現在的年輕人，經歷旺盛，每天都熬夜，今天又晚了，現在才更新博客，今天更新jquery入門之對節點的操作，內容簡單好掌握。認真的燥再來吧。
1、$("<li class="li"></li>") 創建一個li標簽
//1、創建節點，$("標簽") 類似js document.createElement("li") console.log($("<li clsass='li'>我是li創建的標簽</li>"))
2、$("ul").html("<li></li>"）
//2、創建節點，$("ul").html("<li></li>") 類似js innerHTML 因為此屬性，識別標簽 會覆蓋原來的內容 console.log($("ul").html("<li>我是thml創建的li</li>"))
//不會覆蓋原來的內容 <script> $(document).ready(function(){ var li= $("ul").html(); li+="<li>ss</li>"; $("ul").html(li); }) </script>
添加節點
1、append():在父盒子最后添加一個元素
$("button").click(function(){ //創建一個li標簽對象 var li= $("<li>我是剛創建出來的li對象</li>") // append 在盒子的末尾添加li新對象 $("ul").append(li) }) }
appendTo: 在父盒子最后添加一個元素 （用的少）
li.appendTo($("ul"))
2、perpend 在父盒子最前面添加一個元素
$("ul").prepend(li)
perpendTo 在父盒子最前面添加一個元素
li.prepend("ul")
3、after 操作兄弟元素，添加到兄弟元素最后面
$("li").after(li)
4、before 操作兄弟元素，添加到兄弟元素最前面
清空節點
1、$("元素").html("空字符") 全部清空
$("ul").html("")
2、$("元素").empty()全部清空
$("ul").empty()
3、刪除指定元素 remove 獲取的是兄弟節點
$("li").eq(0).remove()
復制節點
.clone深層復制
$("button").click(function(){ var jqul=$(".box ul").clone(); $(".box").append(jqul) })
案例
動態添加表格
<script> $(function(){ // 模擬從后台拿到的數據 var data = [{ name: "傳智播客", url: "http://www.itcast.cn", type: "IT最強培訓機構" }, { name: "黑馬程序員", url: "http://www.itheima.com", type: "大學生IT培訓機構" }, { name: "傳智前端學院", url: "http://web.itcast.cn", type: "前端的黃埔軍校" }]; //需求：點擊按鈕，然后生成tr里面生成三個td 數組元素個數的tr 然后放入j_tbData腫 //1、綁定事件 $("input").click(function(){ //寫入到click事件腫，每次點擊以后吧str清空 var str=""; //2、利用for循環，把數組中的所有數據組合成一個字符串 for( var i=0; i<data.length; i++){ //data[i]=數字中的每一個json //data[i].name=數組腫的每個json的name屬性值 str+="<tr>" + "<td>"+data[i].name+"</td>"+ "<td>"+data[i].url+"</td>"+ "<td>"+data[i].type+"</td>"+ "</tr>" } //3、把生成的字符串設置為html內容添加進TBODY腫 $("#j_tbData").html(str) }) }) </script> </head> <body> <input type="button" value="獲取數據" id="j_btnGetData" /> <table> <thead> <tr> <th>標題</th> <th>地址</th> <th>說明</th> </tr> </thead> <tbody id="j_tbData"> </tbody> </table> </body>
<script> $(function(){ // 模擬從后台拿到的數據 var data = [{ name: "傳智播客", url: "http://www.itcast.cn", type: "IT最強培訓機構" }, { name: "黑馬程序員", url: "http://www.itheima.com", type: "大學生IT培訓機構" }, { name: "傳智前端學院", url: "http://web.itcast.cn", type: "前端的黃埔軍校" }]; //需求：點擊按鈕，然后生成tr里面生成三個td 數組元素個數的tr 然后放入j_tbData腫 //1、綁定事件 $("input").click(function(){ //寫入到click事件腫，每次點擊以后吧str清空 var str=""; //2、利用for循環，把數組中的所有數據組合成一個字符串 for( var i=0; i<data.length; i++){ //data[i]=數字中的每一個json //data[i].name=數組腫的每個json的name屬性值 str+="<tr>" + "<td>"+data[i].name+"</td>"+ "<td>"+data[i].url+"</td>"+ "<td>"+data[i].type+"</td>"+ "</tr>" } //3、把生成的字符串設置為html內容添加進TBODY腫 $("#j_tbData").html(str) }) }) </script> </head> <body> <input type="button" value="獲取數據" id="j_btnGetData" /> <table> <thead> <tr> <th>標題</th> <th>地址</th> <th>說明</th> </tr> </thead> <tbody id="j_tbData"> </tbody> </table> </body>
動態添加數據
<script> $(document).ready(function(){ //需求 1、點擊按鈕顯示遮罩層和添加數據表格 $("#j_btnAddData").click(function(){ $("#j_mask").show(); $("#j_formAdd").show(); }) //需求 2、點擊里面的關閉按鈕隱藏遮罩層和添加數據表格 $("#j_hideFormAdd").click(function(){ $("#j_mask").hide(); $("#j_formAdd").hide(); }); //需求 3、點擊get所在的標簽，刪除所在的tr $("#j_tb .get").click(function(){ $(this).parent("td").parent("tr").remove() }); //需求 4、點擊里面的添加內容，全部能容這個成嵌套td形式添加到tbody里面 $("#j_btnAdd").click(function() //有點小錯誤 因為原來的內容會被覆蓋掉 /*var str=$("#j_tb").html(); str+="<tr>" + "<td>11</td>" "</tr>" $("#j_tb").html(str);*/ var srt=$("<tr></tr>"); //外單內雙 因為里面用到了雙引號 srt.html('<td>'+$("#j_txtLesson").val() +'</td><td>'+$("#j_ttxBelSch").val()+'</td><td><a href="javascrip:;" class="get">GET</a></td>'); //buy1 內容不能為空 if($("#j_txtLesson").val()==="") { alert("內容不能為空"); return; } $("#j_tb").append(srt); $("#j_mask").hide(); $("#j_formAdd").hide(); //buy2 之前填寫的內容，在關閉后，清空 $("#j_txtLesson").val(""); //buy3 新添加的表格也可以刪除 srt.find("a").click(function(){ srt.remove() }); }) }) </script>
