jQuery起點教程之使用選擇器和事件

jQuery起點教學之使用選擇器和事件
jQuery提供兩種方式來選擇html的elements：

第一種是用CSS和Xpath選擇器聯合起來形成一個字串來傳送到jQuery的構造器（如：$("div > ul a")）；

第二種是用jQuery物件的幾個methods(方法)。這兩種方式還可以聯合起來混合使用。

為了測試這些選擇器，我們來試著在我們starterkit.html中選擇並修改第一個ordered list.

一開始，我們需要選擇這個list本身，這個list有一個ID叫做“orderedlist” ，通常的javascript寫法是document.getElementById("orderedlist").在jQuery中，我們這樣做：$(document).ready(function() {
        $("#orderedlist").addClass("red");
});這裡將starterkit中的一個CSS樣式red附加到了orderedlist上(譯者Keel註：參考測試包中的css目錄下的core.css，其中定義了red樣式)。因此，在你刷新了starterkit.html後，你將會看到第一個有序列表(ordered list )背景色變成了紅色，而第二個有序列表沒有變化.
現在，讓我們添加一些新的樣式到list的子節點.$(document).ready(function() {
        $("#orderedlist > li").addClass("blue");
});這樣，所有orderedlist中的li都附加了樣式"blue"。

現在我們再做個複雜一點的，當把滑鼠放在li物件上面和移開時進行樣式切換，但只在list的最後一個element上生效。 $(document).ready(function() {
        $("#orderedlist li:last").hover(function() {
        ) {
$(this).removeClass("green");
        });
});有大量的類似的CSS和XPath例子，更多的例子和清單可以在這裡找到。 （譯者Keel註：入門看此文，修行在個人，要想在入門之後懂更多，所以這段話的幾個鏈接遲早是要必看的！）

每一個onXXX事件都有效，如onclick,onchange,onsubmit等，都有jQuery等價表示方法（譯者Keel註：jQuery不喜歡onXXX，所以都改成了XXX，去掉了on）。其他的一些事件，如ready和hover,也提供了相應的方法。

你可以在Visual jQuery找到全部的事件列表，在Events欄目下.

用這些選擇器和事件你已經可以做很多的事情了，但這裡有一個更強的好東東！ $(document).ready(function() {
        $("#orderedlist").find("li").each(function(i) {
           ). + " BAM! " + i );
        });
});

find() 讓你在已經選擇的element中作條件查找,因此$("#orderedlist).find("li") 就像$("#orderedlist li").

each()一樣迭代了所有的li，並可以在此基礎上作更多的處理。 each() 。 .html()方法是取得物件的html程式碼，而.html('xxx')是設定'xxx'為物件的html程式碼）

另一個經常碰到的任務是在沒有被jQuery覆蓋的DOM元素上call一些方法，想像一個在你用AJAX方式成功提交後的reset：$(document).ready(function() {
       / use this to reset a single form
        $("#reset").click(function() {
           );（譯者Keel註：這裡作者將form的id也寫成了form，原始檔有

，這是非常不好的寫法，你可以將這個ID改成form1或testForm，然後用$(" #form1")或$("#testForm")來表示它，再進行測試。）

這個程式碼選擇了所有ID為"form"的元素，並在其第一個上call了一個reset()。如果你有一個以上的form，你可以這樣做：$(document).ready(function() {
        // use this to reset several forms at once
  
                $("form").each(function() {
                    });
        });
});（譯者Keel註：請注意請務必親自將這些程式碼寫在custom .js中並在starterkit.html上測試效果才能有所體會！ 必要時要觀察starterkit.html的html代碼）

這樣你在點擊Reset鏈接後，就選擇了文檔中所有的form元素，並對它們都執行了一次reset()。

還有一個你可能要面對的問題是不希望某些特定的元素被選擇。 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元素例外。

（譯者Keel註：請注意體會方便之極的css()方法，並再次提醒請務必實際測試觀察效果，比方說換個CSS樣式呢？再加一個CSS樣式呢？像這樣：$(" li").not("[ul]").css("border", "1px solid black").css("color","re​​d");）

上面程式碼中的[expression] 語法是從XPath而來，可以在子元素和屬性(elements and attributes)上用作過濾器，例如你可能想要選擇所有的帶有name屬性的連結:$(document).ready(function() {
        $(" a[@name]").background("#eee");
});這個程式碼為所有帶有name屬性的連結加上了一個背景色。 （譯者Keel註：這個顏色太不明顯了，建議寫成$("a[@name]").background("red");）

更常見的情況是以name來選擇鏈接，你可能需要選擇一個有特點href屬性的鏈接，這在不同的瀏覽器下對href的理解可能會不一致，所以我們的部分匹配("*=")的方式來代替完全匹配("=")：$(document ).ready(function() {
        $("a[@href*=/content/gallery]").click(function() {
             } );
});到目前為止，選擇器都用來選擇子元素或是過濾元素。另外還有一種情況是選擇上一個或下一個元素，例如FAQ的頁面，答案會先隱藏，當問題點擊時，答案顯示出來，jQuery程式碼如下：$(document).ready(function() {
$('#faq').find('dd').hide().end().find('dt').click(function() {
         var answer = $(this).next();
if (answer.is(':visible')) {
             answer.slideUp();
         } el    }
     });
});這裡我們用了一些鍊式表達式來減少程式碼量，而且看起來更直覺更容易理解。像'#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");
  (this).parents("p" ).removeClass("highlight");
        });
});測試效果可以看到，移到文章某段的連結時，它所在的段全用上highlight樣式，移走之後又恢復原樣。

（譯者Keel註：highlight是core.css中定義的樣式，你也可以改變它，注意這裡有第二個function()這是hover方法的特點，請在API文檔中查閱hover，上面也有範例說明） 
在我們繼續之前我們先來看看這一步： jQuery會讓程式碼變得更短從而更容易理解和維護，下面是$(document).ready(callback)的縮寫法：$(function( ) {
        // code to execute when the DOM is ready
});應用在我們的Hello world範例中，可以這樣:$(function() {
 alert("Hello world!");
        });
});現在，我們手上有了這些基礎的知識，我們可以更進一步的探索其它方面的東西，就從AJAX開始！

 更多相關文章請追蹤PHP中文網（www.php.cn）！