直接打开注释即可观察效果，都已经测试通过！！！
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>操作DOM元素</title> <script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ //直接设置样式 //$("#div1").css("color","red"); //同时设置多个属性 //$("#div1").css({"color":"red","background":"pink"}); //addClass //$("#div1").addClass("div1_style"); //removeClass //$("#div1").removeClass("div1_style"); //内容操作，html方法，会解析标签 /*$("#div1").html("<span style='color:purple'>这是添加的紫色的东西</span>");*/ /*alert($("#div1").html());*/ //text方法，直接就输出来了 // $("#div1").text("<span style='color:purple'>这是添加的紫色的东西</span>"); /*alert($("#div1").text());*/ //获取表单的值 //$("#name").val(); //给表单里面赋值 //$("#name").val("1111"); //节点遍历 //获取节点并隐藏 //$("div").hide(); //创建节点： //var $newNode = $("<li>这是一个li</li>");//创建一个空的li节点 //内部插入 //向div里面插入创建的节点(内部的元素) //$("#div1").append($newNode); //把所选择的元素追加到另一个元素里面 //$("#div1").prepend($newNode); //将新元素插入到选择的前面 //$("#div1").prepend($newNode); //prependTo与prepend效果一样，用法有差别 //$($newNode).prependTo("#div1"); //外部插入 //after,将元素插入到选择的后面(外面) //$("#div1").after($newNode); //insertAfter()与after的效果是一样的，用法不一样 //$($newNode).insertAfter("#div1"); //给选中元素的前面插入 //$("#div1").before($newNode); //insertBefore，与before的效果一样，但是用法不一样 //$($newNode).insertBefore("#div1"); //删除节点 //$("li").remove(); //删除节点的第二种方法 //$("li").empty(); //替换节点replaceWith //$("li:eq(0)").replaceWith($newNode); //替换节点replaceAll //$($newNode).replaceAll("li:eq(1)"); //复制节点 //$("li:eq(1)").clone(true).appendTo("ul"); //属性操作 //1.获取属性 //alert($("#name").attr("type")); //2.设置属性的值(设置表单不管用，设置图片可以) //$("img").attr({width:"500",height:"100"}); //删除元素的属性 //$("img").removeAttr("width"); }) </script> <style type="text/css"> #div1{ width: 200px; height: 200px; border: 1px solid black; } .div1_style{ font-size: 50px; } </style> </head> <body> <div id="div1"> div1 </div> 用户名：<input id="name" type="text" name="text" /> <ul> <li>第一个li</li> <li>第二个li</li> <li>第三个li</li> <li>第四个li</li> <li>第五个li</li> </ul> <img src="img/img1.jpg" width="300" height="500"/> </body> </html>
