A múlt héten arról beszéltem, hogy a jQuery mennyire fontos minden modern webfejlesztő számára, és miért fantasztikus. Ezen a héten azt hiszem, itt az ideje, hogy bepiszkosítsuk a kezünket néhány kóddal, és megtanuljuk, hogyan kell valójában használni a jQuery -t projektjeinkben.

Ezt most elmondom - a jQuery használatához nem kell megtanulnia a Javascriptet. Valószínűleg az a legjobb, ha a jQuery -t a Javascript evolúciójának tekinti - jobb módja ennek -, mint egyszerűen egy funkcionalitást hozzáadó könyvtárnak. A szükséges Javascript -et útközben felveszik. Feltételezzük azonban, hogy webfejlesztőként nagyon jól ismeri a HTML -t és a CSS -t (és itt van egy hasznos ingyenes xHTML útmutató, ha nem!).

Dokumentum objektum modell

A jQuery a bejárásról és a ÍTÉLET - az D okmány VAGY bject M odel. A DOM az oldal hierarchikus faábrázolása, amelyet a böngészők építettek fel az összes HTML -kód elolvasása után. A jQuery -ben az ehhez hasonló terminológiát használjuk szülő , gyermekek , és testvérek meglehetősen gyakran, tehát fogalma kell legyen arról, hogy ez mit jelent a DOM vonatkozásában.

Ez az egyszerű diagram innenw3iskolákelég jól elmagyarázza a fogalmakat. Látnia kell, hogy az elem szülője, míg a elem azonnali

jQuery code codes here`

$ ('választó').módszer();

Ennyi, a címben fent. Ez a jQuery kód egyetlen darabjának alapvető struktúrája a DOM manipulálásához. Könnyű, igaz?

Azválasztóutasítja a jQuery -t, hogy találjon olyan dolgokat, amelyek megfelelnek ennek a szabálynak, és ugyanaz, mint a CSS -szelektorok (majd néhány felül). Tehát, ahogy a CSS -ben is, minden linket stílusban szeretne használni

a { }

Ugyanezt tenné a jQuery as

$('a')

Ez bármilyen HTML elemre - div, h1, span - elvégezhető. A CSS osztályokat és azonosítókat pontosabban is használhatja.

Például a 'findme' osztályhoz tartozó összes link megtalálásához használja a következőket:

$('a.findme')

Nem kell minden alkalommal megadnia az elem típusát - de ha mégis, akkor egyszerűen konkrétabbá teszi a szabályt. Csak mondhattad volna

$('.findme')

ami mindennek megfelelne az osztállyal találj meg , hogy link volt -e vagy sem.

Neves azonosítóelem használatához használja a # aláírni helyette. A legfontosabb különbség itt az, hogy az azonosítóválasztó mindig csak egy objektumot választ ki, míg az osztályválasztó többet is találhat.

a számítógép alvó állapotból magától bekapcsol

$('#something')

Alapvetően, ha meg tudod csinálni CSS -ben, akkor a jQuery is megteszi. Valójában néhány meglehetősen összetett CSS3 stílusú álválasztót is használhat, például: először

$('body p:first')

Ami megragadná az oldal bekezdését. Bizonyos tulajdonságokkal rendelkező elemeket is talál. Tekintsük ezt a példát; szeretnénk megtalálni az oldalon minden olyan linket, amely belsőleg mutat kihasználni és valamilyen módon kiemelni őket. Így találhatjuk meg őket:

$('a[href*='makeuseof']')

Hát nem menő? Nos, azt hiszem.

A következő kikötőállomásnak a jQuery API dokumentáció a kiválasztókhoz . Ez egy hatalmas lista a különféle választókról, amelyek használhatók, és senki sem várja el, hogy mindet megtanulja.

Az egyenlet következő része azmódszer- mit kell kezdeni azokkal a dolgokkal, ha mind megtalálta - de ezt hagyjuk a következő leckére. Ha mégis el szeretné kezdeni a különféle választók kipróbálását, azt javaslom, hogy tartsa be a következő css módszert. Ehhez két paraméterre van szükség - egy CSS -re ingatlan neve , és egy új érték hozzárendelni ahhoz a tulajdonsághoz. Ha tehát minden linknek piros háttérszínt szeretne adni, tegye a következőket:

$('a').css('background-color','red');

Elég egyszerű! Bár ennek gyakorlati haszna nem lehet, lehetővé teszi, hogy könnyedén láthassa a választók segítségével található elemeket. Most menjen tovább, és válassza ki - a DOM vár rád.

Remélem, hogy ez az oktatóanyag hasznos volt az Ön számára; Megpróbáltam a lehető legegyszerűbbé és érthetőbbé tenni. Nyugodtan tegyen fel kérdéseket, vagy hagyjon visszajelzést, de vegye figyelembe, hogy én biztosan nem vagyok elit jQuery ninja.

Részvény Részvény Csipog Email 5 tipp a VirtualBox Linux gépek feltöltéséhez

Unod már a virtuális gépek által kínált gyenge teljesítményt? Íme, mit kell tennie a VirtualBox teljesítményének növelése érdekében.

Olvassa tovább Kapcsolódó témák

Webkultúra
Webfejlesztés
JavaScript
Programozás
jQuery

A szerzőről James Bruce(707 megjelent cikk)

James mesterséges intelligenciával rendelkezik, és rendelkezik CompTIA A+ és Network+ tanúsítvánnyal. Amikor nem a Hardware Reviews szerkesztőként van elfoglalva, élvezi a LEGO, a VR és a társasjátékokat. Mielőtt csatlakozott a MakeUseOf -hoz, fénytechnikus, angol tanár és adatközpont -mérnök volt.

Továbbiak James Bruce -tól

Iratkozzon fel hírlevelünkre

Csatlakozz hírlevelünkhöz, ahol technikai tippeket, véleményeket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!

Feliratkozáshoz kattintson ide