jquery是javscript的程序庫，使用的代碼如下
$(document).ready(function () {
$("#div1").html("hello world");
});
![上面的代碼相當於window.onload，不過跟window.onload還是有一些區別
**$(document).ready()是在DOM結構載入完後執行的，而window.onload是得在所有文件都加載完後執行的，注意區別，一個是DOM加載完，一個是所有文件加載完 .
所謂DOM加載完，就是指DOM模型加載完，也就是指代碼加載完。
兩者最大的區別，就是DOM加載完之後，不必再去等相應的圖片加載完就可以執行JS代碼了。**
一個小例子說明jquery的書寫流程，實現點擊高亮顯示，子元素顯示，相鄰元素隱藏。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function(){
/*$(".level1>a")：[parent>child],class 爲level1下的子元素a即
（<li class="level1"> <a href="#none">襯衫</a>）
（<li class="level1"> <a href="#none">襯衫</a>）
（<li class="level1"> <a href="#none">襯衫</a>）
後面的都隱藏。
*/
$(".level1>a").next().hide();
//點擊事件。
$(".level1>a").click(function(){
//點擊當前內容添加一個樣式 high;
$(this).addClass("high")
/*找到每個段落的後面緊鄰的同輩元素顯示; 即<a href="#none">襯衫</a>後面的<ul>標籤顯示；
*/
.next().show()
/*父元素(就是<li class="level1">xxxxxx</li>)的同輩元素的子元素<a>移除樣式"high"。 */
.parent().siblings().children("a").removeClass("high")
//找到每個段落的後面緊鄰的同輩元素隱藏;
.next().hide()
//阻止跳轉
return false;
})
});
</script>
<style type="text/css">
.high{
color:red;
}
ul li{
list-style-type:none;
}
a{
text-decoration:none;
}
.level2{
}
</style>
</head>
<body>
<div class="box">
<ul class="menu">
<li class="level1"> <a href="#none">襯衫</a>
<ul class="level2">
<li><a href="#none" style="">短袖襯衫</a></li>
<li><a href="#none">長袖襯衫</a></li>
<li><a href="#none">短袖T恤</a></li>
<li><a href="#none">長袖T恤</a></li>
</ul>
</li>
<li class="level1"> <a href="#none">衛衣</a>
<ul class="level2">
<li><a href="#none">開襟衛衣</a></li>
<li><a href="#none">套頭衛衣</a></li>
<li><a href="#none">運動衛衣</a></li>
<li><a href="#none">童裝衛衣</a></li>
</ul>
</li>
<li class="level1"> <a href="#none">褲子</a>
<ul class="level2">
<li><a href="#none">短褲</a></li>
<li><a href="#none">休閒褲</a></li>
<li><a href="#none">牛仔褲</a></li>
<li><a href="#none">免燙卡其褲</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>