快捷導航

最簡單的jQuery程序入門者學習

更新時間：2009年07月09日 23:29:07 作者：

用jQuery寫的一個簡單的程序,用于入門練習,發(fā)給大家,希望初學者有用.

<HTML> 
<HEAD> 
<STYLE type='text/css'> 
.css1{ 
display:block; 
width:100px; 
height:100px; 
background-color:blue; 
} 
.css2{ 
display:block; 
width:100px; 
height:100px; 
background-color:red; 
} 
</STYLE> 
</HEAD> 
<BODY> 
<a href='#' class='css1' id=freee>tt</a> 
<script src='jquery-1.3.2.js'> 
</script> 
<script> 
$(document).ready(function(){ 
$("#freee").hover(function(){ 
$(this).addClass("css2"); 
}, function(){ 
$(this).removeClass("css2"); 
}); 
}); 
</script> 
</BODY> 
</HTML> 

Find me:使用選擇器和事件
jQuery提供兩種方式來選擇html的elements，第一種是用CSS和Xpath選擇器聯(lián)合起來形成一個字符串來傳送到j(luò)Query的構(gòu)造器（如：$("div > ul a")）；第二種是用jQuery對象的幾個methods(方法)。這兩種方式還可以聯(lián)合起來混合使用。

為了測試一下這些選擇器，我們來試著在我們starterkit.html中選擇并修改第一個ordered list.

一開始，我們需要選擇這個list本身，這個list有一個ID叫“orderedlist”，通常的javascript寫法是document.getElementById("orderedlist").在jQuery中，我們這樣做：

$(document).ready(function() {
$("#orderedlist").addClass("red");
});這里將starterkit中的一個CSS樣式red附加到了orderedlist上(譯者Keel注：參考測試包中的css目錄下的core.css，其中定義了red樣式)。因此，在你刷新了starterkit.html后，你將會看到第一個有序列表(ordered list )背景色變成了紅色，而第二個有序列表沒有變化.

現(xiàn)在，讓我們添加一些新的樣式到list的子節(jié)點.

$(document).ready(function() {
$("#orderedlist > li").addClass("blue");
});這樣，所有orderedlist中的li都附加了樣式"blue"。

現(xiàn)在我們再做個復雜一點的，當把鼠標放在li對象上面和移開時進行樣式切換，但只在list的最后一個element上生效。

$(document).ready(function() {
$("#orderedlist li:last").hover(function() {
$(this).addClass("green");
}, function() {
$(this).removeClass("green");
});
});還有大量的類似的CSS和XPath例子，更多的例子和列表可以在這里找到。（譯者Keel注：入門看此文，修行在個人，要想在入門之后懂更多，所以這段話的幾個鏈接遲早是要必看的！不會又要翻譯吧...^_^!）

每一個onXXX事件都有效，如onclick,onchange,onsubmit等，都有jQuery等價表示方法（譯者Keel注：jQuery不喜歡onXXX，所以都改成了XXX，去掉了on）。