快捷導(dǎo)航

最簡(jiǎn)單的jQuery程序入門者學(xué)習(xí)

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

用jQuery寫(xiě)的一個(gè)簡(jiǎn)單的程序,用于入門練習(xí),發(fā)給大家,希望初學(xué)者有用.

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

為了測(cè)試一下這些選擇器，我們來(lái)試著在我們starterkit.html中選擇并修改第一個(gè)ordered list.

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

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

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

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

現(xiàn)在我們?cè)僮鰝€(gè)復(fù)雜一點(diǎn)的，當(dāng)把鼠標(biāo)放在li對(duì)象上面和移開(kāi)時(shí)進(jìn)行樣式切換，但只在list的最后一個(gè)element上生效。

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

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