Tutorials
[ Zurück ]


Einige Jquery funktionen


In diesem tutorial will euch einige funktionen der Javascript bibliothek JQuery vorstellen.
Als erstes müsst ihr Jquery von www.jquery.com herunterladen es gibt 2 Versionen eine koprimierte die sehr klein ist und eine unkomprimierte Version diese ist für Entwickler gedacht.

JQuery einbinden:

 

<script src="jquery-1.4.2.js"></script>
Mit diesem Code wurde jquery eingebunden, als dieses Tutorial geschrieben wurde war die Version 1.4.2 aktuell.

Bei JQuery dreht sich alles um die Funktion $() .
Mit dieser Funktion kann wie folgt auf Elemente zugegriffen werden:

  • Auf ein Tag mit $("p");

  • Auf eine id oder Klasse mit $("p#id"); $("p.meineKlasse");
Damit jquery erst anfängt wenn die Seite ferig geladen ist gibt es die funktion $(document).ready( function() {/* ... */} ), sie ersezt window.onload
Ich möchte hier auf folgende Funktionen eingehen:
  1. .css()
  2. .hover()
    
  3. .slideDown()
  4. .slideUp()
  5. .fadeIn()
  6. .fadeOut()


.css(styleangaben)

die Funktion .css() erwartet Styleangaben:
<script>
$(document).ready(function(){
$("p#border").click(function(){
$("div#test").css("border", "1px solid");
})
$("p#color").click(function(){
$("div#test").css("color", "orange");
})
});
</script>
<p id="border">Border</p>
<p id="color">color</p>
<div id="test">
Dies ist mein Test div
</div>
Beim click auf den Text border wird der border vom div auf 1px gesetzt.
Und bei color wird die Text Farbe des divs orange

.hover() und .click()

die name der Funktionen sollte eigentlich schon alles sagen und click() wurde schon oben verwendet.
Aber trotzdem noch ein Beispiel.
<script>
$(document).ready(function() {
$("ul#list li").hover(
//Effekt bei Maus darüber:
function(){
   $(this).css('background','yellow');
   },
   //Effekt bei Maus wieder weg:
   function (){
	$(this).css('background','transparent');
});
});
</script>
<ul id="list" style="bullets:none;">
<li>Ein Menupunkt</li>
<li>un noch einer</li>
</ul>
mit this wird auf das Element zugegriffen das das Ereigniss ausgelöst hat
hover() erwartet 2 funktionen die erste beim hover die 2 zweite beim mouseout.
click erwartet eine funktion nämlich was beim click geschehen soll.

.slideDown() und .slideUp()

.slideDown() erhöht die höhe eines elements von 0% auf 100% in der Anzal milisekunden die für die Funktion angegeben wurde.
.slideUp macht genau das Gegenteil von 100% zu 0% in den milisekunden:
<script>
$(document).ready(function() {
$("p#slide").click(function() {
if ($("#slideDiv").is(":hidden")) {
    $("#slideDiv").slideDown(500);
    } else {
    $("#slideDiv").slideUp(500);
          }
});
});
</script>
<p id="slide">slide!</p>
<div id="slideDiv">
Mein div f&uuml;r die Slide funktionen
</div>
Für beide funktionen kann noch ein zweites attribut angegeben werden nämlich eine Funktion die ausgeführt wird wenn der vorgang abgeschlossen ist.
Mit der funktion is(":hidden") wird überprüft ob das Element sichtbar ist.


.fadeIn() und fadeOut()

Beide Funktionen erwarten 2 Attribute, das erste anzahl milisekunden bis der Vorgang fertig ist und eine Funktion die ausgeführt wird wenn der Vorgang abgschlossen ist:
<script>
$(document).ready(function(){
$("#fadeDiv").fadeOut(2000).fadeIn(2000).fadeOut(2000).fadeIn(2000);
});
</script>
<div id="fadeDiv">
Dieses Div wird jetzt ein und ausgeblendet
</div>
Mit fadeOut() wird das Element ausgeblendet und mit fadeIn wieder eingeblendet.

Hier habe ich noch alle Beispiele in einer Datei, dabei wurde jquery von der Jquery website eingebunden:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
    <title>Jquery</title>
    <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
</head>

<body>
<script>
$(document).ready(function(){
$("p#border").click(function(){
$("div#test").css("border", "1px solid");
})
$("p#color").click(function(){
$("div#test").css("color", "orange");
})
});
</script>
<p id="border">Border</p>
<p id="color">color</p>
<div id="test">
Dies ist mein Test div
</div>
<script>
$(document).ready(function() {
$("ul#list li").hover(
//Effekt bei Maus darüber:
function(){
   $(this).css('background','yellow');
   },
   //Effekt bei Maus wieder weg:
   function (){
    $(this).css('background','transparent');
});
});
</script>
<ul id="list" style="bullets:none;">
<li>Ein Menupunkt</li>
<li>un noch einer</li>
</ul>
<script>
$(document).ready(function() {
$("p#slide").click(function() {
if ($("#slideDiv").is(":hidden")) {
    $("#slideDiv").slideDown(500);
    } else {
    $("#slideDiv").slideUp(500);
          }
});
});
</script>
<p id="slide">slide!</p>
<div id="slideDiv">
Mein div f&uuml;r die Slide funktionen
</div>
<script>
$(document).ready(function(){
$("#fadeDiv").fadeOut(2000).fadeIn(2000).fadeOut(2000).fadeIn(2000);
});
</script>
<div id="fadeDiv">
Dieses Div wird jetzt ein und ausgeblendet
</div>
</body>
</html>
Und nun sind wir am Ende angelangt, ich hoffe ihr versteht jetzt mehr über Jquery.
Auf der Website hat es eine Referenz auf English mit allen Funktionen: http://api.jquery.com/.
Bei einem Fehler bitte eine CwMail an mich.

Erstellt:02.10.10 17:20
Autor: 1e4ever

Letzte Änderung: 02.10.10 17:45
Geändert von: 1e4ever

Bewertungen:3
Bewertung: 4.3

Freigeschaltet: Ja
Views 4110

Klicke einfach auf einen Stern!
Wollen Sie wirklich das Tutorial löschen?
Wollen Sie wirklich dieses Tutorial zulassen?
Betreff: Report tutorial [id = 392] !
Absender:
Kommentar:
Wollen Sie wirklich dieses Tutorial zulassen?
Absender:
Kommentar:
Folgende User sind hier gerade aktiv:
-

ANZEIGE