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 - Making A Slide In (Drop down) transparent menu using jQuery (Screencast) by Logan M
- Manipulating Elements in jQuery by Logan M
- Using Selectors to Select HTML Elements in jQuery by Logan M
- Basics of jQuery, Slide Effect (Screencast) by Logan M
- jQuery for JavaScript Programmers by Simon Willison
- Simplify Ajax development with jQuery by Jesse Skinner
- Simple Introduction to jQuery
- Simplify JavaScript development with jQuery
- Getting Started with jQuery (Dr. Dobb's Journal)
- jQuery Crash Course
- jQuery Tutorial on dev.opera.com
- Building Your First jQuery Plugin
- Jquery : An Introduction by Amit Singh
[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
- An introduction to using JQuery with Lasso
- 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.
- Learning jQuery Blog
- 15 Days of jQuery
- Official jQuery Blog
- absolute beginner's blog
- jQuery for Designers (incl. screencasts)
[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
- PNG Opacity Fix for IE6 by Timo Besenreuther
How to make transparent PNGs possible in Internet Explorer 6
- Fancy Drop Cap (Part 2)
- Multiple Fancy Drop Caps
- Semi-transparent Rollovers
- Fancy quote marks while preserving presentation
- Using jQuery to turn nested lists into a collapsible tree
- Easy Multi Select Transfer with jQuery
[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.
- Easy Image Rollovers with CSS class
- 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
[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 - No More Ajax Headaches - How to debug Ajax calls with FireBug
- 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)
- AJAX callbacks with jQuery
- jQuery and XML
- jQuery Makes Parsing XML Easy by Marc Grabanski
- create ajax based login form using jquery PHP by Bali Web Design
[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
- Using jQuery with Spket IDE
[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é
- Comment utiliser jQuery dans un bookmarklet ?
- Laissez le visiteur choisir comment il va ouvrir un lien
[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
- Tutorial Básico de JQuery Tutorial de Jquery para principiantes (mas)
- 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.
- 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
- 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
[edit]
Tutorials auf Deutsch
- jQuery - Die Grundlagen
- 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]
O jQuery po polsku
- jQuery - to łatwe! - cykl przystępnie napisanych tutoriali jQuery dla początkujących.
[edit]
Türkçe eğitseller
- jQuery-TR jQuery için Türkçe destek grubu
- jQuery dünyasına adım atıyoruz jQuery nedir?
- jQuery ve Seçiciler Seçiciler nedir ve jQuery için ne anlam ifade ediyorlar?
- jQuery ve Css işlemleri jQuery ile Css işlemleri nasıl yapılıyor?
- jQuery ve Olaylar jQuery ile olay (event) yönetimi nasıl yapılıyor?
- jQuery ve DOM işlemleri jQuery ile DOM (document object model) işlemleri nasıl yapılıyor?
- jQuery ve AJAX işlemleri jQuery ile AJAX işlemleri nasıl yapılıyor?
- jQuery ve Efekt işlemleri jQuery ile efekt işlemleri nasıl yapılıyor?
- jQuery ve JSON işlemleri jQuery ile JSON (javascript object notation) işlemleri nasıl yapılıyor?
- JavaM | Yeni Nesil Internet Teknolojileri JavaM | Yeni Nesil Internet Teknolojileri
[edit]
简体中文辅导
- jQuery 中文社区
- jQuery 中文社区官方论坛
- jQuery 1.2 中文参考文档
- Visual jQuery1.1文档 - 中文版(按功能排序)
- jQuery中文入门指南，翻译加实例，jQuery的起点教程
- jQuery技巧总结
- jQuery 學習心得
- 小试牛刀——一篇jQuery小教程
- jQuery简单入门(系列)
- jQuery 中文插件教程
- jQuery 滑动菜单Demo实例
[edit]
繁體中文教學
[edit]
日本語チュートリアル
- jQuery逆引きサンプル集
- チュートリアル：jQueryの仕組み
- jQuery 開発者向けメモ
- jQueryでリンクボックスを作成
- jQueryの魔法
- 他のコードとの衝突を避けるテクニック(about .noConflict() and namespace)
[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 – Javascript нового поколения - статья, описывающая практически все аспекты использования jQuery.
- Примеры использования jQuery - От простого к сложному.
- Некоторые переводы. Примеры. Подсказки - Некоторые переводы, примеры, подсказки, обсуждения. Перевод руководства "15 дней с jQuery".
- http://black-zorro.com/mediawiki/Часть_первая_про_jquery и http://black-zorro.com/mediawiki/Часть_вторая_про_jquery- Первая и вторая части авторских материалов посвященных jquery.
- Как использовать jQuery с другими библиотеками ?
[edit]
Tutoriais em português
- http://jquerybrasil.com/ Começa aqui! Um monte de tutoriais, artigos, exemplos, um forum, e enlaces para outros sites. Excelente!
- Redescobrindo o Javascript com JQuery Breve introdução
- Usando jQuery na prática Tutorial sobre seletores com exemplos práticos
- Por onde começar com o jQuery Tradução para o português do Brasil do tutorial Getting Started with jQuery.
- Tabelas “às riscas” II - DOM Scripting / jQuery (Zebra striping) Como fazer tabelas "às riscas" (zebra striping): primeiramente com HTML e PHP, logo com Javascript DOM Scripting e finalmente com jQuery.
- FAQ Dropdown com o Jquery (demo)
- Ajax com o Jquery (demo)
- SWFUpload com o jQuery por Alexandre Magno (demo)
[edit]
Các hướng dẫn bằng tiếng Việt
- jQuery Hoạt Động Như Thế Nào by John Resig dịch [ 0byte]
Giới thiệu cơ bản về jQuery và các khái niệm để bạn có thể sử dụng.
Tags: jQuery Core, Selectors, CSS, Traversing, Manipulation, Events, Effects
[edit]