jQuery教學資源

首先，ㄚ琪要自賀一下jQuery UI的文章已經躍升到第二位了，這是除了jQuery UI官方網站外的華文部落格，我們應該感到高興，但是我們不能自滿，因為jQuery UI只是jQuery介面的外掛程式之一而已，既然如此我們應該做大到成為jQuery的華文最大部落格之一才是，哇，好大的口氣啊，這回ㄚ琪滿腦子還在想休假旅遊的事（一點也不想要工作的感覺）說，有點簡直癡人說夢吧，不管怎說，就讓ㄚ琪列一下jQuery的教學資源吧，當然在這之前先看一下下載jQuery之後再讀jQuery文件。

先看看我們正在翻譯的jQuery 教學文件。

在http://docs.jquery.com/Tutorials有很多語言的教學文章，大家可以先來這裡學學，當然為了滿足華人們愛讀中文的口味，ㄚ琪會想辦法把它翻出來的，不過我們也會列出其他語言的文章，不過ㄚ琪應該只能譯英文的吧，所以如果有懂其他語言的專家，也歡迎一起來翻譯吧。

繁體中文jQuery 教學

英文教學

jQuery Plugin Authoring 學習如何開發jQuery外掛。
jQuery Beginner Tutorial in 18 minutes 學習從頭建置jQuery外掛 – 18分鐘的教學。

一般教學

這些教學涵蓋了jQuery函式庫的基本原理 – 涵蓋各式各樣的主題。

How jQuery Works by John Resig.
jQuery的基礎介紹以及你需要知道使用jQuery的概念。
Tags: jQuery Core, Selectors, CSS, Traversing, Manipulation,Events, Effects

Getting Started with jQuery by Jörn Zaefferer
討論jQuery的基礎，所有關於建置外掛的方法。
Tags: jQuery Core, Selectors, Attributes, Traversing,Manipulation, Events, Effects, Ajax, Plugins

jQuery For Designers by Mark Panay
撰寫無侵入式的JavaScript(Unobtrusive JavaScript)來新增簡單的行為到網頁的範例。
Tags: Selectors, Manipulation, Effects, Events

Live Examples of jQuery by Cody Lindley
jQuery背後的基礎互動示範。※朋友可以找jQuery 錦囊妙計來看看
Tags: Selectors, Attributes, Traversing, Effects, Manipulation

介面

Introduction to jQuery Animation by Abel Mohler

51+ Best of jQuery Tutorials and Examples by Sydney Monis

jQuery Tutorials for Designers by Sydney Monis

Highlight words in an html page by Reuven

jQuery Tabs 建置簡單的jQuery頁籤控制（初學者的教學）by Greg Sidelnikov

Create a Roll Over Star Comment Rating with JQuery by Eli Geske

Form validation with jQuery from scratch by Daniel

Create an Accessible Slideshow Using jQuery by Jacob Gube

Create a Vertical Scrolling Menu with Tooltips by Andrew Valums

Create a Horizontal Scrolling Menu with CSS and jQuery by Andrew Valums

Slide and Hide Section with jQuery by WebAir

The Dollar Sign 錢字符號($)的意義？

Smooth and Stunning Popup from scratch by Adrian Mato (yensdesign.com)

Create a smooth tabbed menu in jQuery by Adrian Mato (yensdesign)

How to Validate Forms in both sides using PHP and jQuery by Adrian Mato (yensdesign.com)

Improving search boxes with jQuery by Adrian Mato (yensdesign)

Submit a Form Without Refresh Using jQuery by NETTUTS

Create a tabbed content area by Queness

Simple jQuery Modal Window Tutorial by Queness

AJAX Interface using JQuery/PHP by Vision Master Designs

Building modal panels with jQuery by Daniel

Jquery Image Loader 在圖片完全載入前新增載入的動畫 by Bali Web Design

State-Saving jQuery Accordion Menu Without Reloading the Page by Michael Jacob Davis

Creating a very basic Image Gallery in JQuery by Jack Franklin

Disjointed rollovers in jQuery by Justin Farmer

Image Enlargement with .animate() by Justin Farmer

jQuery Frequently Asked Questions (FAQ) by Michael Jacob Davis

Ajaxify your web pages using jQuery by Bali Web Design

