直接打开注释即可观察效果，都已经测试通过！！！
<!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({"500",height:"100"});
//删除元素的属性
//$("img").removeAttr("width");
})
</script>
<style type="text/css">
#div1{
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>