A 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