Inspiration

50+ jQuery Tutorials und mehr für Einsteiger und Fortgeschrittene

6. Januar 2009
von

Nach der Sammlung von Plugins für jQuery folgt nun eine mit Tutorials, Beispielen und weiteren Ressourcen rund um jQuery. Diese Liste erhebt sinnvollerweise keinen Anspruch auf Vollständigkeit und bietet als bunte Mischung verschiedener Themengebiete im Bereich “jQuery” etwas für Designer und Programmierer gleichermaßen.

Tutorials und Beispiele

jQuery Crash Course
Wie der Name vermuten lässt, ein Crash-Kurs in Sachen jQuery.

Working with jQuery Part 1 Part 2
jQuery-Einführung aus dem IBM-Entwicklernetzwerk.

DOM Manipulation and sorting
Tutorial zur DOM-Manipulation.

Model-View-Controller in jQuery
Umsetzung des MVC-Konzepts in jQuery.

Namespaces in jQuery
Ein Tutorial über das Namespacing in jQuery.

Canvas-Element
Tutorial zum Canvas-Element aus HTML 5.

Multilevel Dropdownmenü
Ein Tutorial zur Erstellung von Multi-Level-Menüs mit jQuery und CSS.

Pop-Up Menu
Ein Tutorial zur Erstellung von PopUp-Menüs.

jQuery iPod Style Drilldown Menu
Ein Menü wie auf dem iPod.

Fading Menu – Replacing Content
Erklärt knapp Menü-Items mit Fading und Ersetzung von Content.

Tooltips mit jQuery und CSS
Das Tutorial stellt dar wie Tooltips mit jQuery und CSS angepasst werden können.

Making Tooltip
Ein weiteres Tutorial zu Tooltips ohne Plugins.

SelectBox into Slider
Das Tutorial zeigt, wie sich eine normale Selectbox mit der Slider-Komponente paaren lässt.

Preloading Content
Erklärt, wie das Preloading von Content mit jQuery funktioniert. Unter anderem für Bilder.

Creating a jQuery-Plugin from Scratch
Erklärt wie jQuery-Plugins von Null an aufgebaut werden.

Using jQuery for Background Image Animations
Animation von Hintergrundbildern mit jQuery und Javascript.

Barriereärmeres UI mit jQuery
Das Tutorial erklärt die Ersetzung von Checkboxen und Radiobuttons mit jQuery UI und UI-Reflecting.

Build a Simple RSS Reader with JQuery
Erklärt den Bau eines einfachen RSS-Readers mit jQuery.

Defining your own functions in jQuery
Erklärt, wie eigene Funktionen in jQuery definiert werden.

jQuery Image Loader
Loader für mehrere Bilder.

Event Delegation
Tutorial zu Events in jQuery.

Event Delegation Made Easy
Ein weiteres Tutorial zur einfachen Delegation von Events in jQuery.

Create a non-native jQuery Events
Zum Bau von nicht-nativen Events in jQuery.

jQuery Table Manipulation
Server- und client-seitige Manipulation von Tabellen über jQuery.

Auto-populate multiple select boxes
Mehrere Selectboxen automatisch befüllen.

Multiselect-Transfer
Zeigt wie sich einfach Transfer zwischen Multiselectboxen lösen lassen.

AutoCompleter
Bau eines Autocompleters für Eingabefelder.

Submit A Form Without Page Refresh
Erklärt ausführlich das Senden von Formularen ohne Page-Refresh.

Getting Browser Information
Browser-Informationen mit jQuery auslesen.

Animated Drop Down Menu with jQuery
Ausführliches Tutorial zu animierten Dropdown-Menüs.

Keypress Navigation
Tutorial zur Erstellung einer Keypress-Navigation.

Learning About The Animation Abilities Of jQuery
Über die Animationsfähigkeiten von jQuery.

Ajax with jQuery
Ein weiteres Tutorial zu einfacherem Ajax mit jQuery.

Simplify Ajax development with jQuery
Tutorial aus dem Entwickler-Netzerk von IBM zur Entwicklung von Ajax mit jQuery.

Passing Input Arrays
Input-Arrays in jQuery für Ajax-Applikationen.

CodeIgniter and Ajax using jQuery
Ajax unter der Verschmelzung von CodeIgniter und jQuery.

Make a Video Badge
Video-Badge mit jQuery und der API von Blip.tv.

Improved Current Field Highlighting in Forms
Highlighting von selektierten Formularfeldern durch die Umgebung.

LavaLamp-Plugin
Tutorial zur Erstellung des Lavalamp-Plugins

Efficient Tag Cloud Algorithm
Algorithmus für eine Tagcloud in jQuery.

Creating a fading header
Erklärt, wie sich mit jQuery eine Headergrafik mit Fading umsetzen lässt.

Fixing IE Overflow Problem
Tutorial zum Fixing von Überlaufproblemen im IE mittels jQuery.

