Hent jQuery og brug doc ready

CDN - med doc ready
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
$(document).ready(function(){	

}); // END OF DOC READY
</script>
CDN - med custom.js
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="/scripts/custom.js"></script>
Lokalt - med doc ready
<script src="scripts/jquery-1.11.3.js"></script>
<script>
$(document).ready(function(){	

}); // END OF DOC READY
</script>
Lokalt - med custom.js
<script src="scripts/jquery-1.11.3.js"></script>
<script src="scripts/custom.js"></script>
Wordpress - med function og doc ready
(function($) {   // TIL WP
$(document).ready(function(){	

}); // END OF doc ready
})(jQuery);   // TIL WP

Om jQuery

jQuery er en samling af instrukser skrevet i javascript - jQuery kaldes derfor et "bibliotek". Når jeg vil bruge jQuery på min hjemeside, skal jeg give adgang til biblioteket fra hjemmesiden.

Download eller CDN

Downloader jeg jQuery på min computer, kan jeg bruge biblioteket uden adgang til internettet. En anden mulighed er at benytte CDN (Content Distribution Network) - ved hjælp af CDN kan jeg med et link på min hjemmeside få adgang til en online version af jQuery.

I forhold til hvor hurtigt jQuery loader i browseren, har CDN en lille fordel fremfor en placering på computer eller server.

jQuery som CDN

jQuery kan hentes fra flere forskellige placeringer, hvor Google's og jQuery's services er de mest brugte

CDN fra jQuery's hjemmeside

Find linket til den seneste version af jQuery på jQuery's hjemmeside.

Gå til afsnittet "Using jQuery with a CDN" cirka midt på siden, og kopier linket til den seneste version - vælg den komprimerede version "minified" som loader hurtigst i browseren, og husk at tilføje "http:" til linket:

	
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
children

Kopier link til seneste jQuery-version

jQuery "latest" opdateres ikke

Det har op til 2014 været muligt at hente den seneste version af jQuery ved at bruge "latest" som i linket herunder.

Imidlertid har både Google og jQuery stoppet opdateringen af "latest", således at linket fremover fører til version 1.11.1 og altså ikke den nyeste version.

	
<script src="http://code.jquery.com/jquery-latest.min.js"></script>	

Download jQuery

Download jQuery fra jQuery's hjemmeside.

Vælg den seneste "compressed" version (minimeret til hurtigere loadtime) med support til tidlige versioner af Internet Exploere fra gruppen "jQuery 1.x".

Placer jQuery i en mappe på serveren eller lokalt på computeren - mappen kan for eksempel kaldes "scripts".

Link til biblioteket - se under "kode" i toppen af siden.

<script src="scripts/jquery-1.11.3.js"></script>

Opsætning og brug af jQuery på hjemmesiden

Før jeg kan gå i gang med at bruge jQuery, er der en række ting der skal være i orden - desuden er der nogle tommelfingerregler det er godt at kende.

Link til jQuery-biblioteket

Uanset om jeg linker til jQuery placeret lokalt på computeren, på serveren eller online, er det nødvendigt at indsætte et link til placeringen på hver af de sider som skal bruge biblioteket.

Hvorpå siden linket indsættes har betydning for hastigheden hvormed siden vises i browseren - en god tommelfingerregel er, at alt relateret til javascript, indsættes i bunden af siden lige før </body>.

Placering af jQuery-scripts

Når jeg begynder at udvikle i jQuery, skal jeg vælge hvor jeg vil placere mine funktioner etc - indsættes de direkte på siden på samme måde som linket til jQuery-biblioteket, er det nødvendigt at omkranse dem i tag'et <script>.

Aktiver jQuery med doc ready

Det er nødvendigt at aktivere brugen af jQuery med funktionen 'doc ready' - funtionen indsættes som i top af enten .js-filen eller tag'et <script>

	"sidens indhold herover.."
<script src="scripts/jquery-1.11.3.js"></script>
<script>
$(document).ready(function(){	

	"funktioner etc her.."
	
}); // END OF DOC READY
</script>
</body>

jQuery i Wordpress

Skal jeg bruge jQuery i forbindelse med Wordpress, er det ikke nødvendigt at downloade eller indsætte et link - Wordpress er installeret med egen opsætning til brug for jQuery.

Derinod er det nødvendigt at aktivere jQuery med yderligere en funktion udover 'doc ready':

(function($) {   // TIL WP
$(document).ready(function(){	

}); // END OF doc ready
})(jQuery);   // TIL WP