SEO friendly ajax by Bali Web Design

Building a Lightbox by dryan

Simple JQuery Image Slide Show with Semi-Transparent Caption by Queness

jQuery Image Gallery/News Slider with Caption Tutorial by Queness

Create an Attractive jQuery Menu with Fadein and Fadeout Effect by Queness

Create a Vertical, Horizontal and Diagonal Sliding Content Website with jQuery by Queness

Simple Lava Lamp Menu Tutorial with jQuery by Queness

jQuery Moving Tab and Sliding Content Tutorial by Queness

Create a Stunning Sliding Door Effect with jQuery by Queness

jQuery Thumbnail with Zooming Image and Fading Caption Tutorial by Queness

Making a jQuery pagination system by web.enavu

Making a jQuery infinite carousel with nice features by web.enavu

How to make a completely reusable jquery modal window by web.enavu

Make a custom tab interface with JQuery by web.enavu

Cool navigation menu made with JQuery by web.enavu

Sliding door effect with JQuery by web.enavu

Image splitting effect with CSS and JQuery by web.enavu

Create an amazing contact form with jQuery. by web.enavu

Making image captions using jQuery by web.enavu

Client side filtering data with jQuery by web.enavu

Create a Thumbnail with Fading Caption Using jQuery by Queness

Create a Simple Infinite Carousel with jQuery by Queness

jQuery Drop Down Menu for RSS Subscription Tutorial by Queness

7 Amazing Presentation Slides to Teach you How to Code with jQuery by web.enavu

Making a Cool Spotlight Effect with jQuery by web.enavu

jQuery Photo Slide Show with Slick Caption Tutorial Revisited by Queness

雜項

Beginner’s Plugin Tutorial 從頭建置jQuery外掛（初學者教學）。

Run my JQuery script only if a certain element exists! by Eli Geske

How to switch to an Alternate Stylesheet using jQuery by Web Dev Codex

Roundup of jQuery Menus by Query7 Staff

5 Tips for Better jQuery Code by Marc Grabanski

Creating AJAX websites based on anchor navigation using jQuery by Ivan Guardado Castro & Adrian Mato (yensdesign)

Easy XML Consumption Using JQuery by Joseph Ucuzoglu

Creating a very basic Image Gallery in JQuery by Jack Franklin

jQuery Thickbox and ColdFusion Dynamic Image Resizing by Raymond Camden

An introduction to jQuery and Form Validation by Raymond Camden

Useful and Handy jQuery Tips and Tricks by Queness

JQuery/PHP: Simple Random Text Generation Box

使用jQuery跟…

ASP.NET UserControl and jQuery by Hossein Rahmani

Using AjaxPro by Michael Schwarz
如何使用jQuery跟Ajax.NET Professional在一起的範例。
Tags: Ajax

Using Ext With jQuery by Juha Suni
開始使用Ext函式庫跟jQuery。
Tags: Ajax, Plugins, Ext
Simple Web 2.0 with Lasso and jQuery
jQuery snippets
An introduction to using JQuery with Lasso
Using jQuery with Adobe AIR
Quickstart Guide to ColdFusion+jQuery – 關於使用jQuery跟ColdFusion components (.cfc)的簡單範例。
My First ExtJS DataGrid (Part 2, Part 3, Part 4, and Part 5)
JQuery Ajax + Rails
jQuery + jqGrid + Rails = Powerful Grid Component in your Rails app!
CakePHP Ajax “Quick Save” with jQuery by Marc Grabanski:
使用jQuery跟CakePHP在一起來執行一個Ajax表單的儲存。
jQuery跟Google Maps的教學by Marc Grabanski:
- jQuery & Google Maps #1 Basics – 在Google Maps API裡開始使用jQuery。
- jQuery & Google Maps #2 Ajax – 使用Ajax儲存及擷取位置。
Using jQuery with Joomla 1.5 and PHP 5
Using jQuery to Enhance the Appearance and Usability of a Structured Document with the NetBeans IDE by Lloyd Dunn
Drupal 6.x 建置一個lavaLamp選單 * GeeksandGod.com – Tutorials
Integrating SharePoint 2007 and jQuery (Part 2, SmartTools.jQuery on CodePlex) by Jan Tielens

教學來源

這些網站致力於定期提供一些jQuery的教學。

