直接打开注释即可观察效果，都已经测试通过！！！
<!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>
)
)
)