1．jQuery GO
jQuery 提供了功能強(qiáng)大的讀取和處理文檔DOM的方式,為動(dòng)態(tài)操作文檔DOM提供了方便。
復(fù)制代碼 代碼如下:
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});

單擊文檔中任一個(gè)連接都會(huì)觸發(fā)alert() 事件
$號是 jQuery類的一個(gè)別稱，因此$()構(gòu)造了一個(gè)新的jQuery 對象。函數(shù) click() 是這個(gè)jQuery對象的一個(gè)方法，它綁定了一個(gè)單擊事件到所有選中的標(biāo)簽(這里是所有的a標(biāo)簽),并在事件觸發(fā)時(shí)執(zhí)行了它所提供的alert方法. 這樣的使用編碼更有結(jié)構(gòu)與行為分開的感覺。
2．選擇器和事件
jQuery提供兩種方式來選擇html的elements，第一種是用CSS和Xpath選擇器聯(lián)合起來形成一個(gè)字符串來傳送到j(luò)Query的構(gòu)造器（如：$("div > ul a")）；第二種是用jQuery對象的幾個(gè)methods(方法)。這兩種方式還可以聯(lián)合起來混合使用
復(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)移到或移開<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()用來獲取每個(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();
});
});
});

過濾選擇器
還有一個(gè)你可能要面對的問題是不希望某些特定的元素被選擇。jQuery 提供了filter() 和not() 方法來解決這個(gè)問題。 filter()以過濾表達(dá)式來減少不符合的被選擇項(xiàng), not()則用來取消所有符合過濾表達(dá)式的被選擇項(xiàng). 考慮一個(gè)無序的list，你想要選擇所有的沒有ul子元素的li元素。
復(fù)制代碼 代碼如下:
$(document).ready(function() {
$("li").not("[ul]").css("border", "1px solid black");
});

上面代碼中的[expression] 語法是從XPath而來，可以在子元素和屬性(elements and attributes)上用作過濾器，比如你可能想選擇所有的帶有name屬性的鏈接:
復(fù)制代碼 代碼如下:
$(document).ready(function() {
$("a[name]").background("#eee"); //原文為“$("a[@name]").background("#eee");”在jQuery1.2及以上版本中,@符號應(yīng)該去除
});

更常見的情況是以name來選擇鏈接，你可能需要選擇一個(gè)有特點(diǎn)href屬性的鏈接，這在不同的瀏覽器下對href的理解可能會(huì)不一致，所以我們的部分匹配("*=")[包含]的方式來代替完全匹配("=")：
復(fù)制代碼 代碼如下:
$(document).ready(function() {
$("a[href*=/content/gallery]").click(function() {
// do something with all links that point somewhere to /content/gallery
});
});

到現(xiàn)在為止，選擇器都用來選擇子元素或者是過濾元素。另外還有一種情況是選擇上一個(gè)或者下一個(gè)元素，比如一個(gè)FAQ的頁面，答案首先會(huì)隱藏，當(dāng)問題點(diǎn)擊時(shí)，答案顯示出來，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á)法來減少代碼量，而且看上去更直觀更容易理解。像'#faq' 只選擇了一次，利用end()方法，第一次find()方法會(huì)結(jié)束(undone)，所以我們可以接著在后面繼續(xù)find('dt')，而不需要再寫$('#faq').find('dt')。

JavaScript技術(shù)：jQuery 絕對入門第1/2頁，轉(zhuǎn)載需保留來源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。