jQuery Tutorials 入門教學
TutorialsPoint – jQuery Tutorials
Learning jQuery maintained by jQuery Project Team member Karl Swedberg
jQuery for Designers (incl. screencasts) maintained by jQuery Project Team member Remy Sharp
valums.com – jQuery & Web Tutorials
15 Days of jQuery
Detached Designs – jQuery Blog
absolute beginner’s blog
jQuery HowTo, Tutorials & Plugins
jQuery UI 入門教學
yensdesign.com – jQuery & web tutorials
Query7.com – jQuery Tutorials & Plugin Reviews
Queness – jQuery tutorials
TutsValley – jQuery Tutorials

jQuery API 教學

這些教學請直接看jQuery API裡的不同觀念，並且深入地討論。

jQuery核心

Introducing $(document).ready() by Karl Swedberg
介紹$(document).ready()函式以及說明它是如何地重要。
Tags: jQuery Core

Multiple $(document).ready() by Karl Swedberg
使用$(document).ready()的一些進階技巧。
Tags: jQuery Core
Quicker Than window.onload()

尋訪(Traversing)跟選擇器

How to Get Anything You Want by Karl Swedberg
介紹jQuery選擇器跟尋訪的方法以及他們在導覽DOM的使用
Tags: Selectors, Attributes, Traversing

Zebra Striping Made Easy by Jack Born
條紋表格列需要的簡單程式碼
Tags: Traversing, Selectors, CSS, Events

Auto-Selecting Navigation by Remy Sharp
在導覽選單中突出顯示當前頁面。
Tags: Selectors, Attributes, Traversing

5 Quick jQuery Tips by Rowan Lewis
一些你可以用jQuery來做什麼的快速小範例。
Tags: Selectors, Attributes, Traversing, Manipulation, CSS
Stylesheet Switcheroo
Getting Select List Values by Marc Grabanski
使用jQuery選擇器從選擇列表取得目前的值或選項。

操控、屬性跟CSS

Wrapping Images With A Drop Shadow by Jack Born
使用.wrap()來新增一個陰影圖片的簡單範例。
Tags: Manipulation

Rounded Corners by Jack Born
新增圓角到元素，不使用額外的標記。
Tags: Manipulation

Multiple File Upload Magic by Jack Born
建置一個非侵入式的多重檔案上傳輸入。
Tags: Selectors, Attributes, Manipulation, Events, Forms

Getting Around The Minimum Height Glitch by Yansky
逃避最小高度問題的快速教學
Tags: Selectors, CSS

PNG Opacity Fix for IE6 by Timo Besenreuther
如何在Internet Explorer 6顯示去背透明的PNG檔
Fancy Drop Cap (Part 2)
Multiple Fancy Drop Caps
Semi-transparent Rollovers
Fancy quote marks while preserving presentation
Turn Nested Lists Into a Collapsible Tree With jQuery
Easy Multi Select Transfer with jQuery

事件

Mouse Position by Patrick Hall
有一些快速的範例來尋找滑鼠在頁面的位置。
Tags: Events, Attributes

Accordion Menu (Screencast) by John Resig
使用基本的事件和動畫來建置簡易、非侵入式的手風琴選單。
Tags: jQuery Core, Selectors, Attributes, Events, Effects, Screencasts

AJAX and Events by Karl Swedberg and Jonathan Chaffer
討論在適當的時候繫結事件處理器到DOM元素。
Tags: Ajax, Events, Manipulation

Really Simple Live Comment Preview by Karl Swedberg
新增即時預覽的功能到Wordpress的迴響區。
Tags: Events, Attributes, Forms
Creating an OS Web Interface in jQuery by Adrian Mato (yensdesign.com)
Smooth and Stunning Popup from scratch by Adrian Mato (yensdesign.com)
Create an amazing music player using mouse gestures & hotkeys in jQuery by Adrian Mato & Ivan Guardado Castro (yensdesign.com)
Collapsible Layouts – 使用jQuery來建立智慧型可折疊的頁面配置。
Working with Events – Event Delegation
Working with Events – Event Re-binding
Easy Image Rollovers with CSS class
Animated Menus
Blurring Links
Affiliate Link Loveliness
Pop Up Menu
Set a Hover Class for Anything
Characters Remaining on an Input Field
Text Box Hints
News scroller/ticker with jQuery and AJAX – multiple news, fading effect, mouseover pause
jQuery Text Resizing by ShopDev

