Tutorial: jQuery herunterladen und installieren/einbinden
In meinem letzten Artikel habe ich euch einen kleinen Einblick in jQuery verschafft. Heute will ich euch zeigen, wie ihr einfach jQuery runterladen und installieren könnt, um die tollen Funktionen auch in eurer Webseite benutzen zu können! Viel Spaß beim Lesen meines Tutorials!
Schritt 1: jQuery runterladen
Dazu geht ihr einfach auf http://www.jQuery.com und ladet euch die neuste Version runter. Auf der Webseite seht ihr dazu gleich auf der Startseite einen fetten Download-Button. Zusätzlich bietet jQuery ein development- und ein production-Packet an, doch für unsere Zwecke reicht das production völlig aus, da wir ja selber jQuery nicht weiterentwickeln wollen. Der Download-Button leitet einen dann zu Google-Code weiter, wo man sich die jquery-1.3.2.min.js-datei dann runterladen kann. Als Alternative dazu kann man auch gleich die latest-Versionbenutzen! Dazu gleich mehr.
Schritt2: jQuery „installieren“
Der Begriff „Installieren“ ist hier eigentlich schon fehl am Platz, denn jQuery ist ja kein Programm, es muss jediglich eingebunden werden, und zwar so:
<script type='text/javascript' src="jquery-1.3.2.js"></script>
oder die latest-Version:
<script type='text/javascript' src="http://code.jquery.com/jquery-latest.pack.js"></script>
Hierbei ist zu beachten, dass es passieren kann, dass wenn eine neue Version rauskommt, die vielleicht einige Dinge aus der älteren durch andere ersetzt hat o.ä. unter Umständen unsere Scripte nicht mehr funktionieren! Daher würde ich die Library entweder runterladen oder das hier verwenden:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
Soweit so gut. Wenn das getan ist, steht uns die große weite Welt von jQuery schon zur Verfügung! Probiert es aus, z.B. mit dem Script, welches ich euch in meinem letzen Artikel vorgestellt habe.
Zur Erinnerung, sowas wie hier:
<script type="text/javascript"> $(document).ready(function () { $('#zauberei').click(function() { $('#box').show('slow'); }); }); </script> <a href="#" id="zauberei">Zauberei!</a> <div id="box" style="display:none;">Hallo Welt!</div>
Das wäre geschafft! zusätzlich neben der funktion show(), die anscheinend etwas zeigt, gibt es z.B. auch die Methode hide(). Probieren wirs aus.
<script type="text/javascript"> $(document).ready(function () { $('#zauberei').click(function() { $('#box').show('slow'); }); $('#close').click(function() { $('#box').hide('slow'); }); }); </script> <a href="#" id="zauberei">Zauberei!</a> <div id="box" style="display:none;">Hallo Welt! <br /> <a href="#" id="close">Close</a> </div>
Mit so etwas könnte man z.B. eine Artikelbox realisieren, wo wenn man auf „mehr..“ klickt, sich der Rest des Artikels zeigt!
Beim nächsten Mal beschäftigen wir uns dann mal mit ein paar weiteren schönen Methoden!
Bis dahin
Euer Hydra
Ich mag solche Tutorials, echt gut beschrieben.
Allerdings wäre ein Live-Beispiel / Demo auch sehr schön hier 🙂
.-= maTTes´s last blog ..Aktion Weg mit dem IE 6 =-.
Bisschen dünn, wäre schön, wenn du auf die Funktionsweise von jQuery eingegangen wärst (was ist z:B. $(document).ready(function ()?, wie funktioneren asynchrone Anfragen?). Eine Demo wäre auch klasse. Außerdem macht es wenig sinn, die API nochmal aufzuschreiben. Versuch lieber eigenständig etwas mit der API zu kreieren z.B. durch Kombination von Funktionalitäten.
@maTTEs: Das mit der Livedemo ist hier so ne Sache, das geht iwi nur Extern, weil Simon keine lust hat sich damit zu befassen wie ich hier JS reinknallen kann 🙁
@René: In diesem Artikel ging es ja auch jediglich darum, wie man jQuery benutzen kann! Auf die verschiedenen Selectoren,Methoden, Effecte, Ajax usw. gehe ich in meinen nächsten Artikeln ein! Eine Demo wäre angebracht, das ist Wahr, wer eine funktionieren Demo sehen will findet diese bei meinem zuvorigen Artikel „Zaubern mit jQuery“.
Wenn du jemandem PHP beibringen willst, fängst du ja auch nicht mit OOP an oder so, sondern wahscheinlich erstmal wie man Appace installiert (z.B. XAMPP).
Danke für die konstruktive Kritik! 🙂
.-= Hydra´s last blog ..Tutorial: jQuery herunterladen und installieren/einbinden =-.
[…] Zeit mal meine Artikelreihe über jQuery fortzuführen. Wir wissen was jQuery ist, wie man es herunterladen und einbinden kann und so ungefähr wofür es gut […]
Ohne tutorials wie dieses wär ich wohl total aufgeschmissen. jquery ist echt genial!
Interessantes Tutorial
Für „Programmierfaule“ ist auch das hier recht interessant
http://jqueryui.com/
JQuery Anwendungen online modifzieren, downloaden und einbinden
Das klingt wirklich interessant. Das muss ich mir bei Gelegenheit mal genauer anschauen.
Cooles Installtut. Scheint wirklich einfach zu sein, ich hab noch nie was mit Jquery gemacht, scheint einfach ne Scriptsprache zu sein und wird auch so eingebunden. Die Webseite von Jquery hat auch schon schöne Samples, einfach mal druchklicken. Viele Grüße, Daniel