【jQuery】(3)---Jquery操作Dom
1 内部插入节点
1 <body> 2 <ul id="city"> 3 <li id="bj" name="beijing" >北京</li> 4 <li id="tj" name="tianjin"> 天津</li> 5 <li id="cq" name="chongqing">重庆</li> 6 </ul> 7 8 <ul id="love"> 9 <li id="fk" name="fankong" >反恐</li> 10 <li id="xj" name="xingji">星际</li> 11 </ul> 12 13 <script type="text/javascript"> 14 // $("#city").append($("#fk")); //将防恐标签位置移到了重庆下面 append向每个匹配的元素的内部的结尾处追加内容 15 // $("#fk").appendTo($("#city")); //效果和上面一样 appendTo将每个匹配的元素追加到指定的元素中的内部结尾处 16 // $("#city").prepend($("#fk")); //将将防恐标签位置移到了北京上面 prepend向每个匹配的元素的内部的开始处插入内容 17 // $("#fk").prependTo($("#city")); //效果和上面一样 prependTo将每个匹配的元素插入到指定的元素内部的开始处 18 </script> 19 </body>
2.创建节点和删除节点
1 <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script> 2 <body> 3 <ul id="city"> 4 <li id="bj" name="beijing" >北京</li> 5 <li id="tj" name="tianjin"> 天津</li> 6 <li id="cq" name="chongqing">重庆</li> 7 </ul> 8 9 <script type="text/javascript"> 10 var $hz=$("<li></li>"); //创建<li></li> $("<li></li>")代表创建元素 11 $hz.attr("id","hz"); //添加属性<li id="hz" name="hangzhou"></li> attr代表添加元素 12 $hz.attr("name","hangzhou"); 13 $hz.text("杭州"); //添加文本 text代表添加文本 14 $("#city").append($hz); //把节点挂载到父节点下即可 15 16 //移除节点信息 17 var $cq=$("#cq").remove(); //可以获得移除节点 的元素 remove()代表删除节点 18 //移除属性信息 19 alert($cq.attr("name")); //移除属性信息 attr（"name"）,如果只有一个属性就代表通过name值得到属性名，这里得到chongqing 20 $("#city").empty(); ////清空节点 21 </script> 22 </body>
3.复制节点
1 <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script> 2 <body> 3 <button>保存</button> 4 <p>段落</p> 5 <script type="text/javascript"> 6 $("button").click(function(){ 7 alert("点击按钮"); 8 }); 9 //克隆节点，不克隆事件 10 $("button").clone().appendTo($("p")); //相当于把第三行的button按钮复制到了p标签的后面 11 //克隆节点，克隆事件 12 $("button").clone(true).appendTo($("p")); //clone(true)里面添加true代表也克隆事件，因为上面有两个button按钮，所以两个都会被复制 13 </script> 14 </body>
4.替换节点
1 <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script> 2 <body> 3 <p>段落</p> 4 <button>登陆</button> 5 <script type="text/javascript"> 6 //replaceWith和replaceAll的功能完全相反， 7 // $("p").replaceWith("<button>登陆</button>"); //把p标签换成button按钮 8 // $("p").replaceAll("<button>登陆</button>"); //按照道理是把button标签变成p标签，但没有实现功能 9 </script> 10 </body>
