標題: [教學] jQuery 教學 - 基礎篇 [打印本頁]

---

作者: plku56ty    時間: 2013-3-17 17:04     標題: jQuery 教學 - 基礎篇

[前言]

jQuery 是一套 JavaScript 的 Library，因此，你必須稍具 JavaScript 的基礎，至少寫過一些 JavaScript 才比較容易上手，並且看得懂後續的教學。jQuery 的核心程式並非包山包海、什麼都可以幫你做，相反地，jQuery 主要是用在 DOM 文件的操作，包含「快速選取元素(Element)」並且「做一些事情」，快速選取元素可以讓你一次選取單一或多個的元素，然後你可以將這些被選取的元素做一些改變，例如隱藏、顯示等等。此外 jQuery 的核心程式還加強了非同步傳輸(AJAX)以及事件(Event)的功能，讓你更容易操作遠端文件及事件。

以上看得出來 jQuery 是針對 JavaScript 內在不足的地方加以增進，你仍然需要自己寫一些程式來完成你需要的各種功能，不同的是，正確地使用了 jQuery 可以讓你的程式碼更精簡、更優雅的表達出來，這在後續的範例中可以看到，更重要的是，應該也會讓你更快速的開發出你要的功能。

或許你會想說，在這個 Web 2.0 的時代，我需要多點漂亮、絢麗的 Widgets 來裝飾我的網站，就像 Yahoo UI 或 ExtJS 提供的那些功能一樣，jQuery 有嗎？其實 jQuery 的設計上有考慮到這類擴展性的問題，目前 jQuery 的 plugin 已經有上百個了，你也不一定要完全自己動手寫，上 jQuery 官方網站找找看，或許你需要的功能別人已經幫你做好了。以 UI 來講， jQuery 跟 UI 相關的 plugins 已經做過了一些整合，目前獨立發佈為 jQuery UI (http://ui.jquery.com/)，如果你之前沒聽過 jQuery UI，建議你上去網站上看一下展示的範例，嗯，雖然可能還有一些 bug 存在，但是整體來說已經有相當的水準了，或許你會對 jQuery 更有興趣了。

以下的教學內容，主要是擷取了 jQuery 作者 John Resig 的一篇簡報 "Building Interactive
Prototypes with jQuery" 的內容加以調整並註解，希望能以比較忠實的方式來呈現 jQuery 的設計含意。

---

歡迎光臨 麻辣家族討論版版 (http://forum.twbts.com/)