jQuery beillesztése a HTML oldalba
Látogassunk el a jquery.com oldalra, és a download menüpont alatt töltsük le az egyik fájlt
Több letöltési forrás közül is választhatunk. Mindegyik szerveren 2 fájl közül választhatunk:
- jquery-x.y.z.js
- jquery-x.y.z.min.js
Az első verzió egy jól olvasható, szerkeszthető fájl, a második pedig egy módosított verzió, ami arra törekszik hogy a fájl minél kevesebb karakterből álljon, azaz egy tömörített verzió.
Ha nem akarunk bele nyúlni a jquery könyvrátba, válasszuk a másodikat. Éles környezetben is érdemes ezt használni, hiszen amikor a felhasználó meglátogatja az oldalt, ez a fájl minden oldalfrissítésnél letltődik hozzá.
A fájlt nevezzük át jquery.js-re. ezzel a fájlal megegyező könyvtárban hozzuk látre a html fájlunkat:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
Készítsünk egy olyan oldalt, amin megjelenik egy link, de rá kattintva egy figyelmeztető ablak ugrik fel.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(event){
alert("As you can see, the link no longer took you to jquery.com");
event.preventDefault();
});
});
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
Továbi bevezető példák találhatóak a http://docs.jquery.com/How_jQuery_Works oldalon.