Anzeige
Tutorialbeschreibung

jQuery - Elemente ein- und ausblenden

jQuery - Elemente ein- und ausblenden

Der Zugriff auf die Elemente einer Seite mit normalem JavaScript ist zwar möglich, allerdings nicht ganz einfach. Anders sieht das bei jQuery aus. Dieses Tutorial demonstriert, was jQuery auf dem Gebiet der DOM-Manipulation draufhat. Gezeigt wird das anhand zahlreicher Beispiele. So erfahren Sie unter anderem, wie sich die Sichtbarkeit von div-Elementen per Mausklick ändern lässt. Wofür das Ganze gut sein soll? In dem div-Element könnte beispielsweise ein Bild enthalten sein, das man nun ganz einfach per Mausklick ein- und wieder ausblenden kann. Mit jQuery sind solche Anwendungen problemlos umsetzbar.


Was es mit dem DOM auf sich hat, wurde bereits beschrieben. Entscheidend ist im Zusammenhang mit jQuery aber vor allem der Aspekt, dass man das DOM ganz einfach manipulieren kann.
Wichtig für die Arbeit mit jQuery ist das $-Zeichen. Dieses dient als Synonym für die Funktion jQuery. Erwartet wird ein DOM-Element oder ein Selektor.
 

$("table")

Weiter geht es mit der Frage, wann der JavaScript-Code eigentlich ausgeführt werden soll. Denn ein Problem von JavaScript ist es, dass der Code direkt mit dem Parsen gestartet wird. Das kann gut gehen, führt aber auch oft zu Problemen. Um diese zu umgehen, greift man in JavaScript auf Event-Handler zurück.

<script type="text/javascript">
function meineFunktion()
{
   //Hier steht die Funktion
}
window.onload = meineFunktion;
</script>

