Bevezetés a jQuery-be (2. rész): Módszerek és funkciók

Hirdetés

Ez része a jQuery web programozási sorozat kezdő bevezetésének. Az 1. rész a jQuery alapjait tartalmazza jQuery bemutató - Az első lépések: Alapok és választókA múlt héten arról beszélt, hogy mennyire fontos a jQuery minden modern webes fejlesztő számára, és miért fantasztikus. Ezen a héten azt hiszem, itt az ideje, hogy megtisztítsuk kezünket valamilyen kóddal, és megtanuljuk, hogyan ... Olvass tovább hogyan beépítheti a projektbe, és a kiválasztók. A 2. részben folytatjuk az alapvető felhasználást, amikor megvizsgálunk néhány módszert, amelyet ezekkel a DOM elemekkel végrehajthatunk, és néhány további nyelvi alapot.

$(választó).eljárás();

Ha emlékeztet az 1. leckére, ez a DOM manipulációjának alapvető felépítése a jQuery alkalmazásban. A DOM-manipuláció természetesen nem az egyetlen, amit a jQuery-vel megtehetsz, de ez a legegyszerűbb hely a kezdéshez és a leggyakoribb, ezért választottuk ezt.

A gyors visszatéréshez a választó e nyilatkozat egy része lehetővé teszi CSS-szerű elemnevek, osztályok vagy azonosítók használatát a DOM részeinek megkereséséhez. Például, hogy megragad minden osztály osztálynevével

.rejtett, használnánk:

