1. 程式人生 > >怎樣學習jQuery,jQuery學習教程

怎樣學習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

});