Ez a cikk azoknak szól akik még nem ismerik a JQueryt. Ez egy javascript keretrendszer, mely nagyban megkönnyíti a programozást, egyszerűbbé teszi a DOM elemek elérését és testreszabását, valamint roppant egyszerűvé teszi az AJAX kérések lebonyolítását.
Hogyan kezdjük el?
Először le kell töltened a JQuery csomagot: JQuery letöltése, majd kicsomagolni a a projekted könyvtárába. A kezdőoldalad <head> részébe illeszt be a következő kódot:
<link rel=”stylesheet” type=”text/css” href=”cssui-lightnessjquery-ui-1.7.2.custom.css” />
<script type=”text/javascript” src=”js/jquery-1.3.2.min.js”></script>
<script type=”text/javascript” src=”js/jquery-ui-1.7.2.custom.min.js” ></script>
Innentől kezdve rendelkezésedre áll az összes funckió amit a JQuery biztosít, lássuk hát a legfontosabbakat!
Egy elem elérése
Az első dolog amit meg kell tanulnunk, hisz csak azokon az elemeken tudunk műveletet végezni, amit valamilyen módon ki tudunk választani.
- $(“#footer”) -> visszaadja azt az elemet, melyben az id=”footer”
- $(“a”) -> visszaadja az összes <a> elemet
- $(“.bigPicture”) -> visszaadja azokat az elemeket, melyekben class=”bigPicture”
- $(“ul li:first”) -> visszaadja az összes <ul> elemből az első <li> elemeket
Műveletek az elemeken
Ha megkaptuk a kívánt elemet, a rengetek lehetőség áll előttünk ezek manipulálására. Íme néhány példa
- $(“table”).attr(“cellpadding”,”0″); -> az oldalon lévő összes táblát ellátja egy cellpadding=”0″ tuladonsággal
- $(“a .menu”).click(function(){
alert(“Működik”)
}); -> menu classal rendelkező linkre kattintva a Működik üzenet ugrik fel - $(“div”).each(function () {
$(this).css({border : “medium double Red”, backgroundColor: “orange”});
}); -> Minden <div> elemen végig megy, és a fent látható css kódot adja hozzá
A fenti példákból szerintem jól látható, hogy segítségükkel helyet takaríthatunk meg a html kódban, hisz nem kell minden egyes table elemnek egyenként megadni a cellpadding=”0″ tulajdonságot. Egyvalamit még meg kell említeni, ez pedig a kódok futtatásának időpontja.
Kód futtatása
Ha a saját magunk által írt javascript kódokat egy külön js fájlban tárolunk, ami ajánlott, akkor a <head> tag-en belül, a JQuery betöltése után kell betöltenünk azt. Viszont itt felmerül a kérdés, hogy ha a kódot a DOM betöltődése előtt töltjük be, hogy fog tudni végigmasírozni rajta.
Erre szolgál a $(document).ready(function () { }, melynél a {} közé írt kód akkor fut le, ha a DOM betöltődött.
Összegzés
Első post révén nyilván nem az igazi, de próbálom minél egyszerűbben és érthetőbben leírni, ha bármi kérdésetek van, írjatok nyugodtan.