1．jQuery GO
jQuery 提供了功能強(qiáng)大的讀取和處理文檔DOM的方式,為動態(tài)操作文檔DOM提供了方便。
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
單擊文檔中任一個連接都會觸發(fā)alert() 事件
$號是 jQuery類的一個別稱，因此$()構(gòu)造了一個新的jQuery 對象。函數(shù) click() 是這個jQuery對象的一個方法，它綁定了一個單擊事件到所有選中的標(biāo)簽(這里是所有的a標(biāo)簽),并在事件觸發(fā)時(shí)執(zhí)行了它所提供的alert方法. 這樣的使用編碼更有結(jié)構(gòu)與行為分開的感覺。
2．選擇器和事件
jQuery提供兩種方式來選擇html的elements，第一種是用CSS和Xpath選擇器聯(lián)合起來形成一個字符串來傳送到j(luò)Query的構(gòu)造器（如：$("div > ul a")）；第二種是用jQuery對象的幾個methods(方法)。這兩種方式還可以聯(lián)合起來混合使用
<ul id=”orderedlist”>
<li>食品</li>
<li>服裝</li>
<li>電子</li>
</ul>
使用jQuery 查找文檔中的ul如下：取代js document.getElementById(‘orderlist');
$(document).ready(function() {
$("#orderedlist").addClass("red");
});
$(“#..”)的方式可以找到指定ID的元素。
為其子節(jié)點(diǎn)添加樣式，如下：
$(document).ready(function() {
$("#orderedlist > li").addClass("blue");
});
在鼠標(biāo)移到或移開<li>項(xiàng)時(shí)樣式切換,如下：
$(document).ready(function() {
$("#orderedlist li:last").hover(function() {
$(this).addClass("green");
}, function() {
$(this).removeClass("green");
});
});
$(#orderedlist li) 與 $(“#orderedlist > li”) 的區(qū)別，前者是父元素下所有匹配的子元素，后都僅是其子元素中匹配的元素。
$(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() 。在這個例子中, html()用來獲取每個li的html文本, 追加一些文字，并將之設(shè)置為li的html文本
一個ajax 方式提交后的重置表單的操作，如下：
$(document).ready(function() {
// use this to reset a single form
$("#reset").click(function() {
$("#form")[0].reset();
});
});
當(dāng)然可以重置個表單
$(document).ready(function() {
// use this to reset several forms at once
$("#reset").click(function() {
$("form").each(function() {
this.reset();
});
});
});
過濾選擇器
還有一個你可能要面對的問題是不希望某些特定的元素被選擇。jQuery 提供了filter() 和not() 方法來解決這個問題。 filter()以過濾表達(dá)式來減少不符合的被選擇項(xiàng), not()則用來取消所有符合過濾表達(dá)式的被選擇項(xiàng). 考慮一個無序的list，你想要選擇所有的沒有ul子元素的li元素。
$(document).ready(function() {
$("li").not("[ul]").css("border", "1px solid black");
});
上面代碼中的[expression] 語法是從XPath而來，可以在子元素和屬性(elements and attributes)上用作過濾器，比如你可能想選擇所有的帶有name屬性的鏈接:
$(document).ready(function() {
$("a[name]").background("#eee"); //原文為“$("a[@name]").background("#eee");”在jQuery1.2及以上版本中,@符號應(yīng)該去除
});
更常見的情況是以name來選擇鏈接，你可能需要選擇一個有特點(diǎn)href屬性的鏈接，這在不同的瀏覽器下對href的理解可能會不一致，所以我們的部分匹配("*=")[包含]的方式來代替完全匹配("=")：
$(document).ready(function() {
$("a[href*=/content/gallery]").click(function() {
// do something with all links that point somewhere to /content/gallery
});
});
到現(xiàn)在為止，選擇器都用來選擇子元素或者是過濾元素。另外還有一種情況是選擇上一個或者下一個元素，比如一個FAQ的頁面，答案首先會隱藏，當(dāng)問題點(diǎn)擊時(shí)，答案顯示出來，jQuery代碼如下：
$(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á)法來減少代碼量，而且看上去更直觀更容易理解。像'#faq' 只選擇了一次，利用end()方法，第一次find()方法會結(jié)束(undone)，所以我們可以接著在后面繼續(xù)find('dt')，而不需要再寫$('#faq').find('dt')。
