怎樣學習jQuery,jQuery學習教程
對jQuery庫的說明 jQuery的工作方式
Ø 一個簡單的Hello World的例子
Ø 選擇器
Ø 事件基礎
Ø AJAX的用法
Ø FX的用法
Hello jQuery:
在做所有事情之前,我們要讓jQuery讀取和處理文件的DOM,
必須儘可能快地在DOM載入後開始執行事件,所以,我們用一個ready
事件作為處理HTML文件的開始.
$號是 jQuery “類”(jQuery "class")的一個別稱
因此$()構造了一個新的jQuery 物件(jQuery object)。
如:$("a") 是一個jQuery選擇器(selector),它選擇所有的a標籤
函式 click() 、alert()是jQuery物件的方法。
選擇器與事件:
jQuery Base(jQuery基本-----核心)
jQuery Expressions(jQuery<基本>表示式----DOM/Traversing/Selectors----DOM/遍歷/選擇器)
Find me:使用選擇器和事件
jQuery提供兩種方式來選擇html的elements:
第一種是用CSS和Xpath選擇器聯合起來形成一個字串來傳送到jQuery的構造器(如:$("div > ul a"));
第二種是用jQuery物件的幾個methods(方法)。這兩種方式還可以聯合起來混合使用。
測試選擇器:
$(document).ready(function() {
$("#orderedlist").addClass("red");
});
子節點: > 所有orderedlist中的li
$(document).ready(function() {
$("#orderedlist > li").addClass("blue");
});
orderedlist中的最後的li
$(document).ready(function() {
$("#orderedlist li:last").hover(function() {
$(this).addClass("green");
}, function() {
$(this).removeClass("green");
});
});
每一個onXXX事件都有效,如onclick,onchange,onsubmit等,都有jQuery等價表示方法(譯者Keel注:jQuery不喜歡onXXX,所以都改成了XXX,去掉了on)。其他的一些事件,如ready和hover,也提供了相應的方法。
用這些選擇器和事件你已經可以做很多的事情了,但這裡有一個更強的好東東!
$(document).ready(function() {
$("#orderedlist").find("li").each(function(i) {
$(this).html( $(this).html() + " BAM! " + i );
});
});
find() 讓你在已經選擇的element中作條件查詢,因此 $("#orderedlist).find("li") 就像$("#orderedlist li")一樣。
each()方法迭代了所有的li,並可以在此基礎上作更多的處理。
大部分的方法,如addClass(), 都可以用它們自己的 each() 。
在這個例子中, html()用來獲取每個li的html文字, 追加一些文字,並將之設定為li的html文字。(譯者Keel注:從這個例子可以看到.html()方法是獲取物件的html程式碼,而.html('xxx')是設定'xxx'為物件的html程式碼)
另一個經常碰到的任務是在沒有被jQuery覆蓋的DOM元素上call一些方法,想像一個在你用AJAX方式成功提交後的reset:
$(document).ready(function() {
// use this to reset a single form
$("#reset").click(function() {
$("#form")[0].reset();
});
});
這個程式碼選擇了所有ID為"form"的元素,並在其第一個上call了一個reset()。如果你有一個以上的form,你可以這樣做:
$(document).ready(function() {
// use this to reset several forms at once
$("#reset").click(function() {
$("form").each(function() {
this.reset();
});
});
});
其中是this,不是$(this),為什麼? function寫成funtion讓我檢查半天?
還有一個你可能要面對的問題是不希望某些特定的元素被選擇。jQuery 提供了filter()和not() 方法來解決這個問題。 filter()以過濾表示式來減少不符合的被選擇項, not()則用來取消所有符合過濾表示式的被選擇項. 考慮一個無序的list,你想要選擇所有的沒有ul子元素的li元素。
$(document).ready(function() {
$("li").not("[ul]").css("border", "1px solid black");
});
這個程式碼選擇了所有的li元素,然後去除了沒有ul子元素的li元素。重新整理瀏覽器後,所有的li元素都有了一個邊框,只有有ul子元素的那個li元素例外。
上面程式碼中的[expression] 語法是從XPath而來,可以在子元素和屬性(elements and attributes)上用作過濾器,比如你可能想選擇所有的帶有name屬性的連結:
$(document).ready(function() {
$("a[@name]").background("#eee");
});
$(document).ready(function(){
$(a[@name]).css("background", "red");
});
更常見的情況是以name來選擇連結,你可能需要選擇一個有特點href屬性的連結,這在不同的瀏覽器下對href的理解可能會不一致,所以我們的部分匹配("*=")的方式來代替完全匹配("="):
$(document).ready(function() {
$("a[@href*=/content/gallery]").click(function() {
// do something with all links that point somewhere to /content/gallery
});
});
到現在為止,選擇器都用來選擇子元素或者是過濾元素。另外還有一種情況是選擇上一個或者下一個元素,比如一個FAQ的頁面,答案首先會隱藏,當問題點選時,答案顯示出來,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();
}
});
});
寫成 answer.is(‘visible:’)了!!也寫成answer.is(‘visble’)了!
這裡我們用了一些鏈式表達法來減少程式碼量,而且看上去更直觀更容易理解。像'#faq'只選擇了一次,利用end()方法,第一次find()方法會結束(undone),所以我們可以接著在後面繼續find('dt'),而不需要再寫$('#faq').find('dt')。
在點選事件中的,我們用 $(this).next() 來找到dt下面緊接的一個dd元素,這讓我們可以快速地選擇在被點選問題下面的答案。
(譯者Keel注:這個例子真是太酷了,FAQ中的答案可以收縮!從利用next()的思路到實現這些效果都有很多地方需要我們消化,注意 if (answer.is(':visible'))用法,注意answer.slideUp();不懂的地方趕緊查我在最開始提到的兩個必看API文件)
除了選擇同級別的元素外,你也可以選擇父級的元素。可能你想在使用者滑鼠移到文章某段的某個連結時,它的父級元素--也就是文章的這一段突出顯示,試試這個:
$(document).ready(function() {
$("a").hover(function() {
$(this).parents("p").addClass("highlight");
}, function() {
$(this).parents("p").removeClass("highlight");
});
});
$(document).ready(function(){
$(a).hover(function(){
$(this).parent('p').addClass('highlight');},
function(){
$(this).parent('p').removeClass('hightlight');
});
});
(譯者Keel注:highlight是core.css中定義的樣式,你也可以改變它,注意這裡有第二個function()這是hover方法的特點,請在API文件中查閱hover,上面也有例子說明)
$(document).ready(callback)的縮寫法:
$(function() {
// code to execute when the DOM is ready
});