目的：对web页面（HTML/JSP/XML）中的任何标签，属性，内容进行增删改查
（1）DOM简述与分类
（A）DOM是一种W3C官方标准规则，可访问任何标签语言的页面(HTML/JSP/XML)
（B）DOM是跨平台(window/linux/unix)，跨语言(javascript/java)，
跨浏览器(ie/firefox/Chrome)的标准规则
（C）我们只需要按照DOM标准规则，针对主流浏览器(ie/firefox/Chrome)编程
（D）JS/jQuery按照DOM的标准规则，既可以操作HTML/JSP，也能操作CSS
（E）DOM标准规则不是JS的专属，其它语言，也能适用，例如:VBScript，Java语言等
（2）DOM标准规则下的jQuery常用API，注意：以下方法均由jQuery对象调用
each()：是jQuery中专用于迭代数组的方法，参数为一个处理函数，this表示当前需要迭代的js对象
append()：追加到父元素之后
prepend()：追加到父元素之前
after()：追加到兄弟元素之后
before()：追加到兄弟元素之前
attr(name)：获取属性值
attr(name,value)：给符合条件的标签添加key-value属性对
$("<div id='xxID'>HTML代码</div>")：创建元素，属性，文本
remove()：删除自已及其后代节点
val()：获取value属性的值
val("")：设置value属性值为""空串，相当于清空
text()：获取HTML或XML标签之间的值
text("")：设置HTML或XML标签之间的值为""空串
clone()：只复制样式，不复制行为
clone(true)：既复制样式，又复制行为
replaceWith()：替代原来的节点
removeAttr()：删除已存在的属性
addClass()：增加已存在的样式
removeClass()：删除已存在的样式
hasClass()：判断标签是否有指定的样式，true表示有样式，false表示无样式
toggleClass()：如果标签有样式就删除，否则增加样式
offset()：获取对象的left和top坐标
offset({top:100,left:200})：将对象直接定位到指定的left和top坐标
width()：获取对象的宽
width(300)：设置对象的宽
height()：获取对象的高
height(500)：设置对象的高
children()：只查询子节点，不含后代节点
next()：下一下兄弟节点
prev()：上一下兄弟节点
siblings()：上下兄弟节点
show()：显示对象
hide()：隐藏对象
fadeIn()：淡入显示对象
fadeOut()：淡出隐藏对象
slideUp()：向上滑动
slideDown()：向下滑动
slideToggle()：上下切换滑动，速度快点
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<input type="text" value="xx"/>
<input type="text" value="yy"/>
<input type="text" value="zz"/>
<script type="text/javascript">
alert( $("input").val() );//xx
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<script type="text/javascript">
/*用JS语法创建一个一维数组，存入string类型的姓名，再迭代
var nameArray = new Array("哈哈","呵呵","嘻嘻");
for(var i=0;i<nameArray.length;i++){
document.write(nameArray[i]+"<br/>");
}*/
/*用JSON语法创建一个一维数组，存入string类型的姓名，再迭代
var nameArray = ["哈哈","呵呵","嘻嘻","都都"];//js对象
var $nameArray = $(nameArray);//jquery对象
$nameArray.each(function(){
this表示数组中每一个元素，this属性js对象，this代表string类型
alert(this);
});*/
//用JSON语法创建一个一维数组，存入object类型的姓名和薪水，再迭代
var nameArray = [
{
name : "哈哈",
sal : 6000
},
{
name : "嘿嘿",
sal : 7000
},
{
name : "笨笨",
sal : 8000
}
];
var $nameArray = $(nameArray);
$nameArray.each(function(){
//this代表object类型
alert(this.name + ":"+this.sal);
});
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<hr/>
<div>这是子元素，要插入到父元素内</div>
<script type="text/javascript">
//DIV标签插入到UL标签之后(父子关系)
//$("ul").append( $("div") );
//DIV标签插入到UL标签之前(父子关系)
$("ul").prepend( $("div") );
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<hr/>
<div>这是子元素，要插入到父元素外</div>
<script type="text/javascript">
//DIV标签插入到UL标签之后(兄弟关系)
//$("ul").after( $("div") );
//DIV标签插入到UL标签之前(兄弟关系)
$("ul").before( $("div") );
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<form>
<table>
<tr>
<td>
<input type="text" name="username" value="张三"/>
</td>
<td>
<input type="password" name="password" value="123456"/>
</td>
</tr>
</table>
</form>
<script type="text/javascript">
//取得form里第一个input元素的type属性
//alert( $("form input:first").attr("type") );
//设置form里最后个input元素的为只读文本框
//$("form input:last").attr("readonly","readonly")
//$(":password").attr("readonly","readonly")
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<script type="text/javascript">
//创建div元素，添加"哈哈"文本，ID属性，并添加到文档中
//<body><div id="2015">哈哈</div></body>
/*js方式
var divElement = document.createElement("div");
divElement.innerHTML = "哈哈哈";
divElement.setAttribute("id","2015");
divElement.id = "2015";
document.body.appendChild(divElement);*/
//jquery方式
var $div = $("<div id='2015'>哈哈哈哈哈</div>");
//$("body").append( $div );
$(document.body).append( $div );
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<ul id="a">
<li>第一项</li>
<li id="secondID">第二项</li>
<li>第三项</li>
</ul>
<ul id="b">
<li>第一条</li>
<li id="secondID">第二条</li>
<li>第三条</li>
</ul>
<div>这是div元素</div>
<script type="text/javascript">
//删除ID为secondID的LI元素
//$("#secondID").remove();
//删除所有LI元素
//$("#a li").remove();
//删除UL元素
$("#b").remove();
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<div>
哈哈
</div>
<select id="city">
<option value="地都">北京</option>
</select>
<script type="text/javascript">
//取得<div>中的内容
//alert( $("div").text() );
//取得<option>的值和描述
var $option = $("#city option");
var value = $option.val();
var html = $option.text();
alert(value + ":" + html);
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<input type="button" value="原按钮" onclick="alert('静态事件')"/>
<script type="text/javascript">
//复制原input元素，添加到原input元素后，与其同级
var $old = $(":button");
var $new = $old.clone();
$new.val("新按钮");
$old.after( $new );
//为原input元素动态添加单击事件，且复制原input元素，
//var $old = $(":button");
//$old.click(function(){
// alert("动态事件");
//});
//添加到原input元素后，与其同级，且和原按钮有一样的行为
//var $new = $old.clone(true);
//$new.val("新按钮");
//$old.after( $new );
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<table border="1" align="center">
<tr>
<td>
<div style="165px;height:23px">
双击会被替换成文本框
</div>
</td>
<td>
不会变
</td>
</tr>
</table>
<script type="text/javascript">
//双击<div>中的文本，用文本框替换文本
$("div").dblclick( function(){
var $text = $("<input type='text' style='165px;height:23px'/>");
//文本框替代div标签
$(this).replaceWith( $text );
} );
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<table>
<tr>
<td>
添加属性border/align/width
</td>
<td>
删除属性align
</td>
</tr>
</table>
<script type="text/javascript">
//为<table>元素添加属性border/align/width
var $table = $("table").attr("border","2").attr("align","right").attr("width","60%")
//将<table>元素的align属性删除
$table.removeAttr("align");
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.myClass{
font-size:30px;
color:red
}
</style>
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<div>无样式</div>
<div class="myClass">有样式</div>
<script type="text/javascript">
//为无样式的DIV添加样式
//$("div:first").addClass("myClass");
//为有样式的DIV删除样式
//$("div:last").removeClass("myClass");
//切换样式，即有样式的变成无样式，无样式的变成有样式
//$("div").toggleClass("myClass");
//最后一个DIV是否有样式
var flag = $("div:last").hasClass("myClass");
alert(flag?"有样式":"无样式");
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<img src="../images/zgl.jpg"/>
<script type="text/javascript">
//获取图片的坐标
//var offset = $("img").offset();
//var x = offset.left;
//var y = offset.top;
//alert(x+":"+y);
//设置图片的坐标
//$("img").offset({
// top:100,
// left:200
//});
//获取图片的宽高
//var w = $("img").width();
//var h = $("img").height();
//alert(w+":"+h);
//设置图片的宽高
$("img").width(500);
$("img").height(600);
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<p>Hello</p>
<div>
<span>
Hello Again
<b>
Bold
</b>
</span>
</div>
<p>And Again</p>
<span>And Span</span>
<script type="text/javascript">
//取得div元素的直接子元素内容，不含后代元素
//var $span = $("div").children();
//var content = $span.html();//包含子标签
//var content = $span.text();//不包含子标签
//alert(content);
//取得div元素的下一个同级的兄弟元素内容
//var $p = $("div").next();
//alert( $p.text() );
//取得div元素的上一个同级的兄弟元素内容
//alert( $("div").prev().text() );
//依次取得div元素的上下一个同级的所有兄弟元素的内容
var $all = $("div").siblings("p");
$all.each(function(){
alert( $(this).html() );
});
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<p>
<img src="../images/zgl.jpg"/>
</p>
<script type="text/javascript">
//图片隐蔽
$("img").hide(5000);
//休息3秒
window.setTimeout(function(){
//图片显示
$("img").show(5000);
},3000);
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<p>
<img src="../images/zgl.jpg" style="display:none"/>
</p>
<script type="text/javascript">
//淡入显示图片
$("img").fadeIn(3000);
//淡出隐蔽图片
$("img").fadeOut(3000);
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<div>
中国0<br/>
中国1<br/>
中国2<br/>
中国3<br/>
中国4<br/>
中国5<br/>
中国6<br/>
中国7<br/>
中国8<br/>
中国9<br/>
</div>
<input type="button" value="我的好友"/>
<script type="text/javascript">
//向上下滑动
$(":button").click(function(){
//div标标上下移动
$("div").slideToggle(100);
});
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
<script type="text/javascript">
function myclick(){
//使用jquery弹出奇数的tr标签下的td里的值，即A1,A2,A3,C1,C2,C3
var $tr = $("table tr:NOT(:last):even");
//在每个tr标签中查询td标签
$tr.each(function(){
//在tr标签中查询所有的td标签
var $td = $(this).find("td");
//迭代
$td.each(function(){
var content = $(this).text();
alert(content);
});
});
}
//写出另一种方式，比第一种更加easy
</script>
</head>
<body>
<table border="2" align="center" width="30%">
<tr>
<td>A1</td><td>A2</td><td>A3</td><td>0</td>
</tr>
<tr>
<td>B1</td><td>B2</td><td>B3</td><td>1</td>
</tr>
<tr>
<td>C1</td><td>C2</td><td>C3</td><td>2</td>
</tr>
<tr>
<td>D1</td><td>D2</td><td>D3</td><td>3</td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="button" value=" 测 试 " onclick="myclick()" />
</td>
<td>4</td>
</tr>
</table>
</body>
</html>