Hacking transparent PNG support into IE6
Erklärt einen Hack zur Unterstützung von PNG-Transparenz im IE6 mittels IE PNG Fix, CSS und jQuery.

jQuery & Greasemonkey
Zur Verwendung der jQuery-Library mit dem Firefox-Add-On Greasemonkey für User-Scripts.

Sammlungen

jQuery Basics
Eine Umfangreiche Sammlung mit Tutorials zu grundlegenden Funktionen in jQuery.

Learning jQuery
Umfangreiche Sammlung von Tutorials zum Thema jQuery.

15 Days of jQuery
Eine Tutorial-Serie, die vom Anfänger zum wissenden Anwender führt.

jQuery for Designers
Immer mal wieder nützliche Tutorials für Webdesigner.

jQuery Tutorials For Designers
10 Tutorials für Webdesigner zur Verwendung von jQuery.

jQuery and JavaScript Coding: Examples and Best Practices
Eine ganze Zahl guter Beispiele für die Verwendung von jQuery.

5 Tips for better jQuery Code
5 Ratschläge für sauberen und besseren Code.

Ressourcen

jQuery Reference Widget
Widget für das Mac OS X – Dashboard mit Informationen zur API.

Visual jQuery
Eine visualisiertes jQuery als Nachschlagewerk.

Cheatsheet
Cheatsheet für jQuery zum Ausdrucken oder als Online-Version für mobile Geräte wie das iPhone.

Weiterer CheatSheet
Zum Ausdrucken in Schwarzweiß

ThemeRoller
ThemeRoller für jQuery UI-Elemente. ™

Seit 2008 freier Webworker mit Schwerpunkt auf journalistischer Berichterstattung und (Online-)PR. Täglich konfrontiert mit unzähligen Tools und Technologien im Web.

17 Kommentare zu „50+ jQuery Tutorials und mehr für Einsteiger und Fortgeschrittene
  1. Sevencoder am 6. Januar 2009 um 10:29

    Nette Sammlung :)

  2. Manuel am 6. Januar 2009 um 13:32

    Nicht zu vergessen –> jQuery for absolute beginners @ blog.themeforest.net

  3. […] … gibt es bei Dr. Web zu finden. […]

  4. Mario am 7. Januar 2009 um 17:35

    Gibt es denn so eine Liste oder ein Pluginliste auch für andere Frameworks? Mootools? Kennt da jemand was? Mit Herrn Google komme ich da immer nicht sehr weit, wenn ich nicht genau weiss, was ich eigentlich haben will…

  5. Rene Schmidt am 8. Januar 2009 um 12:51

    @Manuel: Den Stil Deines Avatarbildchens habe ich schon häufig gesehen. Gibts dafür einen Editor oder sowas? Interessiert mich mal.

  6. […] Eine interessante Linkliste von über 50 Artikeln für Einsteiger und Fortgeschrittene zu jQuery gibt es seit Anfang des Jahres bei Dr. Web. […]

  7. […] published a long list of plugins and tutorials for the en vogue JavaScript framework jQuery on drweb.de (Sorry the lists are only available in […]

  8. Florian Fiegel am 10. Januar 2009 um 17:15

    @Mario Ich greife das mal auf und setze das auf meine Liste.

  9. […] 50+ jQuery Tutorials und mehr für Einsteiger und Fortgeschrittene […]

  10. […] gibt es im Web einige gute Tutorials zu dem Thema. drweb.de hat dahingehend eine interessante Sammlung zusammengestellt. Visual jQuery ist zum Beispiel eine […]

  11. […] 50+ jQuery Tutorials und mehr für Einsteiger und Fortgeschrittene […]

  12. kogentis - Michael Schratz am 22. Januar 2010 um 20:09

    Danke für die Liste – muss mich gerade wieder in jquery reinfinden, da passt einiges aus der Aufzählung – schon eine Weile her, da waren wir bei Version 1.2.3 – jetzt 1.4

    Nachtrag – der jquery basics Link ist tot

  13. Rizzi400 am 4. März 2010 um 14:51

    Ich sach einfach mal DANKE !!!
    Genau das habe ich gesucht…

  14. Christian Löffler am 12. April 2010 um 12:53
  15. JQuery | Lisa M Lederer am 15. Juni 2012 um 00:02

    […] 50+ Tutorials für JQuery […]

  16. NoName am 7. Februar 2013 um 11:44

    […]50+ Tutorials für jQuery[…]

    Vielleicht hätte man beifügen sollen das es auf Englisch ist.
    Das macht diese Seite echt unsympatisch. Ich habe
    so das Gefühl das nur auf Klicks geachtet wird.

    • Dieter Petereit am 7. Februar 2013 um 12:50

      Ah so. Tutorials sind in der breiten Masse stes englisch-sprachig. Unsere eigenen hier bei Dr. Web sind in deutscher Sprache verfasst, wie natürlich das ganze Magazin. Insofern verstehe ich das geäußerte Gefühl nicht…

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!