In diesem Beispiel wird meineFunktion() erst ausgeführt, wenn die Seite vollständig geladen wurde. Und mit vollständig ist in diesem Zusammenhang gemeint, dass neben dem HTML-Dokument eben auch externe Stylesheets, JavaScript-Dateien und die zum Dokument gehörenden Bilder geladen wurden. Das führt oftmals dazu, dass eigentlich benötigte Funktionen noch nicht geladen werden können. In jQuery gibt es für dieses Problem eine Lösung. Hier verwendet man einfach den Aufruf $(document).ready(function(). Dadurch wird überprüft, ob das HTML-Dokument vollständig geladen ist.

$(document).ready(function() {
//Code
    $("div").text("Hallo, Welt!");
});


Diese Variante hat den Vorteil, dass explizit überprüft wird, ob der DOM-Baum bereitsteht. Innerhalb einer Seite können mehrere $(document).ready-Events definiert werden. Die Funktionen werden dann in der Reihenfolge ausgeführt, in der sie im Quelltext stehen.

Für die gezeigte Syntax gibt es übrigens noch eine verkürzte Alternative.

$(function() {
    //Code
});

Es existiert in jQuery allerdings auch ein Event, durch das man überprüfen kann, ob tatsächlich alle zum Dokument gehörenden Elemente geladen wurden. Das entspricht dann der aus JavaScript bekannten Anweisung window.onload. 

$(window).load(function() {
    // Hier kommt Code
});

Der Code wird in diesem Fall erst ausgeführt, wenn tatsächlich alle Elemente geladen sind. Das gilt dann also nicht nur für das HTML-Dokument selbst, sondern auch für Frames, Objekte, Bilder usw. Das ist praktisch, wenn man auf seiner Seite beispielsweise eine Galerie anbieten und diese mit Effekten ausstatten möchte. Damit den Besuchern nicht erst Alternativtexte der Bilder angezeigt werden, kann man mit einer Kombination aus ready und load arbeiten. Ein ausführliches Beispiel – dann übrigens auch mit Hinweisen dazu, wie man ein entsprechendes Ajax-Ladebild generiert – gibt es im nächsten Tutorial dieser jQuery-Serie. An dieser Stelle soll es das jedoch zunächst in Sachen Event-Handler gewesen sein.


jQuery online testen

Zunächst noch ein ganz allgemeiner Hinweis dazu, wie Sie Ihre jQuery-Applikationen erstellen und testen können. Das ist zunächst einmal natürlich lokal mit jedem Editor möglich. Es geht aber auch direkt online. Und diese Variante ist äußerst komfortabel. Für das Testen von JavaScript im Allgemeinen und jQuery im Besonderen empfiehlt sich das Online-Tool JS Bin. Diese Anwendung finden Sie unter http://jsbin.com/.

Bilder



 
Darüber kann man ganz bequem seinen Code testen und direkt ausführen. Jetzt könnte man natürlich die Frage stellen, was denn der Vorteil von JS Bin gegenüber einem lokalen Editor ist. Die Antwort verbirgt sich in dem Auswahlfeld Include Library.

Bilder



Denn dort kann man das gewünschte JavaScript-Framework auswählen. Unter den angebotenen Frameworks befindet sich natürlich auch jQuery. Um die Beispiele aus diesem Tutorial direkt bei JS Bin testen zu können, stellen Sie jQuery ein. Ob Sie nun aber lokal arbeiten oder JS Bin nutzen, bleibt letztendlich Ihnen überlassen. Die Beispiele dieses Tutorials funktionieren hier und da gleichermaßen.

 



 

Elemente ein- und ausblenden Eingangs dieses Tutorials wurde angekündigt, dass anhand eines Beispiels gezeigt wird, wie sich mittels Mausklick die Sichtbarkeit eines div-Bereichs verändern lässt. Das ist äußerst praktisch. Denn so kann man "störenden" Text oder Bilder ganz einfach vom Besucher ausblenden lassen. Interessant kann das aber beispielsweise auch sein, wenn man zusätzliche Informationen in Form von Hilfetexten einblenden möchte.

Bilder



 
So sieht die Seite mit eingeblendeten Hilfetexten aus.

Bilder



Zunächst der HTML-Bereich.
<body>
    <div>
      <a href="#" class="links">Hier steht Text 1.</a>
      <div>
        Ich bin der Hilfetext zum 1. Text.
      </div>
    </div>
    <div>
      <a href="#" class="links">Hier steht Text 2.</a>
      <div>
        Ich bin der Hilfetext zum 2. Text.
      </div>
    </div>
</body>


 
Das eigentliche Skript hält sich – wie das bei jQuery nun mal üblich ist – von seinem Umfang her in Grenzen.
<script type="text/javascript"> 
/* <![CDATA[ */
$(document).ready(function() {
  $("a.links").click(function() {
    $(this).next("div").toggle();
  });
});
/* ]]> */
</script>

[Beispiel anzeigen]

Der Event-Handler click sucht in diesem Fall nach dem div-Element, das dem gerade angeklickten Hyperlink folgt, und verändert dessen Sichtbarkeit. Ist der div-Bereich also ausgeblendet, wird er durch das Anklicken des Links wieder eingeblendet. Andersherum funktioniert das dann genauso.

 
Eine weitere interessante Anwendung ist in diesem Zusammenhang der Einsatz von Filtern. So kann man zum Beispiel seinen Besuchern einen Warnhinweis anzeigen, wenn sie durch das Anklicken eines Hyperlinks auf eine externe Webseite umgeleitet werden.  

Bilder



Zunächst der Skript-Bereich:

 
<script type="text/javascript"> 
/* <![CDATA[ */
$(document).ready(function() {
  $("a")
    .filter(".extern")
      .click(function() {
        alert("Achtung, Sie werden auf eine externe Seite umgeleitet.");
      })
});           
/* ]]> */
</script>


Hier wird überprüft, ob Hyperlinks die Klasse extern besitzen. Ist das der Fall, löst das click-Ereignis eine alert()-Box aus. Der HTML-Bereich hält dann keine besonderen Überraschungen parat.

<ul>
    <li><a href="http://www.psd-tutorials.de/" class="extern">psd-tutorials.de</a></li>
    <li><a href="http://www.sport1.de/" class="extern">Sport1</a></li>
    <li><a href="http://www.n-tv.de/" class="extern">n-tv.de</a></li>
</ul>
 
[Beispiel anzeigen]

Wichtig ist hier lediglich, dass den Links die Klasse extern zugewiesen wird. Nur dann funktioniert die Funktion. Achten Sie darauf, dass die Klasse exakt so heißen muss, wie es bei .filter(".extern") angegeben wurde.

Fazit

Dieses Tutorial hat noch einmal deutlich gemacht, wie einfach das Event-Handler-Modell von jQuery ist. Mit denkbar wenig Aufwand lassen sich Anwendungen erstellen, für die man normalerweise sehr gute JavaScript-Kenntnisse besitzen müsste. Bei jQuery geht das sehr viel einfacher. So lassen sich mit wenigen Zeilen Code beispielsweise Galerien erstellen und die Bilder mit Effekten einblenden. Eine solche Anwendung ist dann Gegenstand des kommenden Tutorials.

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von dragongrafix
  • 17.07.2010 - 17:45

danke für das tutorial :) bilder und effekte klingt cool :)