A simple tab script with jquery by Codersstuff.com

Ajax

Quick and Dirty Ajax by Jack Born
提供所有使用jQuery不同型態的Ajax快速瀏覽的螢幕錄影。
Tags: Ajax, Screencasts

Safer Contact Forms Without CAPTCHAs by Jack Born
建置一個可以完整阻止垃圾郵件發送者錯誤地使用你的表單，這是基於jQuery的解決方案。
Tags: Ajax, Manipulation, Forms

Edit in Place with Ajax by Jack Born
建置一個使用Ajax就地編輯(edit-in-place)解決方案可以背景儲存所有資料。
Tags: Ajax, Events, Manipulation, Forms

AJAX and Events by Karl Swedberg and Jonathan Chaffer
討論在適當的時候繫結事件處理器到DOM元素。
Tags: Ajax, Events, Manipulation
How to load content via AJAX in jQuery by Adrian Mato (yensdesign.com)
Create a shoutbox using PHP and AJAX (with jQuery) by Adrian Mato (yensdesign.com)
Creating AJAX websites based on anchor navigation using jQuery by Ivan Guardado Castro & Adrian Mato (yensdesign)
Easy Ajax With jQuery by Akash Mehta
Simplify Ajax development with jQuery by Jesse Skinner
Ajax development with jQuery using PHP and JSON objects by FactsAndPeople.com
No More Ajax Headaches – 如何使用FireBug來除錯Ajax的呼叫
Auto-populating Select Boxes using jQuery & Ajax – 此外還使用PHP跟JSON。
Ajax with Special Effects
Ajax’ed Forms
Easy AJAX with jQuery
Auto-Complete Field with jQuery, JSON & PHP (Part 2)
AJAX callbacks with jQuery
jQuery and XML
jQuery Makes Parsing XML Easy by Marc Grabanski
說明jQuery如何讓解析XML更容易的快速程式碼範例。
create ajax based login form using jquery PHP by Bali Web Design updated here
auto populate dropdownlist via ajax request with Jquery by Bali Web Design
PUT and DELETE with jQuery
Ajax with jQuery, PHP and JSON objects by FactsAndPeople.com
Create a Ajax based Form Submission with jQuery+PHP by Queness
A Simple AJAX Driven Website with jQuery+PHP by Queness
Checking username availability with ajax using jQuery by TutsValley

外掛程式開發

jQuery Plugin Tutorial 藉著這些外掛模式學習製作jQuery外掛
A Plugin Development Pattern by Mike Alsup
How to create a plugin for jQuery by Adrian Mato (yensdesign.com)
jQuery for Programmers – 使用jQuery撰寫簡易、動態的外掛。
Building jQuery Plugins
Turn your jQuery code into a richer, unit testable, plugin
A Really Simple jQuery Plugin Tutorial by Queness
Introduction to building jQuery plugins by Andrew Valums
jQuery Plugin Patterns by Winton Welsh
Building Your First jQuery Plugin
Building jQuery Plugins by Daniel
How to display tips by creating a jQuery plugin by Adrian Mato & Ivan Guardado Castro (yensdesign.com)
A Really Simple jQuery Plugin Tutorial by Queness

工具

這些導覽檢視用不同的工具跟應用程式來使用jQuery。

Web服務

Parsing Yahoo Pipes JSON Feeds with jQuery – 關於如何從Yahoo Pipes Web服務使用jQuery來解析跟顯示JSON資訊來源。

法文教學

jQuery.info

Babylon-Design

Les Intégristes

WebInventif.fr

LePotlatch.org

Une FAQ accessible et facile à mettre à jour avec JQuery

ChezNeg – Le blog d’un développeur web

Le blog technique de Loïc Bar

jQuery et ASP.NET

Snoupix.com

Webjax.eu

portail sur jQuery

documentation en français de l’API

NoShade.net

Créer un mini-site avec jQuery

西班牙文教學

