Prototype mintadarabok 2

prototypeA mai részben a $ függvényekkel fogunk megismerkedni. Ezek mind amolyan gyorsindítók, vagy rövidítések. Rövidek és okosok.

$()

A $() függvény arra szolgál, hogy elérjünk egy id alapján egy DOM elemet. Nem csak egy id-t, hanem magát a DOM elemet is átadhatjuk neki. Nem csak arról van szó, hogy a document.getElementById() függvény rövidítésére szolgál, hanem a $() használatával egy kibővített tulajdonságokkal rendelkező DOM elemet kapunk vissza.

Például egy elemet prototype nélkül így rejtünk el:

document.getElementById('lablec').style.display = 'none';

Ezzel szemben a protoype használatával így:

$('lablec').hide();

Vagyis rövidebb és könyebben olvasható kódot kapunk.

Ezen felül nem csak egy elemet adhatunk át a függvénynek, hanem tetszőleges számút. Ebben az esetben a kibővített DOM elemek tömbjével tér vissza.

var fontosElemek = $('fejlec', 'tartalom', 'lablec');
//fontosElemek[0] : $('fejlec') lesz

$w()

A $w() egy olyan gyorshivatkozás amivel gyorsan tudunk tömböket létrehozni. Ha átadunk neki egy whitespace-ekkel tagol stringet, akkor azt a whitespace-ek mentén elválasztva tömbbé alakítja. Ennek következtében nem alkalmas olyan tömbök létrehozására amelynek elemi tartalmaznak whitespace-t.

//ez a normál mód: var tomb = new Array('gora', 'nitai');
var tomb = $w('gora nitai');

$$()

DOM elemeket érhetünk el a segítségével a teljes CSS 3 kiválasztókészletet használva. A CSS kiválasztót teljesítő elemek tömbjével tér vissza.

$$('p');      //minden p elem

$$('#oldalsav p');        //az oldalsav id-jű elem minden p tagja

$$('li.menu');      //a menu css class-ú li elemek

$$('a[href="#"]');      //minden link aminek a href attributuma #


$$('a[href!="#"]');      //minden link aminek nem # a href attributuma

$$('#menu > li, #almenu li');      //a menu közvetlen és az almenu id-jű elem összes li leszármazottja

$$('a[rel~=nofollow]');      //linkek amelyekben a rel attributomban szerepel a nofollow érték is

$$('a[title$=help]');      //linkek melyeknek a title attributuma help-pel kezdődik

$$('a[title^=help]');      //linkek melyeknek a title attributuma help-pel végződik

$$('a[title*=help]');      //linkek melyekne a title attributuma tartalmazza a help-et

$$('a:not([title=help])');      //linkek amelyeknek a title attributuma nem help

//és még pár másik :)


//persze lehet őket a végtelenségig kombinálni de nem feltétlenül mindig ez a legjobb megoldás:
$$('#termekek td.megnevezes > input[type!="submit"]:not(:disabled)');

$A()

Bármit amit csak lehet tömbbé alakít. A prototype sok új funkcióval látja el a tömböket, így ez egy gyakran használt függvény.

$F()

A $F() egy form bármely mezőjének visszaadja az értékét. A multi-select esetében egy tömböt ad vissza, ki nem választott rádió gombokra és chechkboxokra nullt.

$H()

Ez egy másik gyakran használt függvény, hash-eket (asszociatív tömböket) hoz létre.

$R()

A $R() az ObjectRange rövidítése. Sorozatokat tudunk vele létrehozni.

var egytolSzazig = $A($R(1,100));      //[1, 2, 3, ... 99, 100]

$R(1,10).each(function(i){alert(i)});   //egymás után feldob 10 alert ablakot, mindegyikben az aktuális index 1-10

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöljük.