jQuery Getting Started Guide

Update: This guide is now available as part of the offical jQuery documentation

Ce guide est aussi disponible en version français

jquery-top.jpg
Wer beim Webdesign Javascript einsetzen möchte, sollte sich unbedingt jQuery anschauen. jQuery ist eine sehr schlanke und gut dokumentierte Bibliothek, die sich von vergleichbaren Produkten primär durch eine spezielle Syntax absetzt.

Für einen gute Einstieg in jQuery habe ich einen “jQuery Getting Started Guide” geschrieben. Dieser setzt lediglich Grundkenntnisse in Javascript und dem Document Object Model (DOM) voraus. Und Englischkenntnisse, da das ganze auf Englisch verfasst ist. Innerhalb des Guides sind reichlich Verweise auf weitere Dokumentationen, Downloads und Erweiterungen.

Empfehlenswert ist die Durcharbeitung zumindest der ersten drei Kapitel. Danach kann es sinnvoll sein, erstmal auf eigene Faust weiter zu experimentieren und z.B. ein konkretes Problem, an dem man sitzt, mit jQuery zu lösen. Die weiteren Kapitel gehen noch noch einiges weiter und behandeln AJAX, Effekte sowie die Benutzung un das Entwickeln von Plugins.

Bei Fragen zum Guide oder jQuery selbst kann ich gerne weiterhelfen.

Vielen Dank an Kaio für die obige Illustration, die ursprünglich für eine Präsentation entstanden war.

-Jörn

No more comments.
  1. Wierklich bequem Starter Erklärung.
    Ich kam zu jQuery durch spip und näher jquery.info

    Wie ist es mit dieser Artikel nach franzosich zu übersetzen ?
    Könnten wir tun …

    Das wäre nicht schlecht etwas Kontakt zu bauern.
    Alle Fälle , danke und bis bald.

    bertrand

  2. La traduction française est sur Danse avec jQuery puis 22, 23 et 24.
    Merci bien Jörn !

  3. I read this Guide and found an error:
    IN “Animate me: Using FX”,the second example:


    $(document).ready(function() {
    $("a").toggle(function() {
    $(".stuff").animate({
    height: 'hide',
    opacity: 'hide',
    }, 'slow');
    }, function() {
    $(".stuff").animate({
    height: 'show',
    opacity: 'show'
    }, 'slow');
    });
    });

    it can not work, and I modify it to this:

    $(document).ready(function() {
    $("a").toggle(function() {
    $(".stuff").animate({
    height: 'hide',
    opacity: 'hide' //remove the ","
    }, 'slow');
    }, function() {
    $(".stuff").animate({
    height: 'show',
    opacity: 'show'
    }, 'slow');
    });
    });

    now , it’s working well.

  4. Thanks for the hint, I’ll fix that.

  5. Carl Andrew Ponte

    hi, do you have a tutorial on how i could create a dynamic content lists… similar to the widget browser on this page,

    http://www.apple.com/downloads/dashboard/

    when you click an item on the first list, it sends a query so that the second list would load base on the query from list 1?

    we are in desperate need something similar for our Thesis. any help much appreciated 🙂

    Thanks a lot… still studying jQuery

  6. Hi Carl!

    Without knowing more details about your specific problem, I can just guess in the wild what you need. Maybe this can already help you:

    $('#list1').click(function(event) {
      // get some data from the clicked element, eg. it's href for a list of anchors
      var href = $(event.target).href();
      // load the content into list2 from the url
      $('#list2').load(href);
    });

    I hope that helps. Anyway, asking on the jQuery mailing list gives more people the chance to help you.

  7. I think this guide is Great.I want to translate this guide to Chinese ,can I?

    if I am honoured your permission,when I finish the translation, I will send you the link of the article.

    Thanks.

  8. The job is done, the chinese version here :

    http://keel.sike.googlepages.com/jQuery_getting_started.html

    The green texts I added are my further explanations.
    Thank you so much.:)

  9. Hi. Thank you so much for this guide. I’m half way through and I’ve already learned so much. So much that I started extending something from the page but have run into a wall. I’m sure you have better things to do than answer noob questions but I thought I’d ask anyway.

    I wanted to see if I could hack up a simple accordion from your FAQ show/hide function in the guide. The idea was to get all of the dds that aren’t == to the answer variable and slide them up. When I try to get the array and exclude answer via the not() method and return the array to the firebug console, answer is still in there! How can I get it out? 🙂

    
    	$('#faq').find('dd').hide();
    	$('#faq').find('dt').click(function() {
               answer = $(this).next();
    
             if (answer.is(':visible')) {
                 answer.slideUp();
             } else {
                 answer.slideDown();
             };
    
    	  		answers = $("#faq").find("dd").not(answer);
    				console.log(answers);//shows all four dds
         });
    

    Thanks for any help and thanks so much for the tutorial.

  10. Hi Will!

    I can’t see any obvious errors in your code, therefore: Could you post a test page?

    While you are at it: Did you try the latest jQuery version?

  11. wow, thanks! Yes, I’m using the latest jquery.js

    here’s a link to the page with the console.log() inserted.

    http://luktown.org/random/starterkit/accordian_test.html

    The rest of the code I was trying to use is there but commented out. It’s all in the header of the html document for ease of viewing.

    Thank you so much!

    Will

  12. Hey Will,

    looks like what you discovered was a bug in jQuery. I just fixed it and uploaded a build for you to test: http://joern.jquery.com/dist/

    Let me know if you get more problems with that.

  13. Jörn,

    thank you! tousand dank or something! 🙂

    It works perfectly. I thought I was losing my mind.

    I really appreciate the time on the tutorial and following up on my question both. I hope some one does something random and nice for you today!

    Will

  14. Matt

    Hi there,

    I’ve been going through your tutorial and finding it extremely helpful. I have noticed a strange performance issue with the following example in the rate me section:

    
     $(document).ready(function() {
       function addClickHandlers() {
         $("a.clickMeToLoadContent").click(function() {
           $("#target").load(this.href, addClickHandlers);
         });
       }
       addClickHandlers();
     });
    

    I have multiple anchors pointing to multiple content files. Initially, the content is loaded in quickly, but the more I click the anchors the longer it takes to swap the content, and eventually it crashes my browser (Firefox 2.0).

    Any ideas? I feel like maybe the anchors are collecting multiple event listeners

    Thanks!

  15. Hi Matt,

    you are right, the handlers were applied again and again to the entire document.

    I’ve updated the example and added another note below it, that explains the change.

    Let me know if that works for you.

  16. Rene Leonhardt

    Hallo Jörn,

    Danke für diesen tollen Guide!
    Ich hoffe, in dieser Art wird es noch weitere, spezialisiertere Artikel geben.

    Ich habe zwei Fehler gefunden:

    jQuery.fn.check
    statt
    jQuer.fn.check

    und
    stripRowsOnStartUp
    statt
    stripeRowsOnStartUp
    in der von dir benutzten TableSorter Version.

    Viele Grüße,
    René

  17. Danke Rene, beides korrigiert, in der jetzt offiziellen Fassung: http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

  18. Simon Kelly

    Hi,

    Thanks for the excellent tutorial.

    On the following piece of code…

    $(function() {
    // use this to reset a single form
    $(“#reset”).click(function() {
    $(“#form”).reset();
    });
    });

    … I am getting an “Object doesn’t support this property or method.” js error when i click the Reset link. The error message appears to refer to the reset() method of the DOM form object which is crazy. When I switch this to be $(“#form”).submit(); it works as expected with no error.

    Any help would be appreciated.

    Regards,
    Simon Kelly

  19. Tim

    Off topic:
    The example on your tutorial “Getting Started with jQuery” doesn’t work:
    http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

    the jquery.js is missing from the directory you call it

  20. offtopic: ich bin begeistert von der illustration, gibts davon irgendwo mehr zu sehen? feinste grüße!

  21. Die hattte mir ursprünglich jemand für eine Präsentation über jQuery angefertigt. Ich hab sie irgendwo noch in höherer Auflösung, aber mehr auch nicht. Wenn Interesse besteht, lad ich sie hoch, bzw. such den Link.

  22. very good, in Brazil ja we have a community translating jquery
    🙂

    kakaroto

  23. Fred

    I, like Simon have the problem (reset() function can’t be referenced)with the $(”#form”).reset(); call, in both FF 2.0.0.4 and IE7.

    Even $(”#form”).submit(); si very occasionally throwing an error (jQuery not defined).

    document.forms[‘form’].reset(); however works without any problems… as does the rest of this jquery tutorial so far (thanks for that by the way!!)

    mmh, there seems to be something fishy under the hood…

    any ideas?
    cheers Fred

    PS. I am working on a PC running XP with all SPs

  24. @Fred: That is now fixed in the tutorial.

  25. dito

    Servus, sehr nettes Tutorial, ich beschäftige mich gerade mit Ruby on Rails und Prototype/Scriptaculous sind einfach nicht mein Ding. Endlich habe ich die JS-Library gefunden, die einfach ist und meiner Denkweise entspricht.

  26. @dito: Cool! Zur Kombination von Rails mit jQuery solltest du mal bei Yehuda Katz vorbeischauen.

  27. Bhaarat

    first of all thanks a lot for the great getting started tutorial. There is one problem with with the tutorial on this link http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

    the second tablesorter code is not highlighting the rows as expected. How can we fix this?

  28. Endlich ein schönes und umfassendes Tutorial. Wir werden es in den nächsten Updates bei usn auch verwenden. Vielen Dank.

  29. Michael

    Hi Jörn,

    super Tutorial, vielen Dank dafür!
    Ein kleiner Fehler ist mir aufgefallen. Im source zum tablesorter plugin muss tablesorter klein geschrieben werden, damit es funktioniert, also

    $("#large").tablesorter();

    statt

    $("#large").tableSorter();

    Zumindest in der aktuellen Version, dich ich mir gerade heruntergeladen habe, vielleicht war es früher anders.

    Viele Grüße
    Michael

  30. Eric

    Hi, very well written guide. Thanks for your effort!

    FYI. It looks like the jQuery plug-ins link (in 3 places) should now point to: http://plugins.jquery.com

    Eric

  31. Sean

    Hi, I’m working through your jQuery tutorial, and had a suggestion for the rating system part. If people don’t have access to a server, they can change the “rate.php” to “rate.html” and put this in rate.html:
    <ratings><average>4.7</average><count>10</count></ratings></code>

    Sure, it is not live, but it lets the person going through the tutorial see that data is coming from an external source.

  32. Friend

    Thanks for the tutorial!!
    I’ve read the tutorial translated to brazilian portuguese in http://i18n.2kminterativa.com.br/jquery/jquery-getting-started-pt_br.html
    Obrigado!!

  33. Dear:

    I’m studing Jquery with your document ! It’s so great ! hope i can have a talk with you after ^_^