jQuery 指南
當前位置：點晴教程→知識管理交流
→『 技術(shù)文檔交流 』
這個指南是對jquery庫的一個總的介紹，當然你也被要求具備javascript和DOM(文檔對象模型)的相關(guān)知識。該指南試圖解釋一些必須的細節(jié)。它涵蓋了一個簡單的"hello world"實例，選擇器和事件基礎(chǔ)，AJAX，F(xiàn)X以及官方插件。
這個指南并沒有"click me"，而是依靠"copy me"(復(fù)制/粘貼代碼)來測試例子，拷貝一個例子，看它是怎么做的，然后根據(jù)你自己的想法修改它。 目錄： 1. 安裝 2. Hello jQuery (look like hello world) 3. 用選擇器(selector)和事件(events) 4. 用ajax 5. 用FX(各種效果) 6. 用tablesorter 插件 7. 書寫你自己的插件 8. 下一步(展望) 1.安裝 開始之前，我們需要一個jquery庫的拷貝(js文件)。最新的版本你能在這里下載。這個指南也提供了一個基本的"開始工具包"，你可以在下面地址下載到。 Jquery starterkit 下載該文件并且解壓縮。用你喜歡的編輯器(比如：記事本)打開starterkit.htm和custom.js，并在瀏覽器(IE，firefox, netscape)打開starterkit.htm，現(xiàn)在我們可以開始類似于"hello world"的例子了。 2.Hello, jQuery 作為我們要做的每一件事情，需要確定只要用到了dom,那么你就應(yīng)該為當前文檔注冊一個ready 事件，(關(guān)于ready和onload的區(qū)別，大家可以參考<小蛀翻譯的"jQuery簡單指南"部分>，在這里就不解釋了) 程序代碼 $(document).ready(function() { // do stuff when DOM is ready }); 在函數(shù)塊里邊放一個alert并沒多少意義，因為一個alert并不需要DOM被加載。所以你可以做一些更復(fù)雜的事情來用到dom，比如下面當你click一個<a>的時候顯示一個alert 程序代碼 $(document).ready(function() { $("a").click(function() { alert("Hello world!"); }); }); 所以只要你點<a>標簽，alert就會顯示出來。 讓我們看一看都做了些什么吧。$("a")是一個jquery的選擇器(selector),它能選擇所有的元素(dom對象)。$是一個jquery里對于類的別名，因此$()構(gòu)造了一個新的jquery對象。Click()函數(shù)是對象里的有個方法。它綁定了對所有元素的click事件并且當事件發(fā)生時執(zhí)行提供的函數(shù)。 類似于下面的代碼： 程序代碼 <a href="#" onclick="alert('Hello world')">Link</a> 這個區(qū)別是顯而易見的：我們不需要為單一的對象寫click事件了。我們把html(結(jié)構(gòu))和js(行為)分開了就象用CSS分開一樣。 現(xiàn)在，我們已經(jīng)對選擇器和事件有了一定的認識了。 3.選擇器(selector)和事件(events) Jquery提供了2個方法來選擇DOM元素。第一個方法是用CSS和XPATH(比如：$("div > ul a"))。第二種方法是用jQuery對象的各種方法。當然兩種方法也可以結(jié)合。 我們在starterkit里選擇和修改第一個order list來測試這些選擇器。開始之前，我們需要選擇列表本身。這個列表有一個ID=" orderedlist"，在經(jīng)典javascript里，你必須這樣用：document.getElementById("orderedlist"),但是在jQuery里，我們只需要做這些： 程序代碼 $(document).ready(function() { $("#orderedlist").addClass("red"); }); 這個starterkit提供了一個如何加CSS樣式 class.red。因此，當你刷新starterkit.htm的時候，你會發(fā)現(xiàn)第一個list背景變成紅色，而第二個list沒有被改變。 現(xiàn)在讓我們加更多的classes到list的子元素： 程序代碼 $(document).ready(function() { $("#orderedlist > li").addClass("blue"); }); 上面的例子選擇了id為orderedlist的所有子標簽li,并且在他們上面加了一個class.blue的樣式。 現(xiàn)在來點更復(fù)雜的。當鼠標移到li元素的時候，增加和刪除一個Class樣式： 程序代碼 $(document).ready(function() { $("#orderedlist li:last").hover(function() { $(this).addClass("green"); }, function() { $(this).removeClass("green"); }); 你在這里可以找到很多CSS和XPATH的語法。 更多的例子和表達式你也可以在這里找到。 對于每個onxxx事件，象onclick,onchange,onsubmit等，都有一個和jquery同意義的對應(yīng)的事件，而其他事件，象ready,hover等，都是為某個方法提供。你能在visual jquery里發(fā)現(xiàn)一個完整的事件列表。 還有種寫法是jquery特有的(chain)，就是把一個選擇器的所有的事件并排列出來，中間用"."隔開： 程序代碼 $(document).ready(function() { $("#orderedlist").find("li").each(function(i) { $(this).html( $(this).html() + " BAM! " + i ); }); }); 一個你經(jīng)常面對的任務(wù)是在事件里邊執(zhí)行函數(shù)。比如這樣 程序代碼 $(document).ready(function() { // use this to reset a single form $("#reset").click(function() { $("#form")[0].reset(); }); }); 這個代碼只是ID為form的表單執(zhí)行reset()方法。但是萬一你有很多個表單需要執(zhí)行呢？那么你可以這樣寫： 程序代碼 $(document).ready(function() { // use this to reset several forms at once $("#reset").click(function() { $("form").each(function() { this.reset(); }); }); }); 另外一個你必須面對的問題是選擇某個或某幾個元素。Jquery提供了filter()和not()方法。當filter()是過濾一些適合filter()表達式元素，而not()是刪除和not()表達式相反的元素。當你想選擇所有的li元素，并且不包含ul子元素呢？你可以這樣寫： 程序代碼 $(document).ready(function() { $("li").not("[ul]").css("border", "1px solid black"); }); 結(jié)果是除了包含ul子元素的li，其他所有的li都得到了一個border.可能你也想選擇有name屬性的anchor(<a>)： 程序代碼 $(document).ready(function() { $("a[@name]").background("#eee"); }); 要匹配屬性的值(value)，我們可以用"*="來代替"=" 程序代碼 $(document).ready(function() { $("a[@href*=/content/gallery]").click(function() { // do something with all links that point somewhere to /content/gallery }); }); 直到現(xiàn)在，我們已經(jīng)學(xué)到了很多選擇器的使用。這里還有種情況你需要選擇前一個或后一個元素。想一想starterkit.htm里的FAQ，當你click問題的時候，它是怎么實現(xiàn)隱藏和顯示的呢？代碼是這樣的： 程序代碼 $(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(); } }); }); 因為上面只有唯一一個選擇器(#faq),我們用chain來減少代碼的長度和提高代碼的易讀性和表現(xiàn)性.這里要說明一下，如果按原文翻譯過來我想很多人都看不懂，感覺他自己也沒怎么說明白。我說說我自己的理解： 'dd'和'dt'都是#faq的子元素，find()的作用就是找到它的子元素。End()應(yīng)該和next()搭配的，end()實質(zhì)上是把 'dd'過濾了，也就是next()的時候?qū)嵸|(zhì)上是參考的'dt'。這樣每個'dt'的next就是'dd'，挺容易實現(xiàn)的。要是還不明白你可以邊參考邊照著做一遍。 除了同屬元素外，我們也可以選擇父元素： 程序代碼 $(document).ready(function() { $("a").hover(function() { $(this).parents("p").addClass("highlight"); }, function() { $(this).parents("p").removeClass("highlight"); }); }); 很容易看懂，p就是a的父元素。 讓我們回顧一下前面所學(xué)的，jquery有很多地方能使代碼更簡潔因此容易讀和保持。下面的就是對$(document).ready(callback)符號的一個簡單描述： 程序代碼 $(function() { // code to execute when the DOM is ready }); 好吧，讓我們來寫個hello world，來結(jié)束第一天的課程，相信你一定會寫了吧 程序代碼 $(function() { $("a").click(function() { alert("Hello world!"); }); }); 現(xiàn)在，基礎(chǔ)已經(jīng)掌握了，下次我們將探索一下Jquery的其他方面(ajax) 4.Rateing:使用AJAX 在這部分我們寫了一個簡單的ajax應(yīng)用，它的目的是允許用戶rate(評估)一些事情，就象youtube.com一樣。 我們需要寫一些代碼。例子中用到了一個php文件來讀取"rating"的參數(shù)和返回rating個數(shù)(count)和平均rating(array_sum/count)。你可以看一看starterkit里邊的rate.php代碼。 我們需要這個例子工作在ajax上，因此我們用jquery寫一個必要的標簽并且把它追加到一個ID名為"rating"的div容器里邊。代碼如下： 程序代碼 $(document).ready(function() { // generate markup var ratingMarkup = ["Please rate: "]; for(var i=1; i <= 5; i++) { ratingMarkup[ratingMarkup.length] = "<a href='#'>" + i + "</a> "; } // add markup to container and applier click handlers to anchors $("#rating").append( ratingMarkup.join('') ).find("a").click(function(e) { e.preventDefault(); // send requests $.post("rate.php", {rating: $(this).html()}, function(xml) { // format result var result = [ "Thanks for rating, current average: ", $("average", xml).text(), ", number of votes: ", $("count", xml).text() ]; // output result $("#rating").html(result.join('')); } ); }); }); 上面的代碼片斷產(chǎn)生了5個<a>元素并且把它們追加到了id為"rating"的div容器里．第一次加載頁面后，所有的<a>元素都包含在div容器里，然后再加上個click事件。當<a>被click的時候，一個post請求被發(fā)送到rate.php文件里，并且通過rating: $(this).html()傳遞參數(shù)，經(jīng)過處理PHP文件處理后把結(jié)果作為xml寫進div容器 如果你電腦上沒裝php的運行環(huán)境。你可以在這里看到這個例子的效果。 對與一個不用javascript也能工作的rating例子，你可以訪問softonic.de 你也能在這里或者在visual jquery里邊發(fā)現(xiàn)更多的關(guān)于ajax的幫助文檔。 當靠AJAX加載內(nèi)容的時候，一個非常普遍的問題是：當加載事件句柄到你文檔的時候也需要將該事件應(yīng)用與你加載的內(nèi)容里，所以你不得不在內(nèi)容加載之后提供這些事件句柄。為了防止代碼重復(fù)，你應(yīng)該委派一個函數(shù)。例如： 程序代碼 // lets use the shortcut $(function() { var addClickHandlers = function() { $("a.clickMeToLoadContent").click(function() { $("#target").load(this.href, addClickHandlers); }); }; addClickHandlers(); }); 上面當DOM準備好后addClickHandlers只應(yīng)用了一次，并且每次用戶點一個樣式為class.clickMeToLoadContent的時候內(nèi)容已經(jīng)完成加載了。 請注意函數(shù)addClickHandlers被定義成了一個局部變量，而非全局函數(shù)(function addClickHandlers() {...}).。請堅持這種寫法，因為它可以避免全局變量定義過多引起的沖突。 另外一個非常普遍的AJAX回調(diào)問題是參數(shù)。假設(shè)你需要傳遞一個額外的參數(shù)，那么把回調(diào)封裝到一個函數(shù)里能夠?qū)崿F(xiàn)，如下： 程序代碼 // get some data var foobar = ...; // specify handler, it needs data as a paramter var handler = function(data) { ... }; // add click handler and pass foobar! $('a').click( function(event) { handler(foobar); } ); // if you need the context of the original handler, use apply: $('a').click( function(event) { handler.apply(this, [foobar]); }); 5.各種動態(tài)效果的實現(xiàn)：用FX Jquery能實現(xiàn)簡單的動態(tài)效果，比如顯示(show)和隱藏(hide)： 程序代碼 // $(document).ready(function() { $("a").toggle(function() { $(".stuff").hide('slow'); }, function() { $(".stuff").show('fast'); }); }); 發(fā)揮你的想像，你能用aninate()創(chuàng)建任意的組合： 程序代碼 // $(document).ready(function() { $("a").toggle(function() { $(".stuff").animate({ height: 'hide', opacity: 'hide' }, 'slow'); }, function() { $(".stuff").animate({ height: 'show', opacity: 'show' }, 'slow'); }); }); 在 interface 插件收集里，你能發(fā)現(xiàn)很多奇特的效果。這個站點也提供一些演示。 6.分類：用表格分類插件 該插件是運行在客戶端的，所以你只要在你文件里包含jquery和插件的文件并且寫出你想如何分類。試試下面的例子。在starterkit.htm里添加下面一行代碼： 程序代碼 <script src="lib/jquery.tablesorter.js" type="text/javascript"></script> 把插件包含進去后，你還需要在custom.js里寫 程序代碼 $(document).ready(function() { $("#large").tableSorter(); }); 點擊表格的頭部看看它是怎么工作的。 這個表格也能夠用高亮隔行顯示來實現(xiàn)斑馬線效果。代碼如下： 程序代碼 $(document).ready(function() { $("#large").tableSorter({ stripingRowClass: ['odd','even'], // Class names for striping supplyed as a array. stripRowsOnStartUp: true // Strip rows on tableSorter init. }); }); 這里有更多的例子和演示在tablesorter homepage 當你用jquery久了之后會發(fā)現(xiàn)把你的代碼(功能模塊)作為插件封裝在一個包是多么有用，不僅你自己或你的公司能重用這些代碼(功能模塊)，也能在一些社區(qū)里共享。下面我們將來看看如何構(gòu)造一個插件！ 7.插件：寫你自己的jquery插件 其實為jquery寫插件是很簡單的。如果你按照下面的規(guī)則，整合你的插件將非常容易。 1. 給你的插件命名。讓我們叫它"foobar" 2. 創(chuàng)建一個文件名為：jquery.[你的插件名].js 比如：jquery.foobar.js 3. 擴展jquery的內(nèi)部對象，創(chuàng)建一個或多個插件的方法，比如： 程序代碼 jQuery.fn.foobar = function() { // do something }); 4.用幫助函數(shù)創(chuàng)建一個對象(可選) 程序代碼 jQuery.fooBar = { height: 5, calculateBar = function() { ... }, checkDependencies = function() { ... } }; 然后你能在你的插件里邊調(diào)用這些幫助函數(shù) 程序代碼 jQuery.fn.foobar = function() { // do something jQuery.foobar.checkDependencies(value); // do something else }; 5. 創(chuàng)建一個用戶能修改的默認的設(shè)置(可選) 程序代碼 jQuery.fn.foobar = function(options) { var settings = { value: 5, name: "pete", bar: 655 }; if(options) { jQuery.extend(settings, options); } }; 然后你能用下面的默認調(diào)用該插件(有選項) 程序代碼 $("...").foobar({ value: 123, bar: 9 }); 如果你要發(fā)布你的插件，你應(yīng)該提供一些例子和演示。 現(xiàn)在你有一個基本的認識了吧，讓我們運用自己的知識和創(chuàng)造力來寫我們自己的插件 有很多朋友操作表單這樣來結(jié)束代碼： 程序代碼 $("input[@type='checkbox']").each(function() { this.checked = true; // or, to uncheck this.checked = false; // or, to toggle this.checked = !this.checked; }); 請注意，無論什么時候，當你的代碼出現(xiàn)each時，你應(yīng)該重寫上面的代碼來構(gòu)造一個插件如下： 程序代碼 $.fn.check = function() { return this.each(function() { this.checked = true; }); }; 于是插件可以這樣用： 程序代碼 $("input[@type='checkbox']").check(); 現(xiàn)在你也能寫一些插件為uncheck()和togglecheck()。但是我們可以擴展插件來接收一些選項。 程序代碼 $.fn.check = function(mode) { var mode = mode || 'on'; // if mode is undefined, use 'on' as default return this.each(function() { switch(mode) { case 'on': this.checked = true; break; case 'off': this.checked = false; break; case 'toggle': this.checked = !this.checked; break; } }); }; 然后用戶能夠這么使用： $("input[@type='checkbox']").check(); $("input[@type='checkbox']").check('on'); $("input[@type='checkbox']").check('off'); $("input[@type='checkbox']").check('toggle'); 8.下一步(展望) 如果你計劃學(xué)習(xí)更多的javascript，你應(yīng)該考慮用firefox的firebug插件來調(diào)試你的代碼。它為javascript的調(diào)試提供了一個控制臺，一個調(diào)試器和其他有用的東西。 如果你有任何問題不能解決，請給我們發(fā)郵件jQuery mailing list. 該文章在 2011/3/10 12:20:35 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
