这一篇是接着上一篇来写的，因为上一篇还剩下一点东西没写完。另外还需要说一点就是一般我们所说的DOM仅仅是指HTML的DOM，其实实际上还有一种DOM那就是是CSS的DOM。但是一般情况下我们并不提及这个概念，而是全部称为DOM。其实概念性的东西知道就可以了，没必要深究，重要的是如何去运用。
通过上一篇我们了解操作HTMLDOM的各种方法：插入、创建、删除和遍历以及设置一些属性和获取属性。那么对于遍历DOM呢，还有一些jQuery提供的一些方法，那就是获取获取父节点、子节点、下一个节点和前一个节点。那这些方法呢你可以通过API来查看并且熟悉它，这些方法如下：
（1）获取父节点：parent()
（2）获取子节点：children()
（3）获取兄弟节点：siblings()
（4）获取下一个节点：next()
（5）获取前一个节点：prev()
另外我们有一个测试方法，就是通过获取节点的长度来判断我们获取的是否是需要的，获取查看获取到节点的html来验证获取的节点是否是正确的，那这里就用到了一个属性和一个方法：length和html()
上面这些是没有必要详细说的，因为API上面已经很详细了，那接下来我们就主要说说CSS的DOM。
对于CSS的DOM呢，jQuery已经全部将操作它们的方法封装起来了，那么我们需要的就是学习如何去灵活的运用这些方法，然后做出我们需要的一些效果。
那最基本的CSSDOM操作就是获取和设置节点的CSS样式。当然你也可以通过我们前面说的addClass()方法来做这些，而且我们一般如果节点的显示样式单一的话是推荐这么做的，但是对于一些动画的话，那就需要用到了CSS的DOM操作方法，下面就将这些方法列出来，我并不打算详细的说，因为我一直说看API是每一个程序员的基本功。
1，CSSDOM基本方法，整个代码如下：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>遍历节点</title>
<style type="text/css">
*{ margin:0; padding:0;}
#div1{ position:relative; left:10px; width:100px; height:100px; background:#F00; border:1px solid #0C0; padding:10px; margin:5px; opacity:0.6; filter:alpah(opacity=60);}
</style>
</head>
<body>
<input type="button" id="but1" value="开始运动" />
<div id="div1">这是个div</div>
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var oDiv = $("#div1");
alert( oDiv.css("width") ); //100px; 实际宽度
alert( oDiv.css("opacity") ); //0.6
oDiv.css("height", "200px");
var oFfset = oDiv.offset();
alert( oFfset.left ); //实际左边距 15
var oPosition = oDiv.position();
alert( oPosition.left ); //偏移量 10
});
</script>
</body>
</html>
那么上面看到的这些方法中比较需要注意的就是获取节点的offset值，因为我们在做动画中这个值是常用的，所以需要记忆一下。
另外三个需要注意的值就是通过jQuery获取页面的宽度、高度；屏幕的宽度、高度；页面向上滚动的高度，因为这些值也是动画中常用的，方法如下：
<script type="text/javascript">
$(document).ready(function(e) {
alert( $(document).scrollTop() ); //滚动的高度 : 这里需要结合scroll事件才有效果
alert( $(window).height() ); //屏幕的高度
alert( $(document.body).height() ); //页面的高度
});
</script>
那么通过上面已经上一篇的介绍，相信如果你有认真实践的话那对于jQuery可能已经熟悉了，而且上面那些你都已经掌握的狠好了。那下面就运用下这两篇说的DOM已经动画函数animate()做一个简单的实例，什么呢？就是常用的那种右边栏随着屏幕的滚动而滚动但是永远处于屏幕的中间位置，下面就是这个小特效的源码，可以直接用：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>遍历节点</title>
<style type="text/css">
*{ margin:0; padding:0;}
#div1{ position:absolute; right:0; top:30px; width:100px; height:100px; background:#F00; opacity:0.6; filter:alpah(opacity=60);}
</style>
</head>
<body style="height:1200px;">
<div id="div1">这是个div</div>
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
var oDiv = $("#div1");
var oP = $("p1");
var h = $(window).height() - parseInt(oDiv.width());
oDiv.css("top", h/2+"px");
window.onscroll = function() {
var sT = $(document).scrollTop();
var hh = sT+($(window).height() - parseInt(oDiv.width()))/2;
oDiv.stop(true).animate({"top" : hh+"px"}, "slow");
}
});
</script>
</body>
</html>
好，那jQuery操作DOM就通过两篇介绍完了，但是真正的核心不是说你知道了多少，而是你会用多少，而且这个用是没有什么捷径可以走的，只有多实践。祝每一个看到这些的人呢，能够学习的很好，然后希望你们能跟我交流，有什么问题可以在下面的评论里面提出来，因为我觉得有些问题你不说觉得自己不会可能你说了就觉得没那么难了，可能卡住你的，仅仅是一个点而已。
希望大家积极的生活，加油！！
每天说一句：每一个程序员都应该具备用清晰的代码描述复杂问题的能力。大家一起加油努力吧，O(∩_∩)O~
请称呼我：Koma