JQuery - Ein paar allgeimene Fragen

[Lukas]

Hallo !

Ich habe folgende allgeimeine Fragen zu JQuery:
.) Muss jeglicher Code innerhalb von

$(document).ready(function() {

und

});

stehen ?

..und wenn ja warum ?

So wie ich das vertanden habe wird der Code in diesem Block ja eben nur dann ausgeführt, wenn das Dokument vollständig geladen wurde.
Angenommen ich möchte eine Messagebox anzeigen lassen, wenn ein Link geklickt wird:
Der funktionierende Code ist der hier:

$(document).ready(function() {  
 $("a").click(function() {  
  alert("!");  
 });  
});

Warum sieht der Code nicht so aus:

$(document).ready(function()	{  
 //irgendwas  
});  
  
$("a").click(function() {  
 alert("!");  
});  

...schließlich will ich, dass die Messagebox jedesmal bei einem Klick auf ein <a> angezeigt wird und nicht nur wenn gerade das
Dokument fertig geladen wurde... Villeicht  beudeutet das soviel wie: Beim fertigen Laden des Dokuments wird die Funktion wo alert() drinnensteht das Klick-Ergeignis von
<a> Elementen gebunden ?? Wenn ja, wie könnte man eine solche "Bindung" ändern ?

Dann habe ich noch eine Frage:

Folgender Code:

$(document).ready(function() {  
 alert("1");  
 alert("2");  
});  

Dabei wartet wird zuerst die 1. Messagebox angezeigt und danach die 2.

Das ist aber -wie ich festellen musste- nicht immer so:

$(document).ready(function()	{  
 $("a").click(function() {  
  $("div").hide("slow");  
  $("div").show("slow");		  
  $("div").hide("slow");  
  $("div").show("slow");		  
  $("div").hide("slow");  
  //return false;		  
 });  
});

Hier wartet das 1.show nicht auf das 1.hide und so weiter, sondern es wird gleich der Link verfolgt.
Meine Frage dazu: Wie könnte man realisieren, daß ein paar mal aus und eingeblendet wird, und erst dann der Link verfolgt wird.

Wenn man das //return false; auskommentiert, funktioniert der Code wie gewollt (ein hide wird nach slow ausgeführt, usw..) aber man bleibt auf der Seite...

$(document).ready(function()	{  
 $("a").click(function() {  
  $("div").hide("slow");  
  $("div").show("slow");		  
  $("ul").hide("slow");  
  $("ul").show("slow");		  
  return false;  
 });  
});  

Bei diesem Code wiederrum sieht man nur das hiden und showen der <div>s, das hiden und shown der <p> wird offenabar währenddessen (oder gar nicht?) ausgeführt.
Wird bei jQuery nicht jede Zeile nach der anderen ausgeführt, und zwar erst dann, wenn die oberer Zeile fertig ist ?

Ist eine langer Post, sorry, ich hoffe irgendwer kann Licht in mein Dunkel bringhen ...

Danke !

[unknown]

Warum sieht der Code nicht so aus:

Weil du den click-Event-Handler erst dann zuweisen kannst, wenn der Browser das Element geparst und im DOM registriert hat(es muss da sein).

Das ist aber -wie ich festellen musste- nicht immer so:

Dann wird show und hide wohl einen asynchronen Vorgang starten, den du nicht mehr siehst, weil du dem Link folgst.

Wenn man das //return false; auskommentiert, funktioniert der Code wie gewollt (ein hide wird nach slow ausgeführt, usw..) aber man bleibt auf der Seite...

Das return false verhindert die Default-Aktion des Anker-Tags.

[Lukas]

Danke einmal für eure Antworten ...

Das ist aber -wie ich festellen musste- nicht immer so:
Dann wird show und hide wohl einen asynchronen Vorgang starten, den du nicht mehr siehst, weil du dem Link folgst.

Und woher weiß ich, was einen synchronen, und was einen asynchronen Vorgang startet. (Eigentlich frage ich mich ohnehin, warum es hier asynchrone Vorgänge gibt, denn dann ist das doch mulitthreading mit all den Porblemen, das es mit sich bringt?)

Lukas

[Cheatah]

Hi,

Und woher weiß ich, was einen synchronen, und was einen asynchronen Vorgang startet.

indem Du in die Dokumentation schaust? Oder kurz gesagt den gesunden Menschenverstand walten lässt. Alles, was künstlich Zeit kostet (also _sichtbar_, nicht aufgrund benötigter Berechnungen) oder zu einem anderen Zeitpunkt als "sofort" laufen soll, ist sinnvollerweise asynchron.

(Eigentlich frage ich mich ohnehin, warum es hier asynchrone Vorgänge gibt, denn dann ist das doch mulitthreading

Nein, JavaScript kann kein Multithreading.

Cheatah

[Cheatah]

Hi,

.) Muss jeglicher Code innerhalb von
$(document).ready(function() {
und
});
stehen ?

