Jquery alapok
JQuery
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=”css\ui-lightness\jquery-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.
Ja kellene még ilyen tutorial mondjuk valami folytatás!
Köszi a tutorialt, jó volt, de tényleg szükség lenne többre is.
Móni
igen, csinálhatnál egy nagyon részelteset, tuti kiraknák a linked prog.hu-ra, proponora stb… pl. itt most az ‘each’ micsoda….?
Sziasztok, örülök hogy érdekel titeket, ha lesz egy kis szabadidőm ígérem írok részletesebbet is.
@tomi: Az each arra való, hogy az előtte lévő $(‘div’) segítségével kapott elemeken végigmenjen. A függvény pedig amit paraméterként kap function () {…} egyből lefut és az elemeken elvégzi a benne definiált műveleteket. De egy kommentben tényleg nem lehet ezt leírni, majd írok róla bővebben.