$ ( 'Div.hidden)

Ennek az egyenletnek a második része a eljárás fellépni ezeken a DIV-ken, ha megtaláltuk őket (ha vannak ilyenek; vagy csak egy „megfelelő” elem lehetnek). Ne feledje, hogy a jQuery csak egyszer ad vissza egy elemet az azonosító kiválasztásához, mivel az azonosítóknak egyedi elemekre kell hivatkozniuk. Ha egynél többet szeretnél, akkor azt osztályként kell meghatározni a CSS-ben.

Akkor a módszerekre; mit lehet tenni a DOM elemeivel?

Először is bemutattam neked a Css módszer utoljára, hogy felhasználhassák a tesztelésre. A formátum egyszerű:

Css ( 'tulajdon', 'érték');

Ezért a CSS által definiálható bármit csak néhányat említhetünk a jQuery segítségével - színek, átlátszóság, hely, méret. A változás azonnali.

Ha inkább animálja a CSS változásait, akkor remek híreket kaptam neked; van még egy úgynevezett módszer .élő(). Ez egy kicsit összetettebb:

.animate ({ 'tulajdon': 'érték'}, sebesség);

Mint például:

.animate ({ 'opacitás': '0,25', 'magassága': '100px'}, 'gyors');

Ezen a ponton kíváncsi lehet, hogy mi a göndör tartó; ezeket „objektum literálisnak” nevezzük, és általában ezek listáját készítik ingatlan érték pár, olyan, mint egy indexelt tömb ha más nyelvekről jössz. Sokat fogja használni őket a jQuery alkalmazásban, tehát ezt újra megmondom - szokjon megfelelő módon ellenőrizni, hogy nincs-e zárt konzol és fogszabályozó!

Nézd meg ez az oldal az animációs módszer sok működő példájáért.

A valamelyik CSS tulajdonságainak manipulálása mellett a tartalmát a .text (), .html () és .val () metódusok is (val az űrlapelemek tartalmára vonatkozik). Ezek a módszerek mindkettőként működnek készletters és kapTers; ha nem ad meg értéket, akkor megkapja az aktuális értéket. Ha megad egy értéket, akkor az felváltja az aktuális értéket.

Íme néhány gyors példa:

Szerezze be a név mező aktuális értékét a megjegyzés űrlapon, és rendelje hozzá egy változóhoz comment_name:

var kommentáló_neve = $ (# megjegyzés-forma # név) .val ();

Állítsa be a az értékig, amelytől megragadták COMMENTER_NAME:

$ ('span.name'). text (komentor_neve);

Ezután a DOM egyes részeinek klónozására, mozgatására, beillesztésére vagy törlésére szolgáló módszerek széles választékát kínáljuk. Valóban a képzeleted korlátozza.

Tegyük fel, hogy minden harmadik után dinamikusan be akarta illeszteni egy hirdetési blokkot bekezdést a tartalom oszlopban, de Javascript-ben csinálod, hogy a kezdeti oldal betöltődjön tisztán tartották. Nagyon összetettnek hangzik, igaz? Alig…

$('div # tartalomp: n. gyermek (3n)').utána('');

Ezt megsemmisítve, a jQuery-t arra kértük, hogy:

1. Keresse meg a div elemet „tartalom” azonosítóval
2. Keresse meg az ebben a div. Részben található p-ket
3. Szűrés minden harmadik oldalra n. gyermek álnév használatával (erről bővebben itt)
4. Helyezzen be tetszőleges képet az után minden illeszkedő elem

Lehetetlen, hogy itt felsorolom az összes módszert, és azt sem szeretné elolvasni. A lényeg az, hogy van egy módszer, amellyel nagyjából bármit megtehetsz, amire gondolsz, amikor a manipulációról beszélünk, tehát ellenőrizze az API-t az egyiket használhatja.

Ezenkívül ne feledje, hogy többféle módon is lehet valamit tenni. Ha például nem szűkítheti le a megfelelő objektumot insertAfter (), talán gondolkodjon a következő gyerek le és használ insertBefore () helyette.

Módszer láncolása

Ma végre végezzünk egy rövid szót a módszer láncolásáról, alapvetően azért, mert félelmetes. Először nézzük meg a következő kódsorokat:

$ ( '# Nav menu'). FadeIn ( 'gyors'); $ ( '# Nav menu'). AddClass (beingShown '); $ ( '# Nav menu'). Css ( 'margin-right', '10px');

Ez elég ésszerűnek hangzik, igaz? De ugyanezt megteheti csak egy sorban:

$ ( '# Nav menu'). FadeIn ( 'gyors'). AddClass (beingShown '). Css ( 'margin-right', '10px');

Ez pontosan ugyanazt csinálja, és hívják módszer láncolása. Mivel szinte minden jQuery módszer maguk adják vissza a jQuery objektumot, mindegyik beilleszthető a következőbe. Ez kevesebb kódot jelent - ami mindig jó dolog -, de valójában gyorsabban fut.

Miért? Nos, minden alkalommal, amikor meghívja az alapvető jQuery-t $ parancs és választó, akkor azt kéri tőle, hogy keresse meg a DOM-fán egyező elemet keresve. A módszerek láncolásakor nem kell, hogy utaljon vissza a DOM-ra, mert az tudja, hol vannak most, és azonnal végrehajthatja a módszert.

Ez a mai napra, és azt hiszem, valószínűleg sokat fedeztünk. Most fel kell fegyverkezned azzal a képességgel, hogy végezzen néhány elég nehéz DOM-manipulációt, szóval menj, láncold össze módszereidet, és készíts egy igazi rendetlenséget az oldalon. Egyelőre azt szeretné, ha a szkripteket az láblécbe helyezné, hogy az oldal fennmaradó részének betöltési ideje megmaradjon. A jövő héten csak akkor foglalkozunk azzal, hogy a jQuery tegyünk dolgokat, ha minden helyesen van betöltve az eseményekkel és az anonim funkciók kíváncsi esetével.

Ha csak megbotlott erre a bejegyzésre, akkor valószínűleg valamiféle webes fejlesztő vagy, és érdemes megnézni az összes WordPress és blog cikkek, vagy akár a mi Legjobb WordPress plugins A legjobb WordPress plugins Olvass tovább oldalt.