<!DOCTYPE html> <html> <head> <title>test3.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ //插入子节点：append,appendTo,prepend,prependTo var newNode = $("<li>千与千寻</li>"); //$("ul").append(newNode); //newNode.appendTo($("ul")); //$("ul").prepend(newNode); //newNode.prependTo($("ul")); //插入同辈节点：after,insertAfter,before,insertBefore //$("ul").after(newNode); //$(newNode).insertAfter($("ul")); //$("ul").before($(newNode)); //$(newNode).insertBefore($("ul")); //替换节点：replaceWith,replaceAll //$("ul li:eq(1)").replaceWith($(newNode)); //$("ul li:eq(1)").replaceWith($(newNode)); //$("ul li").replaceWith($(newNode)); //复制节点：clone //$("ul li:eq(1)").clone(true).appendTo("ul"); //删除节点：remove(删除的是引用),detach,empty /* $("ul li:eq(1)").click(function(){ var $li = ("ul li:eq(1)").remove(); $li.appendTo("ul"); }); */ //$("ul li:eq(1)").detach(); //$("ul li:eq(1)").empty(); //获取与设置节点属性attr(),removeAttr() //$("img").attr({"100px",heigth:"100px"}); alert($("img").removeAttr("name")); }); </script> </head> <body> <p>热门动画</p> <ul> <li>海贼王</li> <li>死神</li> <li>柯南</li> </ul> <img src="../images/6.jpg" name="this is a picture" > </body> </html>
<!DOCTYPE html> <html> <head> <title>test4.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ //获得所有元素的子元素 //$("body").css({background:"red"}); //遍历所有子元素：next([expr]),prev([expr]),slibings([expr]) //下一个同辈元素 //$("#div3").next().css({background:"red"}); //前一个同辈元素 //$("#div4").prev().css({background:"red"}); //前面和后面的同辈元素 //$("#div4").slibings().css({background:"red"}); //遍历前辈元素：parent(父辈元素),parents(祖先元素) //$("#div4").parent().css({background:"red"}); //$("#div4").parents().css({background:"red"}); }); </script> </head> <body> <div id="div1" style="550px;height:550px;border:1px solid"> <div id="div2" style="304px;height:304px;border:1px solid"> <div id="div3" style="100px;height:100px;border:1px solid"></div> <div id="div4" style="100px;height:100px;border:1px solid"></div> <div id="div5" style="100px;height:100px;border:1px solid"></div> </div> <br> <div style="200px;height:200px;border:1px solid"> <div style="100px;height:100px;border:1px solid"></div> </div> </div> </body> </html>