nein. $(document).ready(function) bzw. dessen Kurzform $(function) wartet, bis das Dokument vollständig geladen ist; darin steht also Code, der das komplette Dokument benötigt.

So wie ich das vertanden habe wird der Code in diesem Block ja eben nur dann ausgeführt, wenn das Dokument vollständig geladen wurde.

Eben. Was nicht von diesem (Pseudo-)Ereignis abhängig ist, kann zu anderen Zeitpunkten ausgeführt werden.

...schließlich will ich, dass die Messagebox jedesmal bei einem Klick auf ein <a> angezeigt wird und nicht nur wenn gerade das
Dokument fertig geladen wurde...

Beschäftige Dich mit den Live-Events von jQuery.

Dabei wartet wird zuerst die 1. Messagebox angezeigt und danach die 2.

Ein alert() blockiert das Fenster. Mit jQuery hat dies nichts zu tun.

Das ist aber -wie ich festellen musste- nicht immer so:

Nur wenige Dinge blockieren das Fenster.

Meine Frage dazu: Wie könnte man realisieren, daß ein paar mal aus und eingeblendet wird, und erst dann der Link verfolgt wird.
Wenn man das //return false; auskommentiert, funktioniert der Code wie gewollt (ein hide wird nach slow ausgeführt, usw..) aber man bleibt auf der Seite...

Wenn Du das normale Folgen des Links unterbindest, musst Du selbst dafür Sorge tragen, dass die entsprechende Aktion durchgeführt wird. Verwende das location-Objekt, sofern Du tatsächlich der Meinung sein solltest, es sei sinnvoll, den Nutzer künstlich auf etwas warten zu lassen, was nach seiner Erfahrung und Erwartung sofort geschieht. Erwartungskonformität ist einer der wichtigsten Bestandteile von Usability.

Wird bei jQuery nicht jede Zeile nach der anderen ausgeführt, und zwar erst dann, wenn die oberer Zeile fertig ist ?

jQuery ändert nicht das geringste an der Ausführung von JavaScript. Es ist ein Framework, kein Ersatz. Verstehe es auch als solches. Beschäftige Dich zudem mit JavaScript-Timeouts.

Cheatah

[Joachim]

Hi,

.) Muss jeglicher Code innerhalb von

$(document).ready(function() {[/code]

und

});[/code]

stehen ?

nein. Aber es macht Sinn, Funktionsaufrufe, die Du früher z.B. im onload des body-tags stehen hattest dort zu notieren, den das stellt sicher, dass der Aufruf erst erfolgt wenn das DOM komplett geladen ist.

Warum sieht der Code nicht so aus:

$(document).ready(function() {
//irgendwas
});

$("a").click(function() {
alert("!");
});

»»

wenn dann so:

function init_anker() {
    $("a").click(function() {
        alert("!");
    });
}

$(document).ready(function() {
    init_anker()
});

...schließlich will ich, dass die Messagebox jedesmal bei einem Klick auf ein <a> angezeigt wird und nicht nur wenn gerade das
Dokument fertig geladen wurde.

Genau das machst Du ja - aber das a-tag muss erst mal _da_ sein, bevor Du ihm einen eventhandler zuweisen kannst.

Meine Frage dazu: Wie könnte man realisieren, daß ein paar mal aus und eingeblendet wird, und erst dann der Link verfolgt wird.

indem Du die Aufrufe nicht gleichzeitig sondern nacheinander tätigst, dafür gibts die callback-Funktionalität:

$("div").hide("slow", function(){
    $("div").show("slow", function(){
       // usw
    });
});

function()... wird als Parameter übergeben und erst nach Beendigung der Anim ausgeführt.

Gruesse, Joachim

[suit]

Genau das machst Du ja - aber das a-tag muss erst mal _da_ sein, bevor Du ihm einen eventhandler zuweisen kannst.

Element.

[Cheatah]

Hi,

wenn dann so:
function init_anker() {

was bringt es Deiner Ansicht nach, den globalen Scope mit einem weiteren Member zu befüllen, den man nur ein einziges Mal benötigt?

$(document).ready(function() {
    init_anker()
});

Wenn dann so:

$(document).ready(init_anker);

Oder so:

$(init_anker);

Aber die Funktion init_anker als solche ist Unfug. Sie erhöht nicht mal die Übersichtlichkeit.

Cheatah

[Joachim]

Hi

Aber die Funktion init_anker als solche ist Unfug. Sie erhöht nicht mal die Übersichtlichkeit.

Quark. Die Funktion ist ein schematisches Beispiel, wie man arbeiten _könnte_ wenn ein Teil des Codes ausserhalb von document.ready notiert werden soll.

Gruesse, Joachim