Cómo crear un menú de pestañas elegante en jQuery publicado por Web.Ontuts
Cómo validar un formulario utilizando PHP y Javascript (jQuery) publicado por Web.Ontuts
Cómo crear un Menú Contextual en Javascript mediante jQuery publicado por Web.Ontuts
Cómo crear un Plugin para jQuery publicado por Web.Ontuts
Mejorando las cajas de búsqueda mediante jQuery publicado por Web.Ontuts
JSONP, llamadas entre dominios (incluye plugin para jQuery) publicado por Web.Ontuts
JavaScript fácil y rápido con jQuery
Eventos en jQuery
Conceptos esenciales de la librería JQuery Además incluye una variedad de ejercicios en el sitio los cuales puedes: probarlos, modificarlos y ver los resultados inmediatamente.
Introducción a jQuery

Haciendo Tablas Cebra Facilmente by Jack Born
Esta es una traducció del artí “Zebra Striping Made Easy” de Jack Born. Pequeño tutorial a través de ejemplos sencillos de código para hacer tablas tipo cebra.
Tags: Traversing, Selectors, CSS, Events
VideoTutorial Nº1 Curso de JQuery En este primer VideoTutorial hacemos una introducción en la que vemos cuales son las ventajas del uso de este tipo de frameworks, así como las funcionalidades que nos ofrece. Terminamos creando el primero proyecto con jQuery y explicando la sintaxis y estructura básica que utiliza. De momento publicados 14 videotuoriales del Curso.
Manual de jQuery publicado por DesarolloWeb.com

荷蘭文教學

jQuery – Die Grundlagen
jQuery – AJAX-Formular AJAX-Formular in einer Thickbox – Ich werde im folgendem beschreiben wie ich vorgegangen bin mit wenigen Eingriffen in den HTML-Code ein PopUp mit dem Formular zu erstellen in welchem die Übermittlung per AJAX geschieht.
jQuery – Tutorial-Serie Es geht darum eine existierende Webseite ohne Eingriff in CSS und HTML-Code zu dynamisieren. Ohne Javascript im Browser des Besuchers bleibt alles wie es ist, alle Inhalte sind voll zugänglich. Wer aber Javascript akiviert hat bekommt eine durch Animation und Ajax aufgewertete Funktion.
Lange Textbeiträge nur teilweise anzeigen mit Möglichkeiten diese ganz darzustellen.
jQuery und Google Maps – Google Maps mit jQuery-Hilfe einbinden.
Javascript debug Helfer mit JQuery – die ganz schnelle Tour.
Ajax-Tooltip-Image – Ein Bild eingebunden als Link per MouseOver anzeigen.
JQuery Beispiele – Grundlagen für Ajax und zugriffe auf Objekte anhand von Beispielen
JQuery und WordPress – Tutorial für die Einbindung von jQuery in WordPress Themes
JQuery Einstiegs Tutorial – jQuery Tutorial mit Beispielen

波蘭文教學

jQuery – to łatwe! – jeden z pierwszych w Polsce, przystępnie napisany kurs jQuery dla początkujących

jQuery – Narzędzia. – pierwsza część cyklu opisującego narzędzia jQuery.

jQuery – Narzędzia. – pierwsza część cyklu opisującego narzędzia jQuery.

jQuery – Narzędzia v2. – druga część cyklu opisującego narzędzia jQuery.

jQuery – Kurs – Wskaźniki. – pierwsza część spolszczonej dokumentacji.

jQuery – JSON przez POST – bardzo prosty dodatek do jQuery – postJSON.

土耳其文教學

jQuery-TR jQuery için Türkçe destek grubu
jQuery ve Seçiciler Seçiciler nedir ve jQuery için ne anlam ifade ederler?
jQuery ve Css işlemleri jQuery ile Css işlemleri nasıl yapılıyor?

jQuery ve Olaylar jQuery ile olay yönetimi nasıl yapılıyor?

jQuery ve DOM işlemleri jQuery ile DOM (document object model) işlemleri nasıl yapılır?

jQuery ve AJAX işlemleri jQuery ile AJAX işlemleri nasıl yapılır?

jQuery ve Efekt işlemleri jQuery ile efekt işlemleri nasıl yapılır?

jQuery ile animasyon yapmak jQuery ile animasyon işlemleri nasıl yapılıyor? Temel ve ileri düzey bilgi. Yazar: Jeffrey Jordan Way, Çeviri: Alastyr – By Mehmet Tahta