Tutorials
From jQuery JavaScript Library
Browse Tutorials by Language:
[edit]
English Tutorials
[edit]
General Tutorials
These tutorials cover the fundamentals of the jQuery library - covering a diverse number of topics.
- How jQuery Works by John Resig
A basic introduction to jQuery and the concepts that you need to know to use it.
Tags: jQuery Core, Selectors, CSS, Traversing, Manipulation, Events, Effects
- Getting Started with jQuery by Jörn Zaefferer
Goes through the basics of jQuery, all the way up to building plugins.
Tags: jQuery Core, Selectors, Attributes, Traversing, Manipulation, Events, Effects, Ajax, Plugins
- jQuery For Designers by Mark Panay
Examples of writing Unobtrusive JavaScript to add simple behavior to a web page.
Tags: Selectors, Manipulation, Effects, Events
- Live Examples of jQuery by Cody Lindley
An interactive demonstration of the basics behind jQuery.
Tags: Selectors, Attributes, Traversing, Effects, Manipulation - Simplify Ajax development with jQuery
- Simple Introduction to jQuery
- Simplify JavaScript development with jQuery
[edit]
Using jQuery with...
- Using AjaxPro by Michael Schwarz
An example on how to use jQuery and Ajax.NET Professional together.
Tags: Ajax
- Using Ext With jQuery by Juha Suni
Getting started with the Ext library and jQuery.
Tags: Ajax, Plugins, Ext - Simple Web 2.0 with Lasso and jQuery
- Quickstart Guide to ColdFusion+jQuery - Easy example on using jQuery with ColdFusion components (.cfc).]
- My First ExtJS DataGrid (Part 2, Part 3, Part 4, and Part 5)
- JQuery Ajax + Rails
[edit]
Sources for tutorials
These are sites that are dedicated to regularly providing a number of jQuery tutorials.
[edit]
jQuery API Tutorials
These tutorials directly look at different concepts presented in the jQuery API and discuss them in-depth.
[edit]
jQuery Core
- Introducing $(document).ready() by Karl Swedberg
An introduction to the $(document).ready() function and explaining how important it is.
Tags: jQuery Core
- Multiple $(document).ready() by Karl Swedberg
Some advanced tips for working with $(document).ready().
Tags: jQuery Core - Quicker Than window.onload()
[edit]
Traversing and Selectors
- How to Get Anything You Want by Karl Swedberg
An introduction to jQuery selectors and traversal methods, and their use in navigating the DOM
Tags: Selectors, Attributes, Traversing
- Zebra Striping Made Easy by Jack Born
Walking through the simple code needed to stripe table rows.
Tags: Traversing, Selectors, CSS, Events
- Auto-Selecting Navigation by Remy Sharp
Highlighting the current page in a navigation menu.
Tags: Selectors, Attributes, Traversing
- 5 Quick jQuery Tips by Rowan Lewis
Some quick, short, examples of what you can do with jQuery.
Tags: Selectors, Attributes, Traversing, Manipulation, CSS - Stylesheet Switcheroo
[edit]
Manipulation, Attributes, and CSS
- Wrapping Images With A Drop Shadow by Jack Born
A simple example of using .wrap() to add a drop shadow to an image.
Tags: Manipulation
- Rounded Corners by Jack Born
Adding rounded corners to an element, using no extra markup.
Tags: Manipulation
- Multiple File Upload Magic by Jack Born
Building an unobtrusive multiple file upload input.
Tags: Selectors, Attributes, Manipulation, Events, Forms
- Getting Around The Minimum Height Glitch by Yansky
Just a quick tutorial for getting around the min-height glitch
Tags: Selectors, CSS - Fancy Drop Cap (Part 2)
- Multiple Fancy Drop Caps
- Semi-transparent Rollovers
- Fancy quote marks while preserving presentation
[edit]
Events
- Mouse Position by Patrick Hall
Some quick examples of finding the position of the mouse on a page.
Tags: Events, Attributes
- Accordion Menu (Screencast) by John Resig
Building a simple, unobtrusive, Accordion-style menu using basic events and animations.
Tags: jQuery Core, Selectors, Attributes, Events, Effects, Screencasts
- AJAX and Events by Karl Swedberg and Jonathan Chaffer
Discusses binding event handlers to DOM elements at the appropriate times.
Tags: Ajax, Events, Manipulation
- Really Simple Live Comment Preview by Karl Swedberg
Adding a live preview to the comment entry area of Wordpress.
Tags: Events, Attributes, Forms - Collapsible Menu - Use jQuery to create the ultimate collapsible and expandable menu.
- Blurring Links
- Affiliate Link Loveliness
- Pop Up Menu
- Set a Hover Class for Anything
- Characters Remaining on an Input Field
- Text Box Hints
[edit]
Effects and Animations
- Basic Show and Hide by Karl Swedberg
An introduction to hiding, showing, and toggling the display of elements.
Tags: Effects, Traversing
- Scroll Up Headline Reader by Karl Swedberg
An automatic, animated, headline reader.
Tags: Events, Effects, CSS - Slicker Show and Hide
- Effect Delay Trick
[edit]
Ajax
- Quick and Dirty Ajax by Jack Born
A screencast that provides a quick run through of all the different types of Ajax that're possible with jQuery.
Tags: Ajax, Screencasts
- Safer Contact Forms Without CAPTCHAs by Jack Born
Building a complete, jQuery-based, solution for stopping spammers from mis-using your forms.
Tags: Ajax, Manipulation, Forms
- Edit in Place with Ajax by Jack Born
Building an edit-in-place solution that saves all data in the background, using Ajax.
Tags: Ajax, Events, Manipulation, Forms
- AJAX and Events by Karl Swedberg and Jonathan Chaffer
Discusses binding event handlers to DOM elements at the appropriate times.
Tags: Ajax, Events, Manipulation - Safer Mailto Links
- Auto-populating Select Boxes using jQuery & Ajax - Also makes use of PHP and JSON.
- Ajax with Special Effects
- Ajax'ed Forms
- Easy AJAX with jQuery
- Auto-Complete Field with jQuery, JSON & PHP (Part 2)
[edit]
Plugins
- jQuery for Programmers – Writing a simple, dynamic, plugin using jQuery.
[edit]
Tools
These guides look at using jQuery with different tools and utilities.
- Using Firebug and jQuery (Screencast)
- Have Your jQuery Fun on Any Site with Greasemonkey
- Getting started with Aptana and jQuery
- jQuerify Bookmarklet
[edit]
Web Services
- Parsing Yahoo Pipes JSON Feeds with jQuery - A tutorial on how to parse and display JSON feeds from the Yahoo Pipes Web Service using jQuery.
[edit]
Tutoriaux en Français
- Danse avec jQuery
- Transformer tous les liens d’une page
- Ajouter une boîte à coucou
- Un paragraphe trop à l’étroit
- Le plugin « editable »
- Géolocaliser Lille
- Le plugin « form »
- Un repas équilibré
- Ajouter une image dans une page
- Cloner des éléments
- Le code révélé
- Jouer à Shanghaï
- Une boîte de recherche un peu smart
- L’effet machine à écrire
- end()
- Bandeau d’actualité
[edit]
Tutoriales en español
- Comienza aqui con jQuery Una traducción al español del tutorial simple de más arriba con algunas modificaciones, añadidos, etc.
- Introducción a jQuery
- Eventos en jQuery
- La potencia de los framework con 5 trucos para jQuery
- Text Grow, tus input al estilo del.icio.us con jQuery
- Montemos un previsualizador de comentarios con jQuery
- Expandable Sidebar Menu, el acordeón de jQuery
[edit]
Tutorials auf Deutsch
- Lange Textbeiträge nur teilweise anzeigen mit Möglichkeiten diese ganz darzustellen.
- Javascript debug Helfer mit JQuery – die ganz schnelle Tour.
- Ajax-Tooltip-Image - Ein Bild eingebunden als Link per MouseOver anzeigen.
[edit]
中文辅导
- jQuery 中国 [QQ群>>群1:29844482 群2:35707648 群3:40195475]
- jQuery 中文官方论坛
- jQuery中文入门指南，翻译加实例，jQuery的起点教程
- 小试牛刀——一篇jQuery小教程
- jQuery 學習心得
- jQuery文档-1.1 API 中文版(按字母排序)
- Visual jQuery1.1文档 - 中文版(按功能排序)
- jQuery研究会，是专门研究jQuery的组织，大家在这里可以分享使用jQuery的经验，以及解答使用jQuery过程中的疑问。QQ群号：11782071
- JQuery 中文文档
[edit]
日本語チュートリアル
[edit]
Guide in italiano
- Racchiudere il contenuto di un elemento... in un altro elemento
- Interfaccia Tab-based semplice e accessibile con jQuery
[edit]
Учебники по-русски
Уроки по jQuery:
- Примеры использования jQuery - От простого к сложному.
- jQuery – Javascript нового поколения - статья, описывающая практически все аспекты использования jQuery.
[edit]
Tutoriais em português
- Por onde começar com o jQuery Tradução para o português do Brasil do tutorial Getting Started with jQuery.
- AJAX com a incrível jQuery Artigo interessante sobre Jquery
[edit]