现在的年轻人，经历旺盛，每天都熬夜，今天又晚了，现在才更新博客，今天更新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>创建jQuery节点对象
原文地址：http://www.cnblogs.com/wdz1/p/7795769.html