Portrait von Shinitai
  • 10.04.2010 - 22:02

Danke für das Tutorial un JS Bin

Portrait von perra
  • 05.01.2010 - 01:47

check ich nicht wo was hinkommt, ist das nicht bischen wenig an codes?
muss ich denn schon vor kenntnisse haben?
oder schon eine struktur besitzen und die codes dann einfügen?

oder soll man das nur in den head und body einfügen und das klappt? muss ich nicht jquery js einfügen oder so?

Portrait von Daniel Koch
  • 05.01.2010 - 06:38

Unter http://www.psd-tutorials.de/modules.php?name=News&file=article&sid=3103&titel=JQuery_jquery-eine-einfuehrung gibt es ein kleines Tutorial, das den Einstieg in die jQuery-Welt erleichtert.

Portrait von johanna52
  • 06.12.2009 - 10:26

interessant - freue mich nun auf die nächsten angekündigten Tuts: Galerie und Bilder mit Effekten

Portrait von Maximus73
  • 05.12.2009 - 08:13

Vielen Dank für das Tutorial

Portrait von silver129
  • 04.12.2009 - 22:05

Danke für deine Mühe und deine ausführlichen tutorials. ich freue schon auf den nächsten Teil mit der gallerie.

Portrait von stefan_binder
  • 03.12.2009 - 10:38

ganz gut erklärt fürn Anfang!
hatte mir bereits bisschen mehr erwartet da ich schon ein paar Erfahrungen damit gemacht habe.

Ich finde jquery aber super! freu mich auf weitere Tutorials =)

Portrait von Pfoto76
  • 03.12.2009 - 08:53

Herzlichen Dank für Deine Mühe!

Aber wie genau lässt sich diese merkwürdige Schreibweise erklären?
z.B. $(document).ready(function() { ... });

Könnte man sagen, es gibt ein "ready"-Event des Dokument-Objektes und dies schaut, ob eine Funktion vom Programmierer hinterlegt wurde? Ich hörte mal was von Callback-Funktion, ist das sowas?

Dank und Gruß Jürgen

Portrait von Daniel Koch
  • 03.12.2009 - 09:59

Hallo Jürgen,
immer, wenn man mit Events arbeitet, sollte man es innerhalb von $(document).ready() notieren. Alles was darin steht, wird geladen, wenn das DOM vollständig da ist, aber noch bevor der eigentliche Seiteninhalt geladen ist.
Viele Grüße
Daniel

Portrait von websmurf
  • 03.12.2009 - 08:34

Gutes Tutorial - jsbin ist ein interessanter Tipp.

Portrait von Parrot2602
  • 02.12.2009 - 23:12

Danke für deine Mühe und deine ausführlichen tutorials. ich bin schon gespannt auf den nächsten Teil mit der gallerie :-)
Grüße

Portrait von mros
  • 02.12.2009 - 12:32

Vielen Dank.
Super Tut

x
×
×