We hebben het veel gehad over selectors. Een jQuery-selector zoals $ ("h1") zal alles selecteren
Zal dat $("h1").css("color", "red");
Maar soms worden scripts in het hoofd geladen. Er zijn allerlei excuses voor, meestal slecht, maar laten we niet te oordelen zonder details =).
We kunnen het probleem met het niet vinden van elementen nog steeds op een behoorlijk bevredigende manier oplossen, zelfs als we gedwongen worden scripts in het hoofd te laden. We doen het via de jQuery "DOM Ready" -functie. Letterlijk, wanneer het document klaar is en klaar om te worden gemanipuleerd. Het ziet er zo uit:
$(document).ready(function() ( ));Er is een kortere versie die precies hetzelfde doet:
$(function() ( ));Als u uw code in een dergelijke functie plaatst, zorgt u ervoor dat deze pas wordt uitgevoerd als het document gereed is. Het is eigenlijk een nogal slim stukje code dat het doet, wat natuurlijk moeilijk is om cross-browser te doen. Wat cool is, is dat het behoorlijk snel is. Het is niet hetzelfde als wachten tot het volledige venster is geladen, wat traag is, omdat het wacht tot alle bronnen klaar zijn met downloaden voordat het wordt geactiveerd. DOM ready gebeurt veel eerder. Als u toch moet wachten tot de middelen klaar zijn (u moet bijvoorbeeld een afbeelding meten), dan kunt u daar als volgt op wachten:
$(window).load(function() ( ));Als we ons eerdere JavaScript-in-the-head-probleem oplossen met DOM gereed, ziet de code er als volgt uit:
Learning jQuery $(function() ( $("h1").css("color", "red"); ));