Mi is az a jQuery?
Tényleg csak pár mondat aki nem tudja mi ez, az úgysem itt kezdi az utánaolvasást. A jQuery egy kliens oldali, apró, de annál hatékonyabb interaktív keretrendszer javascripthez. Rendkívül gyorsan és a nyers js-hez képest lényegesen kevesebb kódolással lehet hatékony interaktív elemeket létrehozni webes alkalmazásokhoz. Első verzióját 2006-ban adta ki John Resig, MIT és GNU licensz felhasználata mellett.
Az első "bekezdést" a leglényegesebbel, gyakorlatilag az alapokkal kezdeném, mégpedig a kiválasztókkal (szelektorok).
A Szelektorok
A szelektorok az egyik leg sokoldalúbb megoldás egy vagy több DOM elem eléréséhez. Tulajdonképpen megegyezik a szabványos CSS és Xpath kiválasztók használatával azon nem éppen elhanyagolható szempont figylembe vételével, hogy böngészőfüggetlen. Például használható a szabványos > (parent child) operátor IE6 alatt is.
Általánosan használt kiválasztók:
$(#id") és $(".osztály")A kettő közti lényeges különbség, hogy az id alapú kiválasztónál csak egy DOM elemet kapunk vissza (még ha több ugyanazon id-vel ellátott HTML elemünk is van), addig az osztály kiválasztónál az összeset. Szabványos elemek:
$(table) , $(div) , $(this)Hierarchikus kiválasztók:$("#id1 > a#id2"), $("#id1 a"), $("#id ~ a") A teljes szelektorok listája itt olvasható.A DOM fán megtalálható összes (a példában az összes text inputot) elemet az each() segítségével lehet elérni:
$(input[type=text]).each( function() {....} )Kiválóan helyettesíthetők vele az IE kiválasztó hiányosságok. (pl input[type=button]) Hogy mire jó ez? Egy nagyon egyszerű példával mutatnám meg. Az alábbi utasítás a dokumentum betöltődése után az összes táblázat első sorának hátterét pirosra színezi.$(function(){
$(table tr:eq(0)).css({ backgroundcolor:"red" })
})
Ugyanez hagyományos javascript megvalósítással:var table = document.getElementsByTagName("table");
for(i=0;i<table.length; i++)
{
table[i].rows[0].style.backgroundColor = "red";
}Ha elsőre nem is tűnt fel az olvasónak, de kevesebb gépeléssel elérhető ugyanaz az eredmény, és nem kell ciklust futtatni. További előnyök: - kevesebb utasításból ugyanazon eredmény
- egymásbafűzhető utasítások (később tárgyaljuk)
- $(elem) elérés bizonyíthatóan gyorsabb, mint a hagyományos getElementById
- továbbá az egyik leggyorsabb populáris javascript keretrendszer (mérési eredmények)
- gyorsan tanulható
- cross browser és cross platform
A következő részben az elemek tulajdonságait és azok manipulálását mutatom be.
