【導(dǎo)讀】們寫js變得更加方便！如果你不是個js高手又想寫出優(yōu)秀的js效果，jQuery可以幫你達(dá)到。下載完成后先加載到文檔中，然后我們來看個簡單的例子！身表示一個jQuery類，所有$()是構(gòu)造一個jQuery對象，click()是這個對象的方法，同理。$也是一個jQuery對象，ready是$的方法，表示當(dāng)document. 全部下載完畢時執(zhí)行函數(shù)。的元素,$表示取id為"p"的元素.

　　

【正文】 AJAX 在這一部分我們寫了一個小小的 AJAX 應(yīng)用，它能夠 rate 一些東西 （譯者 Keel注：就是對某些東西投票） ，就像在 上面看到的一樣。 首先我們需要一些服務(wù)器端代碼，這個例子中用到了一個 PHP 文件，讀取 rating參數(shù)然后返回 rating 總數(shù)和平均數(shù)?？匆幌? 代碼。 雖然這些例子也可以不使用 AJAX來實現(xiàn)，但顯然我們不會那么做，我們用 jQuery生成一個 DIV 容器， ID 是 rating。 $(document).ready(function() { // generate markup var ratingMarkup = [Please rate: ]。 for(var i=1。 i = 5。 i++) { ratingMarkup[] = + i + 。 } // add markup to container and applier click handlers to anchors $(rating).append( (39。39。) ).find(a).click(function(e) { ()。 // send requests $.post(, {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((39。39。))。 } )。 })。 })。 這段代碼生成了 5 個鏈接，并將它們追加到 id 為 rating容器中，當(dāng)其中一個鏈接被點擊時，該鏈接標(biāo)明的分?jǐn)?shù)就會以 rating 參數(shù)形式發(fā)送到 ，然 后，結(jié)果將以 XML 形式會從服務(wù)器端傳回來，添加到容器中，替代這些鏈接。 如果你沒有一個安裝過 PHP 的 webserver，你可以看看這個 在線的例子 。 這是一個比較粗糙的例子，更完美的例子可以訪問 點擊 Kurz bewerten!。 更多的 AJAX 方法可以從 這里 找到，或者看看 API 文檔下面的 AJAX。 （譯者 Keel 注：這個在線實例從國內(nèi)訪問還是比較慢的，點擊后要等一會兒才能看到結(jié)果，可以考慮對它進(jìn)行修改，比如加上 loading，投票后加上再投票的返回鏈接等。此外，這個例子中還是有很多需要進(jìn)一步消化的地方，看不懂 的地方請參考 API 文檔。） 一個在載入 AJAX 時經(jīng)常發(fā)生的問題是：當(dāng)載入一個事件句柄到一個需要載入內(nèi)容的 HTML 文檔時，你只能在內(nèi)容載入后再加載這些句柄，為了防止代碼重復(fù)執(zhí)行，你可能用到如下一個 function: // lets use the shortcut $(function() { var addClickHandlers = function() { $().click(function() { $(target).load(, addClickHandlers)。 })。 }。 addClickHandlers()。 })。 現(xiàn)在， addClickHandlers 只在 DOM 載入完成后執(zhí)行一次，并且是在用戶點擊具有 clickMeToLoadContent 這個樣式的鏈接后。 請注意 addClickHandlers 函數(shù)是作為一個本地變量定義的，而不是全局變量 (如：function addClickHandlers() {...})，這樣做是為了防止與其他的全局變量或者函數(shù)相沖突。 另一個常見的問題是關(guān)于回傳 (callback)的參數(shù)。你可以通過一個額外的參數(shù)指定回叫的方法，簡單的辦法是將這個回叫方法包含在一個其它的 function 中： // get some data var foobar = ...。 // specify handler, it needs data as a paramter var handler = function(data) { ... }。 // add click handler and pass foobar! $(39。a39。).click( function(event) { handler(foobar)。 } )。 // if you need the context of the original handler, use apply: $(39。a39。).click( function(event) { (this, [foobar])。 } )。 用到簡單的 AJAX 后，我們可以認(rèn)為已經(jīng)非常之 “”了，但是到現(xiàn)在為止，我們還缺少一些酷炫的效果。下一節(jié)將如談到這些效果。 感興趣的鏈接： ? jQuery AJAX Module ? jQuery API: Contains description and examples for append and all other jQuery methods ? ThickBox: A jQuery plugin that uses jQuery to enhance the famous lightbox 下一篇 : 前一篇 : posted by Keel @ 6:10 PM 0 ments 20201210 jQuery 中文入門指南，翻譯加實例， jQuery 的起點教程 (二 ) 三 .Find me:使用選擇器和事件 jQuery 提供兩種方式來選擇 html 的 elements，第一種是用 CSS 和 Xpath 選擇器聯(lián)合起來形成一個字符串來傳送到 jQuery 的構(gòu)造器（如： $(div ul a)）；第二種是用 jQuery 對象的幾個 methods(方法 )。這兩種方式還可以聯(lián)合起來混合使用。 為了測試一下這些選擇器，我們來試著在我們 中選擇并修改第一個 ordered list. 一開始，我們需要選擇 這個 list 本身，這個 list 有一個 ID叫 “orderedlist”，通常的 javascript 寫法是 (orderedlist).在 jQuery 中，我們這樣做： $(document).ready(function() { $(orderedlist).addClass(red)。 })。 這里將 starterkit 中的一個 CSS 樣式 red 附加到了 orderedlist 上 (譯者 Keel 注：參考測試包中的 css 目錄下的 ，其中定義了 red 樣式 )。因此，在你刷新了 后，你將會看到第一個有序列表 (ordered list )背景色變成了紅色，而第二個有序列表沒有變化 . 現(xiàn)在，讓我們添加一些新的樣式到 list 的子節(jié)點 . $(document).ready(function() { $(orderedlist li).addClass(blue)。 })。 這樣，所有 orderedlist 中的 li 都附加了樣式 blue。 現(xiàn)在我們再做個復(fù)雜一點的，當(dāng)把鼠標(biāo)放在 li 對象上面和移開時進(jìn)行樣式切換，但只在 list 的最后一個 element 上生效。 $(document).ready(function() { $(orderedlist li:last).hover(function() { $(this).addClass(green)。 }, function() { $(this).removeClass(green)。 })。 })。 還有大量的類似的 CSS 和 XPath 例子，更多的例子和列表可以在 這里 找到。 （譯者 Keel 注：入門看此文，修行在個人，要想在入門之后懂更多，所以這段話的幾個鏈接遲早是要必看的！不會又要翻譯吧 ...^_^!） 每一個 onXXX 事件都有效，如 onclick,onchange,onsubmit 等，都有 jQuery 等價表 示方法 （譯者 Keel 注： jQuery 不喜歡 onXXX，所以都改成了 XXX，去掉了on）。 其他的一些 事件 ，如 ready 和 hover,也提供了相應(yīng)的方法。 你可以在 Visual jQuery 找到全部的事件列表，在 Events 欄目下。 用這些選擇器和事件你已經(jīng)可以做很多的事情了，但這里有一個更強(qiáng)的好東東！ $(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() 。在這個例子中 , html()用來獲取每個 li 的 html 文本 , 追加一些文字，并將之設(shè)置為 li 的html 文本。 （譯者 Keel 注：從這個例子可以看到 .html()方法是獲取對象的 html代碼，而 .html(39。xxx39。)是設(shè)置 39。xxx39。為對象的 html 代碼） 另一個經(jīng)常碰到的任務(wù)是在沒有被 jQuery 覆蓋的 DOM 元素上 call 一些方法，想像一個在你用 AJAX 方式成功提交后的 reset： $(document).ready(function() { // use this to reset a single form $(reset).click(function() { $(form)[0].reset()。 })。 })。 （譯者 Keel 注：這里作者將 form 的 id 也寫成了 form，源文件有 form id=form，這是非常不好的寫法，你可以將這個 ID 改成 form1 或者 testForm，然后用 $(form1)或者 $(testForm)來表示它，再進(jìn)行測試。） 這個代碼選擇了所有 ID 為 form的元素，并在其第一個上 call 了一個 reset()。如果你有一個以上的 form，你可以這樣做： $(document).ready(function() { // use this to reset several forms at once $(reset).click(function() { $(form).each(function() { ()。 })。 })。 })。 （譯者 Keel 注：請注意一定要親自將這些代碼寫在 中并在 上測試效果才能有所體 會！必要時要觀察 的 html代碼） 這樣你在點擊 Reset 鏈接后，就選擇了文檔中所有的 form 元素，并對它們都執(zhí)行了一次 reset()。 還有一個你可能要面對的問題是不希望某些特定的元素被選擇。 jQuery 提供了filter() 和 not() 方法來解決這個問題。 filter()以過濾表達(dá)式來減少不符合的被選擇項 , not()則用來取消所有符合過濾表達(dá)式的被選擇項 . 考慮一個無序的 list，你想要選擇所有的沒有 ul 子元素的 li 元素。 $(document).ready(function() { $(li).not([ul]).css(border, 1px solid black)。 })。 這個代碼選擇了所有的 li 元素，然后去除了沒有 ul 子元素的 li 元素。刷新瀏覽器后，所有的 li 元素都有了一個邊框，只有 ul 子元素的那個 li 元素例外。 （譯者 Keel 注：請注意體會方便之極的 css()方法，并再次提醒請務(wù)必實際測試觀察效果，比方說換個 CSS 樣式呢？再加一個 CSS 樣式呢？像這樣：$(li).not([ul]).css(border, 1px solid black).css(color,red)。） 上面代碼中的 [expression] 語法