Gyakran kevert jQuery függvények – 1. rész

Szerző: Gergő | JQuery | 2010 August 6. 13:19

A jQuery egy nagyon sokak által kedvelt és használt javascript keretrendszer, ami rengeteg hasznos függvénnyel könnyíti meg munkánkat. Vannak azonban olyan parancsai, melyeket nagyon könnyen össze lehet keverni. Most ezeket vesszük sorra!

.parent() vagy .parents() vagy .closest()

Mindhárom függvény megegyezik abban, hogy a DOM struktúrában felfelé megkeresi az adott elem szülőjét, vagy valamelyik azok felett lévő ősét. Azonban mindegyik különbözik a másiktól,

.parent(selector)

Ő az adott elem közvetlen szülőjét adja vissza. Paraméterként adhatunk neki egy selectort, ami csak speciális szülőkre illeszkedik.

1.
2.

$('div#gyerek').parent().css('background','#6c6');
$('a').parent('li.paros').css('background','#6c6');

Az első a #gyerek div szülőjét adja vissza. A második, az oldalon található összes olyan “a” elemnek a szülőjével tér vissza, ami egy lista elem, és rendelkezik a class=”paros” tulajdonsággal.

.parents(selector)

Majdnem ugyanazt csinálja mint a parent(), azonban nem csak az elem fölött közvetlenül egy szinttel lévú szülőket adja vissza.

1.

$('li.piros').parents('li'); //kresse meg minden li elemnek ami rendelkezik a class="piros" tulajdonsággal azokat a szülőit amelyek szintén li-k

A következő példával talán világossá válik a különbség a parent()-hez kképest:

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

<ul id="nav">
    <li>Férfiak
        <ul class="alcsoport">
            <li>Bölcs</li>
            <li>Büszke</li>
            <li>Találékony</li>
        </ul>
    </li>
    <li>Nők
        <ul class="alcsoport">
            <li>Főz</li>
            <li>Mos</li>
            <li>Takarít</li>
        </ul>
    </li>
</ul>

Nézzük meg mi történik, ha a következő két parancsot futtatjuk:

1.
2.

$('.alcsoport li').parent('li'); //nem ad vissza semmit, mert a li szülője mindig ul
$('.alcsoport li').parents('li'); //ez már visszaadja azt a li-t ami a Férfiak és nők szöveget tartalmazza, mert a közvetlen ul szülő fölé is megy

.closest(selector)

Ez egy sokak által nem ismert függvény, ami a parents() és a parent() keveréke. A parents()-től örökli azt a tulajdonságát, hogy nem csak a közvetlen szülőt vizsgálja, hanem mélyebbre is megy, míg a parent()-től az ragad rá, hogy csak egyetlen szülőt ad vissza. Tehát, a closest() visszaadja a legközelebbi olyan szülőt ami illeszkedik a feltételre, feltéve hogy van ilyen.

1.

$('div#div67').closest('div') //a div67 elemet kapjuk meg mivel a legközelebbi divet kerestük és az saját maga.

Mikor érdemes használi? Minen olyan esetben, mikor elég csak egy elemet visszakapnunk a szülők közül, pl ha vizsgáljuk, hogy az adott elem leszármazottja e egy másik elemnek:

1.
2.
3.
4.

if($('#elem1').closest('#elem2').length == 1)
    alert('#elem1 #elem2 leszármazottja!');
else
    alert('#elem1 nem leszármazottja #elem2-nek!')

.position() vagy .offset()

Mindkettőt arra használjuk, hogy megkapjuk egy elem helyét. Minketten egy objektumot adnak vissza, amely tartalmazza a left és top tulajdonságokat. Abban különböznek, hogy ezeket a tulajdonságok mikhez viszonyítják

position() az adott elem első olyan szülőjéhez viszonyított elhelyezkedést nézi, amely rendelkezik a position:relative tulajdonsággal. Ha ilyen szülő nincs, akkor a dokumentum bal felső sarkához viszonyít.

offset() ezzel ellentétben mindig a dokumentum bal felső sarkához viszonyít.

Példa:

Ha lefuttatjuk a következőket, különböző eredményt fogunk kapni az offset() és position() függvényekre:

1.
2.
3.
4.
5.

var position = $('#innerDiv').position();
var offset = $('#innerDiv').offset();
alert("Position: left = "+position.left+", top = "+position.top+"\n"+
      "Offset: left = "+offset.left+" and top = "+offset.top
)

Ha ki akarod próbálni, kattints ide

.css(‘width’) és css(‘height’) vagy .width() és .height()

A szélesség és magasság lekérdezésének mindkét fajtája ugyanazt teszi, lekérdezi a szélességet és magasságot – milyen meglepő.

Amiben különböznek az a visszaadot érték típusa: css(‘width’) és css(‘height’) stringként adják vissza a méretet, ‘px’-el a végén, míg a width() és height() integergként csak magát a számot adják meg.

Van itt mégvalami ami csak az IE böngészőknél merül fel… Ha css() segítségével kérdezzük le a méretet, amit mi nem adtunk meg konkrétan css-ben, akkor egy auto értéket fogunk visszakapni. Ezzel szemben a width() és height() az .offsetWidth és offsetHeight tulajdonságokból számol, amit IE is helyesen kezel.

A következő sorok segítségével mindkét módszert képessé tesszük rá, hogy a másikat szimulálja:

1.
2.
3.
4.

var width = $('#someElement').width(); //integert ad vissza pl 300
width = width+'px'; //most már olyan mint a css('width'), 300px
var width = $('#someElement').css('width'); //stringet ad vissza 300px
width = parseInt(width); //most már olyan mint a width() 300

