【正文】 （譯者 Keel 注：請(qǐng)注意體會(huì)方便之極的 css()方法，并再次提醒請(qǐng)務(wù)必實(shí)際測(cè)試觀察效果，比方說(shuō)換個(gè) CSS 樣式呢？再加一個(gè) CSS 樣式呢？像這樣：$(li).not([ul]).css(border, 1px solid black).css(color,red)。 這個(gè)代碼選擇了所有的 li 元素，然后去除了沒(méi)有 ul 子元素的 li 元素。 $(document).ready(function() { $(li).not([ul]).css(border, 1px solid black)。 jQuery 提供了filter() 和 not() 方法來(lái)解決這個(gè)問(wèn)題。 （譯者 Keel 注：請(qǐng)注意一定要親自將這些代碼寫在 中并在 上測(cè)試效果才能有所體 會(huì)！必要時(shí)要觀察 的 html代碼） 這樣你在點(diǎn)擊 Reset 鏈接后，就選擇了文檔中所有的 form 元素，并對(duì)它們都執(zhí)行了一次 reset()。 })。如果你有一個(gè)以上的 form，你可以這樣做： $(document).ready(function() { // use this to reset several forms at once $(reset).click(function() { $(form).each(function() { ()。 （譯者 Keel 注：這里作者將 form 的 id 也寫成了 form，源文件有 form id=form，這是非常不好的寫法，你可以將這個(gè) ID 改成 form1 或者 testForm，然后用 $(form1)或者 $(testForm)來(lái)表示它，再進(jìn)行測(cè)試。 })。xxx39。xxx39。在這個(gè)例子中 , html()用來(lái)獲取每個(gè) li 的 html 文本 , 追加一些文字，并將之設(shè)置為 li 的html 文本。 find() 讓你在已經(jīng)選擇的 element中作條件查找 ,因此 $(orderedlist).find(li) 就像 $(orderedlist li). each()一樣迭代了所有的 li，并可以在此基礎(chǔ)上作更多的處理。 })。 你可以在 Visual jQuery 找到全部的事件列表，在 Events 欄目下。 （譯者 Keel 注：入門看此文，修行在個(gè)人，要想在入門之后懂更多，所以這段話的幾個(gè)鏈接遲早是要必看的！不會(huì)又要翻譯吧 ...^_^!） 每一個(gè) onXXX 事件都有效，如 onclick,onchange,onsubmit 等，都有 jQuery 等價(jià)表 示方法 （譯者 Keel 注： jQuery 不喜歡 onXXX，所以都改成了 XXX，去掉了on）。 })。 }, function() { $(this).removeClass(green)。 現(xiàn)在我們?cè)僮鰝€(gè)復(fù)雜一點(diǎn)的，當(dāng)把鼠標(biāo)放在 li 對(duì)象上面和移開(kāi)時(shí)進(jìn)行樣式切換，但只在 list 的最后一個(gè) element 上生效。 })。 這里將 starterkit 中的一個(gè) CSS 樣式 red 附加到了 orderedlist 上 (譯者 Keel 注：參考測(cè)試包中的 css 目錄下的 ，其中定義了 red 樣式 )。 為了測(cè)試一下這些選擇器，我們來(lái)試著在我們 中選擇并修改第一個(gè) ordered list. 一開(kāi)始，我們需要選擇 這個(gè) list 本身，這個(gè) list 有一個(gè) ID叫 “orderedlist”，通常的 javascript 寫法是 (orderedlist).在 jQuery 中，我們這樣做： $(document).ready(function() { $(orderedlist).addClass(red)。 感興趣的鏈接： ? 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 中文入門指南，翻譯加實(shí)例， jQuery 的起點(diǎn)教程 (二 ) 三 .Find me:使用選擇器和事件 jQuery 提供兩種方式來(lái)選擇 html 的 elements，第一種是用 CSS 和 Xpath 選擇器聯(lián)合起來(lái)形成一個(gè)字符串來(lái)傳送到 jQuery 的構(gòu)造器（如： $(div ul a)）；第二種是用 jQuery 對(duì)象的幾個(gè) methods(方法 )。 用到簡(jiǎn)單的 AJAX 后，我們可以認(rèn)為已經(jīng)非常之 “”了，但是到現(xiàn)在為止，我們還缺少一些酷炫的效果。).click( function(event) { (this, [foobar])。 // if you need the context of the original handler, use apply: $(39。).click( function(event) { handler(foobar)。 // add click handler and pass foobar! $(39。你可以通過(guò)一個(gè)額外的參數(shù)指定回叫的方法，簡(jiǎn)單的辦法是將這個(gè)回叫方法包含在一個(gè)其它的 function 中： // get some data var foobar = ...。 請(qǐng)注意 addClickHandlers 函數(shù)是作為一個(gè)本地變量定義的，而不是全局變量 (如：function addClickHandlers() {...})，這樣做是為了防止與其他的全局變量或者函數(shù)相沖突。 })。 }。） 一個(gè)在載入 AJAX 時(shí)經(jīng)常發(fā)生的問(wèn)題是：當(dāng)載入一個(gè)事件句柄到一個(gè)需要載入內(nèi)容的 HTML 文檔時(shí)，你只能在內(nèi)容載入后再加載這些句柄，為了防止代碼重復(fù)執(zhí)行，你可能用到如下一個(gè) function: // lets use the shortcut $(function() { var addClickHandlers = function() { $().click(function() { $(target).load(, addClickHandlers)。 （譯者 Keel 注：這個(gè)在線實(shí)例從國(guó)內(nèi)訪問(wèn)還是比較慢的，點(diǎn)擊后要等一會(huì)兒才能看到結(jié)果，可以考慮對(duì)它進(jìn)行修改，比如加上 loading，投票后加上再投票的返回鏈接等。 這是一個(gè)比較粗糙的例子，更完美的例子可以訪問(wèn) 點(diǎn)擊 Kurz bewerten!。 這段代碼生成了 5 個(gè)鏈接，并將它們追加到 id 為 rating容器中，當(dāng)其中一個(gè)鏈接被點(diǎn)擊時(shí)，該鏈接標(biāo)明的分?jǐn)?shù)就會(huì)以 rating 參數(shù)形式發(fā)送到 ，然 后，結(jié)果將以 XML 形式會(huì)從服務(wù)器端傳回來(lái)，添加到容器中，替代這些鏈接。 })。))。 // output result $(rating).html((39。) ).find(a).click(function(e) { ()。 } // add markup to container and applier click handlers to anchors $(rating).append( (39。 i = 5。 $(document).ready(function() { // generate markup var ratingMarkup = [Please rate: ]。看一下 代碼。 Next steps(下一步 ) 如果你想做更好的 javascript 開(kāi)發(fā) ,建議你使用一個(gè)叫 FireBug 的 firefox 插件 . 它提供了斷點(diǎn)調(diào)試 (比 alert 強(qiáng)多了 )、觀察 DOM 變化等很多漂亮的功能 如果你還有未解決的問(wèn)題，或者新的想法與建議，你可以使用 jQuery 的郵件列表 jQuery mailing list. 關(guān)于這個(gè) 指南的任何事情，你可以寫 mail 給作者或者發(fā)表評(píng)論在他的日志：blog. 關(guān)于這個(gè)指南的翻譯任何事情，你可以寫 mail 給我或者發(fā)表評(píng)論在我的日志：blog. 全文完 . jQuery 中文入門指南，翻譯加實(shí)例， jQuery 的起點(diǎn)教程 (三 ) 四 .Rate me:使用 AJAX 在這一部分我們寫了一個(gè)小小的 AJAX 應(yīng)用，它能夠 rate 一些東西 （譯者 Keel注：就是對(duì)某些東西投票） ，就像在 上面看到的一樣。 } // ... // rest of the code // ... return this。 var settings = { url: // put more defaults here // remember to put a ma (,) after each pair, but not after the last one! }。)。]).check(39。 $(input[type=39。off39。checkbox39。)。]).check(39。 $(input[type=39。checkbox39。 }。 break。toggle39。 break。off39。 break。on39。on39。on39。]).check()。 這個(gè)插件現(xiàn)在可以這樣用 : $(input[type=39。 })。 })。 // or, to uncheck = false。checkbox39。 Or with some options: $(...).foobar({ value: 123, bar: 9 })。 } }。 5. 可選的 l:創(chuàng)建一個(gè)默認(rèn)的初始參數(shù)配置 ,這些配置也可以由用戶自行設(shè)定 ,如 : = function(options) { var settings = { value: 5, name: pete, bar: 655 }。 你現(xiàn)在可以在 你的插件中使用這些幫助函數(shù)了 : = function() { // do something (value)。 關(guān)于這個(gè)插件的更多例子和文檔可以在 tablesorter 首頁(yè) 找到 . 幾乎所有的特件都是這樣用的 :先 include 插件的 js 文件 ,然后在某些元素上使用插件定義的方法 ,當(dāng) 然也有一些參數(shù)選項(xiàng)是可以配置的 經(jīng)常更新的插件列表可以從 jQuery 官方站 on the jQuery site 找到 . 當(dāng)你更經(jīng)常地使用 jQury 時(shí) ,你會(huì)發(fā)現(xiàn)將你自己的代碼打包成插件是很有用處的 ,它能方便地讓你的公司或者其他人進(jìn)行重用 .下一章我們將談到如何構(gòu)建一個(gè)自己的插件 . 本章的相關(guān)鏈接 : ? Plugins for jQuery ? Tablesorter Plugin Plug me:制作自己的插件 寫一個(gè)自己的 jQuery 插件是非常容易的 ,如果你按照下面的原則來(lái)做 ,可以讓其他人也容易地結(jié)合使用你的插件 . 1. 為你的插件取一個(gè)名字 ,在這個(gè)例子里面我們叫它 foobar. 2. 創(chuàng)建一個(gè)像這樣的文件 :jquery.[yourpluginname].js,比如我們創(chuàng)建一個(gè) 3. 創(chuàng)建一個(gè)或更多的插件方法 ,使用繼承 jQuery 對(duì)象的方式 ,如 : = function() { // do something }。], // Class names for striping supplyed as a array. stripRowsOnStartUp: true // Strip rows on tableSorter init. })。,39。 這個(gè)表格還可以加一些突出顯示的效果，我們可以做這樣一個(gè)隔行背景色效果 : $(document).ready(function() { $(large).tableSorter({ stripingRowClass: [39。 })。 本章的相關(guān)鏈接 : ? jQuery FX Module ? Interface plugin Sort me(將我有序化 ):使用 t