<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery DOM</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function() {
$("#test").click(function() {
alert($("#lang li:eq(0)").text()); //查找元素节点
alert($("#lang li:eq(1)").attr("title")); //查找属性节点
$("#lang").append("<li title='C'>C</li>"); //append()向元素内部追加内容
$("#lang").prepend("<li title='VB'>VB</li>"); //prepend()向元素内部前置内容
$("#lang").after("学习啥。。"); //after()元素之后插入内容
$("#lang").before("兴趣"); //before()元素之前插入内容
var $li1 = $("#lang li:eq(0)");
var $li2 = $("#lang li:eq(1)");
var $li3 = $("#lang li:eq(2)");
var $li4 = $("#lang li:eq(3)");
$li2.insertBefore($li1); //移动元素
$li3.insertAfter($li4); //移动元素
var $li = $("#lang li:gt(3)").remove(); //remove()删除元素及所有后代元素
$li.appendTo("#lang"); //把删除元素再添加到ul中
$("#lang li:eq(4)").empty(); //empty()清空元素及所有后代元素
$("#lang").wrap("<div style='border:1px #ccc solid'></div>"); //warp()包裹元素
$("#lang li:eq(0)").attr("title", "鼠标移上来看看。。。"); //设置属性的值
$("#lang li:eq(1)").removeAttr("title"); //删除属性
alert($("#lang").children().length); //children()子元素(不包括后代元素)的集合
alert($("#lang li:eq(1)").next().text()); //next()获取元素后面紧邻的同辈元素
alert($("#lang li:eq(1)").prev().text()); //prev()获取元素前面紧邻的同辈元素
alert($("#lang li:eq(1)").siblings().text()); //siblings()获取元素前后紧邻的同辈元素
$(this).clone(true).appendTo("body"); //复制元素产生一个按钮，ture表示同时复制事件
});
});
</script>
</head>
<body>
<ul id="lang">
<li title="C#">C#</li>
<li title="C++">C++</li>
<li title="Java">Java</li>
</ul>
<input type="button" id="test" value="测试" />
</body>
</html>