Még egy utolsó dolog: width() és height() segítségével a böngésző ablak méretét is lekérdezhetjjük, míg a css() ilyenkor hibát dob.

.click() vagy .bind() vagy .live() vagy .delegate()

Mind a négyen arra hivatottak, hogy eseményeket köseenek elemekhez, mégis mind különbözik egy kicsit. Lássuk!

.click()

Itt nem konkrétan a click()-re kell gondolni, hanem az összes többi hozzá hasonló függvényre, mint a .mouseover() vagy a .change(). A jQueryben az eseménykezelés tábornoka a .bind(), ezek pedig csak közkatonák, akik jelentenek a bind()-nak ha valami történik.

A közkatonák mind egy bizonyos eseményhez értenek, és egy paramétert várnak: a függvényt ami az esemény bekövetkeztekor lefut.

1.
2.
3.

$('#loveszarok div').click(function(){
    alert('A lövészárokban click() lövész a következő üzenetet találta:' + $(this).text());
});

.bind()

A fenti kód bind() segítségével a következő képpen néz ki:

1.
2.
3.

$('#loveszarok div').bind('click',function(){
    alert('A lövészárokban click() lövész a következő üzenetet találta:' + $(this).text());
});

Amint látod, első paraméterként átadtuk az esemény típusát, majd a függvényt aminek le kell futnia ha bekövetkezik. No de ha ez bonyolultabb, akkor minek használnánk?

Legtöbbször a tábornok csak a háttérből figyeli, hogy a közkatonák elvégzik a piszkos munkát, azonban ha egyszerre több eseményhez kell kötni egy függvényt, kezelésbe veszi a dolgokat:

1.
2.
3.

$('#loveszarok div').bind('click contextmenu',function(){
    alert('A lövészárokban click() lövész a következő üzenetet találta:' + $(this).text());
});

Így jobb és bal egérgombbal való kattintásra is felugrik az üzenet.

Ezen felül a bind() nagyobb irányítást ad az esemény kezelése fölött. Három paramétert adhatunk át összesen, ahol az első az események felsorolása, a harmadik a függvény aminek le kell futnia, a második pedig, amiről még nem volt szó, paraméterek átadására szolgál a beéső függvény számára.

1.
2.
3.

$('#loveszarok div').bind('click contextmenu', {uzenet: 'Amiből lekvárt lehet főzni,  abból pálinkát is. '} ,function(e){
    alert(e.data.uzenet);
});

Kérdezhetnéd, miért adunk át paramétert, miért nem deklarálunk a bind() előtt egy változót, amit a bind()-on belül is elérhetünk?

1.
2.
3.
4.
5.
6.
7.
8.

var uzenet = 'Bal kattintás';
$('#loveszarok div').bind('click', function(e){
    alert(uzenet);
});
var uzenet = 'Jobb kattintás';
$('#loveszarok div').bind('contextmenu', function(e){
    alert(uzenet);
});

Mindegy, hogy jobb vagy bal gombbal kattintunk, az eredmény a jobb lesz. Ennek az az oka, hogy az üzenet amit az alert beolvas, nem a bindolás idejében történik, hanem akkor amikor lefut az esemény. Így az uzenet utolsó értéke, a jobb fog megjelenni.

Helyes működés ezek alapján a következő képpen érhető el:

1.
2.
3.
4.
5.
6.

$('#loveszarok div').bind('click', {uzenet: 'Bal kattintás'} ,function(e){
    alert(e.data.uzenet);
});
$('#loveszarok div').bind('contextmenu',  {uzenet: 'Jobb kattintás'}, function(e){
    alert(e.data.uzenet);
});

Események, melyeket bind függvénnyel, vagy valamelyik katonájával /click, change, keydown…/ kötünk egy elemhez, törölhetők az elemről az unbind() segítségével.

1.
2.

$('#loveszarok div').unbind(); //minden eseményt töröl
$('#loveszarok div').unbind('click') /csak a bal kattintást törli

.live()

Ugyan az, mint a bind() egy kivétellel: nem csak a meglévő elemekhez köti az eseményt, hanem minden elemre ami most létezik, vagy a dokumentum teljes betöltődése után létrejön. Ez általában akkor szokott hasznos lenni, ha javascript segítségével adunk új elemeket a DOM-hoz, vagy egy AJAX kérés ad vissza elemeket.

1.
2.
3.
4.

$('a').live('mouseover',function(){
    alert('Idegesítő ez a függvény.');
})//minden létező a-hoz hozzákapcsoltuk
$('body').append('<a>Uj link</a>') //erre is felugrik az üzenet, bind-nál nem így lenne

.delegate()

live() hátránya, hogy a legtöbb jQuery függvényhez képest, őt nem lehet láncolni, csak közvetlenül egy elemen használható:

1.
2.
3.
4.
5.
6.
7.
8.
9.

//használható
$('a').live('mouseover',function(){
    alert('Idegesítő ez a függvény.');
})
 
//nem használható
$('li').children('a').live('mouseover',function(){
    alert('Idegesítő ez a függvény.');
})

A delegate() a jQuery 1.4.2 része, ahol javítottak ezen a “hibán”, így első paraméterben egy szűrő feltételt adhatunk át neki:

1.
2.
3.

$('li').deléegate('a', 'mouseover', function(){
    alert('Idegesítő ez a függvény.');
})

Az eseményeket az undelegate() fügvénnyel tudjuk törölni az elemekről.

Összegzés

A következő részben ezeket fogjuk átnézni:

• .children() | .find()
• .not() | !.is() | :not()
• .filter() | .each()
• .merge() | .extend()

Kapcsolódó cikkek

Hozzászólások