快捷導(dǎo)航

瘋狂Jquery第一天(Jquery學(xué)習(xí)筆記)

更新時(shí)間：2012年05月11日 14:37:40 作者：

之前一直學(xué)習(xí)，現(xiàn)在終于有時(shí)間來整理一下文檔了。以下文章都是自己學(xué)習(xí)Jquery 的筆記，希望能留下痕跡，也希望能幫助到您

好了開始我的Jquery第一天。
我也是從Hello wrod!開始的。關(guān)于jquery 的引用我直接一筆帶過。如下：

 
<html> 
<head> 
<title>jquery 鏈?zhǔn)讲僮?lt;/title> 
<script type="text/javascript" src="jquery-1.3.1.js"></script> 
<script type='text/javascript'> 
$(document).ready(function(){ 
alert("hello word!"); 
//靜止右鍵點(diǎn)擊 
// $(document).bind("contextmenu",function(e){ 
// return false; 
// }); 
}); 
</script> 
</head> 
<body> 
</body> 
</html> 

接下來讓我們來看看一個(gè)復(fù)雜的實(shí)例，這個(gè)實(shí)例讓我們知道什么是：jquery的鏈?zhǔn)讲僮鳎?
我用 . 來連接jquery 的鏈?zhǔn)讲僮鳌?
可能有的人剛開始學(xué)query ，看起來比較陌生，在后面的瘋狂Jquery 中我會一一解釋。慢慢的你就會明白。

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<title>Jquery 鏈?zhǔn)讲僮?lt;/title> 
<script type="text/javascript" src="jquery-1.3.1.js"></script> 
<style type="text/css"> 
#menu {width:300px} 
.has_children { 
background:#555;color:#fff;cursor:pointer; 
} 
.highligt{color:#fff;background:green;} 
div{padding:0;margin:0px;} 
div a { 
background:#888;display:none;float:left;width:300px; 
} 
</style> 
<script type='text/javascript'> 
$(document).ready(function(){ 
// alert("給所有目錄添加click 事件"); 
$(".has_children").click(function(){ 
$(this).addClass('highligt') //為當(dāng)前元素添加highligt類。 
.children("a").show().end() //將子節(jié)點(diǎn)的<a>元素顯示出來。并且重新定位到上次操作的元素 
.siblings().removeClass("highligt") //獲取同級的元素。(或兄弟元素)，并且去掉他們highligt類 
.children("a").hide(); //將同級的元素，兄弟元素下的<a> 元素隱藏 
}); 
}); 
</script> 
</head> 
<body> 
<div id='menu'> 
<div class='has_children'> 
<span>第一章 認(rèn)識Jquery</span> 
<a>1.1 Javascript 和 Javascript庫</a> 
<a>1.2 加入Jquery</a> 
<a>1.3 編寫簡單的Jquery 代碼</a> 
<a>1.4 Jquery對象 和 Dom對象</a> 
<a>1.5 解決Jquery 和其他庫的沖突</a> 
<a>1.6 Jquery 開發(fā)工具和插件</a> 
<a>1.7 小結(jié)</a> 
</div> 
<div class='has_children'> 
<span>第二章 Jquery選擇器</span> 
<a>2.1 Jquery 選擇器是什么？</a> 
<a>2.2 Jquery 選擇器的優(yōu)勢？</a> 
<a>2.3 Jquery 選擇器</a> 
<a>2.4 應(yīng)用Jquery改寫實(shí)例</a> 
<a>2.5 選擇器中的一些注意事項(xiàng)</a> 
<a>2.6 案例研究————類似淘寶品牌列表的效果</a> 
<a>2.7 還有其他選擇器嗎？</a> 
<a>2.8 小結(jié)</a> 
</div> 
<div class='has_children'> 
<span>第三章 Jquery中的DOM操作</span> 
<a>3.1 DOM的操作分類</a> 
<a>3.2 Jquery 中的DOM操作</a> 
<a>3.3 案例研究————某網(wǎng)站的超鏈接和圖片效果</a> 
<a>3.4 小結(jié)</a> 
</div> 
</div> 
</body> 
</html> 