jQuery 絕對(duì)入門第1/2頁(yè)

更新時(shí)間：2009年04月15日 19:51:44 作者：

對(duì)于想學(xué)習(xí)jquery 的朋友可以看下這樣的入門級(jí)文章。

1．jQuery GO
jQuery 提供了功能強(qiáng)大的讀取和處理文檔DOM的方式,為動(dòng)態(tài)操作文檔DOM提供了方便。

$(document).ready(function() { 
$("a").click(function() { 
alert("Hello world!"); 
}); 
}); 

單擊文檔中任一個(gè)連接都會(huì)觸發(fā)alert() 事件
$號(hào)是 jQuery類的一個(gè)別稱，因此$()構(gòu)造了一個(gè)新的jQuery 對(duì)象。函數(shù) click() 是這個(gè)jQuery對(duì)象的一個(gè)方法，它綁定了一個(gè)單擊事件到所有選中的標(biāo)簽(這里是所有的a標(biāo)簽),并在事件觸發(fā)時(shí)執(zhí)行了它所提供的alert方法. 這樣的使用編碼更有結(jié)構(gòu)與行為分開(kāi)的感覺(jué)。
2．選擇器和事件
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)混合使用

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

<ul id=”orderedlist”> 
<li>食品</li> 
<li>服裝</li> 
<li>電子</li> 
</ul> 

使用jQuery 查找文檔中的ul如下：取代js document.getElementById(‘orderlist');

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

$(document).ready(function() { 
$("#orderedlist").addClass("red"); 
}); 

$(“#..”)的方式可以找到指定ID的元素。
為其子節(jié)點(diǎn)添加樣式，如下：

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

$(document).ready(function() { 
$("#orderedlist > li").addClass("blue"); 
}); 

在鼠標(biāo)移到或移開(kāi)<li>項(xiàng)時(shí)樣式切換,如下：

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

$(document).ready(function() { 
$("#orderedlist li:last").hover(function() { 
$(this).addClass("green"); 
}, function() { 
$(this).removeClass("green"); 
}); 
}); 

$(#orderedlist li) 與 $(“#orderedlist > li”) 的區(qū)別，前者是父元素下所有匹配的子元素，后都僅是其子元素中匹配的元素。

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

$(document).ready(function() { 
$("#orderedlist").find("li").each(function(i) { 
$(this).html( $(this).html() + " BAM! " + i ); 
}); 
}); 

find() 讓你在已經(jīng)選擇的element中作條件查找,因此 $("#orderedlist).find("li") 就像 $("#orderedlist li")一樣。each()方法迭代了所有的li，并可以在此基礎(chǔ)上作更多的處理。大部分的方法,如addClass(), 都可以用它們自己的 each() 。在這個(gè)例子中, html()用來(lái)獲取每個(gè)li的html文本, 追加一些文字，并將之設(shè)置為li的html文本
一個(gè)ajax 方式提交后的重置表單的操作，如下：

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

$(document).ready(function() { 
// use this to reset a single form 
$("#reset").click(function() { 
$("#form")[0].reset(); 
}); 
}); 

當(dāng)然可以重置個(gè)表單

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

$(document).ready(function() { 
// use this to reset several forms at once 
$("#reset").click(function() { 
$("form").each(function() { 
this.reset(); 
}); 
}); 
}); 

過(guò)濾選擇器
還有一個(gè)你可能要面對(duì)的問(wèn)題是不希望某些特定的元素被選擇。jQuery 提供了filter() 和not() 方法來(lái)解決這個(gè)問(wèn)題。 filter()以過(guò)濾表達(dá)式來(lái)減少不符合的被選擇項(xiàng), not()則用來(lái)取消所有符合過(guò)濾表達(dá)式的被選擇項(xiàng). 考慮一個(gè)無(wú)序的list，你想要選擇所有的沒(méi)有ul子元素的li元素。

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

$(document).ready(function() { 
$("li").not("[ul]").css("border", "1px solid black"); 
}); 

上面代碼中的[expression] 語(yǔ)法是從XPath而來(lái)，可以在子元素和屬性(elements and attributes)上用作過(guò)濾器，比如你可能想選擇所有的帶有name屬性的鏈接:

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

$(document).ready(function() { 
$("a[name]").background("#eee"); //原文為“$("a[@name]").background("#eee");”在jQuery1.2及以上版本中,@符號(hào)應(yīng)該去除 
}); 

更常見(jiàn)的情況是以name來(lái)選擇鏈接，你可能需要選擇一個(gè)有特點(diǎn)href屬性的鏈接，這在不同的瀏覽器下對(duì)href的理解可能會(huì)不一致，所以我們的部分匹配("*=")[包含]的方式來(lái)代替完全匹配("=")：

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

$(document).ready(function() { 
$("a[href*=/content/gallery]").click(function() { 
// do something with all links that point somewhere to /content/gallery 
}); 
}); 

到現(xiàn)在為止，選擇器都用來(lái)選擇子元素或者是過(guò)濾元素。另外還有一種情況是選擇上一個(gè)或者下一個(gè)元素，比如一個(gè)FAQ的頁(yè)面，答案首先會(huì)隱藏，當(dāng)問(wèn)題點(diǎn)擊時(shí)，答案顯示出來(lái)，jQuery代碼如下：

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

$(document).ready(function() { 
$('#faq').find('dd').hide().end().find('dt').click(function() { 
var answer = $(this).next(); 
if (answer.is(':visible')) { 
answer.slideUp(); 
} else { 
answer.slideDown(); 
} 
}); 
}); 

這里我們用了一些鏈?zhǔn)奖磉_(dá)法來(lái)減少代碼量，而且看上去更直觀更容易理解。像'#faq' 只選擇了一次，利用end()方法，第一次find()方法會(huì)結(jié)束(undone)，所以我們可以接著在后面繼續(xù)find('dt')，而不需要再寫$('#faq').find('dt')。

12 下一頁(yè)閱讀全文