jQuery操作DOM元素案例

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