创建jQuery节点对象
现在的年轻人，经历旺盛，每天都熬夜，今天又晚了，现在才更新博客，今天更新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>
