上节讲解了jQuery的选择器，基本都掌握了，现在再讲解一下jQuery的Dom操作。
1、查找节点
1.1 查找元素节点
var $li = $("ul li:eq(1)"); //获取<ul>里第二个<li>节点。
var li_txt = $li.text(); //获取第二个<li>元素节点的文本内容。
alert(li_txt);
1.2查找属性节点
jQuery选择器找到所需元素之后，就可以使用attr()方法来获取它的各种属性值。attr()的参数可以是一个，可以是两个。一个表示取值，两个表示赋值。
var $para = $("p"); //获取<p>节点
var p_txt = $para.attr("title"); //获取<p>元素节点属性title
alert(p_txt);
2、创建节点
2.1创建元素节点
例如要创建两个<li>元素节点，并且要把它们作为<ul>元素节点的子节点添加到DOM节点树上。完成这个任务需要两个步骤。
(1)创建两个<li>新元素
(2)将这两个元素插入文档中。
第(1)个步骤可以用jQuery的工厂函数$()来完成，格式如下：
$(html);
$(html)方法会根据传入的html标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回。
首先创建两个<li>元素，如下：
var $li_1 = $("<li></li>");
var $li_2 = $("<li></li>");
插入元素：
$("ul").append($li_1);
$("ul").append($li_2);或者用如下写法：$("ul").append($li_1).append($li_2);
2.2创建文本节点
var $li_1 = $("<li>香蕉</li>");
var $li_2 = $("<li>雪梨</li>");
其他的同2.1
2.3创建属性节点
var $li_1 = $("<li title=’香蕉‘>香蕉</li>");
var $li_2 = $("<li title='雪梨'>雪梨</li>");
其他的同2.1
3、插入节点
动态的创建HTML元素并没有什么实际用处，还需要将新创建的元素插入到文档中去，前面已经介绍了一种append(),其实还有很多插入方法。
主要有四对方法处理，其实都很简单，很好记。如下：
append()和appendTo()：向每个匹配元素的内部追加内容，指的是后部。
prepend()和prependTo()：向每个匹配元素内部前置内容，指的是前部。
after()和insertAfter()：在每个匹配元素后部插入内容，指的是同级后面。
before()和insertBefore()：在每个匹配元素前部插入内容，指的是同级前面。
4、删除节点
如果文档中某一个元素多余，那么应该删除。jQuery提供了两种删除节点的方法，及remove()和empty()。
4.1remove()方法
var $li = $("ul li:eq(1)").remove(); //获取第二个<li>元素节点后，将它从网页上删除。
其返回值是一个指向已被删除的节点的引用，因此可以在以后继续使用这些元素。
$li.appendTo("ul"); //把刚才删除的节点又重新添加到<ul>元素里。
以上代码可以简写如下：
$("ul li:eq(1)").appendTo("ul"); //用来移动元素，移动元素首先删除元素，然后再插入。
remove()还可以添加参数,如下：
$("ul li").remove("li[title!=萝卜]");
4.2empty()方法
严格讲，empty()并不删除节点，只是清空节点，它能清空元素中的所有后代节点。
5、复制节点
clone()和clone(true)，复制节点后，被复制的新元素并不具有任何行为。如果需要新元素有具有复制功能，则使用clone(true)
$("ul li").click(function(){
$(this).clone().appendTo("ul");//复制当前节点，并将它追加到<ul>元素中。
});
6、替换节点
如果要替换某个节点，jQuery提供了相应的方法，即replaceWith()和replaceAll()。
$("p").repaceWith("<strong>你最不喜欢的水果是？</strong>"); //将所有匹配的元素都替换成指定的HTML或者DOM元素。
$("<strong>你最不喜欢的水果是？</strong>").repalceAll("p"); //和上面是一对操作。
7、包裹节点
使用wrap()和wrapAll()方法可以实现：
$("strong").wrap("<b></b>"); //把每一个<strong>都用一个<b>包围起来，有几个包几个
$("strong").wrapAll("<b></b>"); //整体包裹
warpInner()方法，包裹元素的子内容（包括文本节点）
8、属性操作
在jQuery中，用attr()方法来获取和设置元素属性，removeAttr()方法来删除元素属性。
8.1获取和设置属性
attr()一个参数表示获取属性值，两个参数表示设置属性值，前面讲过。
$("p").attr("title","your title");
还可以设置多值，$("p").attr({"title":"your title","name":"test"})
jQuery中很多方法都是同一个函数实现获取（getter）和设置（setter）的，例如上面的attr()方法，既能设置元素属性的值，也能获取元素属性的值，类似的还有
html()、text()、height()、width()、val()和css()等方法。
8.2删除属性
$("p").removeAttr("title");
9、样式操作
9.1获取样式和设置样式
var p_class = $("p").attr("class"); //获取<p>元素的class
也可以用attr来设置<p>元素的class，jQuery代码如下：
$("p").attr("class","high"); //此代码的作用是将原来的class替换为新的class，而不是在原有的基础上追加新的class，追加的如下。
9.2追加样式
使用addClass();
$("p").addClass("another"); //给<p>元素追加”another“类，此时一共有两个样式了。
9.3移除样式
使用removeClass()来完成，当有参数时removeClass("another"),则移除指定的样式，还有removeClass("high another");移除两个样式
当没有参数时则表明移除该元素的所有样式。
9.4切换样式
之前有toggle()方法
$toggleBtn.toggle(function(){
//show code
},function(){
//hide code
});
这里有toggleClass方法，控制样式的转换。如果类名存在则删除它，如果类名不存在则添加它。
$("p").toggleClass("another"); //重复切换类名"another"
9.5判断是否含有某个样式
hasClass(”another“); 其实其内部是使用is(".another")来实现的，这样做只是增加了可读性。
10、设置和获取HTML、文本和值
主要有如下方法：
html() 对应javaScript的innerHTML属性
text() 对应javascript的innerText属性，firefox不支持innerText属性
val()方法focus()、blur()方法
val()除了取值和设置之外，还可以给select checkbox 和radio选中值，jQuery的val()的原则是从最后一个往前读，value和text值
this.defaultValue方法。
11、遍历节点
11.1children()方法
遍历所有的子节点。
11.2next(),pre(),siblings()
closest()取得最近的匹配元素。
12、CSS-DOM操作
$("p").css("color");//获取颜色属性
$("p").css("color","red");//设置颜色
$("p").css({"fontSize"："30px"，”backgroundColor“：”#888888“});//同时设置多个样式。
有两个注意点：
(1)如果值是数字，将会被自动转化为像素值。
(2)在css()方法中，如果属性中带有”-“符号，例如font-size和background-color属性，用驼峰式写法。
hight().width();
offset() .left .top 获取元素在当前视窗的偏移量，返回值对象包含两个属性left和top。
position() .left .top 获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的偏移量。
scrollTop() 、scrollLeft()方法。分别获取元素的滚动条距顶端的距离和距左侧的距离。也可以设置值。scrollTop(300)
下面是个经典的例子：鼠标移过图片，图片放大
<html>
<head>
<title>jQuery DOM test</title>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function(e){
//alert("over");
this.myTitle = this.title;
this.title = "";
var imgTitle = this.myTitle ? "<br/>"+this.myTitle : "";
var tooltip = "<div id='tooltip'><img src='" + this.href +"' alt='产品预览图'/>"+imgTitle+"</div>";
$("body").append(tooltip);
$("#tooltip").css({"top":(e.pageY + y)+"px","left":(e.pageX + x)+"px"}).show("fast");
}).mouseout(function(){
this.title = this.myTitle;
$("#tooltip").remove();
});
});
</script>
</head>
<body>
<div>
<ul style="list-style:none;">
<li style="display:inline"><a href="img/ipod.jpg" class="tooltip" title="苹果ipod" ><img src="img/ipod.jpg" alt="苹果ipod" style="width:150px; height:150px"/></a></li>
<li style="display:inline"><a href="img/iphone.jpg" class="tooltip" title="苹果iphone"><img src="img/iphone.jpg" alt="苹果iphone" style="width:150px; height:150px"/></a></li>
<li style="display:inline"><a href="img/ipad.jpg" class="tooltip" title="苹果ipad"><img src="img/ipad.jpg" alt="苹果ipad" style="width:150px; height:150px"/></a></li>
<li style="display:inline"><a href="img/air.jpg" class="tooltip" title="苹果air"><img src="img/air.jpg" alt="苹果air" style="width:150px; height:150px"/></a></li>
</ul>
</div>
</body>
</html>
注意其中的li的横向排列方法还有其他的方法使其横向排列：
方法一：直接带<li>里面加样式来实现
<ul style=list-style:none;>
<li style="display:inline">我要横向排列</li>
<li style="display:inline">Hier of chsfish </li>
</ul>
方法二：通过定义ul li 来实现
ul{
list-style-type:none;
width:100%;
}
ul li{
width:80px;
float:left;
}
<ul>
<li>我要横向排列</li>
<li>Hier of chsfish </li>
</ul>
方法三：通过定义li的CSS来实现
<style type="text/css">
<!--
li {
background-color: #CCCCCC;
text-align: center;
float: left;
width: 70px;
margin: 3px;
padding: 3px;
list-style-type: none;
}
-->
</style>
<ul>
<li>Text1Text1Text1</li>
<li>Text2Text2Text2</li>
<li>Text3Text3Text3</li>
<li>Text4Text4Text4</li>
<li>Text5Text5Text5</li>
<li>Text6Text6Text6</li>
</ul>