|
|
<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");
});
});還有大量的類(lèi)似的CSS和XPath例子，更多的例子和列表可以在這里找到。（譯者Keel注：入門(mén)看此文，修行在個(gè)人，要想在入門(mén)之后懂更多，所以這段話(huà)的幾個(gè)鏈接遲早是要必看的！不會(huì)又要翻譯吧...^_^!）
每一個(gè)onXXX事件都有效，如onclick,onchange,onsubmit等，都有jQuery等價(jià)表示方法（譯者Keel注：jQuery不喜歡onXXX，所以都改成了XXX，去掉了on）。
JavaScript技術(shù)：最簡(jiǎn)單的jQuery程序 入門(mén)者學(xué)習(xí)，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
