Prejšnji teden sem govoril o tem, kako pomemben je jQuery za vsakega sodobnega spletnega razvijalca in zakaj je super. Ta teden mislim, da je čas, da si umažemo roke s kodo in se naučimo, kako dejansko uporabiti jQuery v naših projektih.

Rekel bom to zdaj - za uporabo jQuery vam ni treba učiti Javascripta. Verjetno bi bilo najbolje, če pomislite na jQuery kot evolucijo Javascripta - boljši način za to - kot preprosto knjižnico, ki dodaja funkcionalnost. Vsak Javascript, ki ga potrebujete, bomo pobrali na poti. Predvideva pa se, da kot spletni razvijalec dobro poznate HTML in CSS (in tukaj je koristen brezplačen vodnik xHTML, če ne!).

---

---

Objektni model dokumenta

jQuery je namenjen prehodu in manipulaciji z OBSODBA - D ocument ALI bject M odel. DOM je hierarhična drevesna predstavitev strani, ki jo brskalniki ustvarijo po branju vse kode HTML. V jQuery bomo uporabljali terminologijo, kot je starš , otroci , in brate in sestre precej pogosto, zato bi morali vedeti, kaj to pomeni v zvezi z DOM.

Ta preprost diagram izw3schoolsrazlaga koncepte precej dobro. Morali bi videti, da je nadrejeni element elementa, medtem ko je element ima takojšen

brat / sestra.

Začetek: Dodajanje jQuery

Najnovejša različica jQueryja je pri stiskanju približno 91 KB, zato doda približno enako težo strani kot majhna fotografija ali posnetek zaslona. Najlažji način, da v svoj projekt vključite jQuery, je, da v razdelek glave spletnega mesta prilepite sklic na najnovejšo gostovano različico:

Upoštevajte pa, da lahko to, če uporabljate Wordpress, povzroči težave, ker že ima svojo kopijo knjižnice jQuery. Vtičniki lahko zahtevajo, da se to naloži, Wordpress pametno naloži jQuery samo enkrat, ne glede na to, koliko vtičnikov je to zahtevalo.

Če svoji vrstici dodate naslednjo vrstico functions.php temo, dodali boste še eno zahtevo za njeno vključitev. Wordpress bo potem vedel, da ga vedno naloži, če je vaša tema aktivna.

---

---

kako uporabljati ssh v oknih

wp_enqueue_script('jquery');

Druga stvar, ki jo morate upoštevati, je, da ko se jQuery doda po standardni metodi, se naloži kot $ . Vse, kar naredite z jQuery, bo pred tem $, na primer:

$.ajax

ali

---

---

$('#header')

Ko pa se jQuery naloži prek Wordpressa, se vse naredi s spremenljivko jQuery namesto $, zato na primer:

jQuery('#header')

Čeprav to ni velik problem pri pisanju lastne kode, to pomeni, da boste morali izrezovanje in lepljenje delčkov jQuery, ki jih najdete v spletu, uporabiti za uporabo jQuery namesto $ - to je vse.

Eden od načinov za to je, da zavijete kodo v slogu $, ki se vam zdi tako:

(function($) {
// paste $ code in here
})(jQuery);

To traja jQuery spremenljivko in jo posreduje v anonimno funkcijo kot $ . Naslednjič bom razložil anonimne funkcije - zaenkrat se naučimo osnovne strukture kode jQuery.

Če želite dodati kodo na stran HTML ali PHP, vstavite vse v oznake, na primer:


// jQuery code codes here


$ ('izbirnik').metoda();

To je to, v naslovu zgoraj. To je osnovna struktura enega koda jQuery za manipulacijo z DOM. Enostavno, kajne?

Theizbirnikpove jQuery, naj poišče stvari, ki ustrezajo temu pravilu, in je enak izbirnikom CSS (in nato še nekaj na vrhu). Tako bi, tako kot v CSS, vse povezave stilizirali

a { }

Enako bi bilo storjeno v jQuery kot

$('a')

To lahko storite za vse elemente HTML - div, h1, span - karkoli. Za natančnejše podatke lahko uporabite tudi razrede in ID -je CSS.

Na primer, če želite poiskati vse povezave z razredom 'findme', uporabite:

$('a.findme')

Ni vam treba vsakič določiti vrste elementa - če pa to naredite, preprosto naredi pravilo bolj natančno. Lahko bi samo rekel

$('.findme')

ki bi se vse ujemalo s razredom Najdi me , ne glede na to, ali gre za povezavo.

Če želite uporabiti imenovani element ID, uporabite datoteko # namesto tega podpišite. Ključna razlika je v tem, da bo izbirnik ID -jev izbral le en predmet, medtem ko lahko izbirnik razreda najde več kot enega.

kako spremeniti ikono raziskovalca datotek

$('#something')

V bistvu, če lahko to storite v CSS, bo to storil tudi jQuery. Pravzaprav lahko uporabite tudi nekaj precej zapletenih psevdoizbirnikov v slogu CSS3, kot je: prvi

$('body p:first')

Kar bi zgrabilo odstavek strani. Najdete tudi elemente z določenimi atributi. Razmislite o tem primeru; na strani želimo poiskati vse povezave, ki interno kažejo na izkoristijo in jih na nek način poudariti. Tako jih lahko najdemo:

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

Ali ni to kul? No, mislim, da je.

Naslednje pristanišče bi moralo biti Dokumentacija API jQuery za izbirnike . To je ogromen seznam vseh različnih vrst izbirnikov, ki so na voljo za uporabo, in nihče ne bi pričakoval, da se jih boste vse naučili.

Naslednji del enačbe jemetoda- kaj storiti s temi stvarmi, ko vse najdete - vendar bomo to pustili za naslednjo lekcijo. Če želite zdaj začeti s preizkušanjem različnih izbirnikov, predlagam, da se držite naslednje metode css. Za to sta potrebna dva parametra - CSS ime nepremičnine , in nov vrednost dodeliti tej lastnini. Če želite vsem povezavam dati rdečo barvo ozadja, naredite naslednje:

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

Dovolj preprosto! Čeprav to morda ni uporabno, vam bo omogočilo enostaven ogled elementov, ki se nahajajo z uporabo izbirnikov. Zdaj pojdite naprej in izberite - DOM vas čaka.

Upam, da vam je ta vadnica koristila; Poskušal sem ga čim bolj preprosto razumeti. Vprašajte, če imate kakršna koli vprašanja, ali pustite povratne informacije, vendar se zavedajte, da zagotovo nisem elitni ninja jQuery.

Deliti Deliti Cvrkutati E-naslov 5 nasvetov za polnjenje vaših strojev VirtualBox Linux

Ste naveličani slabe zmogljivosti, ki jo ponujajo virtualni stroji? Tukaj je tisto, kar morate storiti za povečanje zmogljivosti VirtualBox.

Preberite Naprej Sorodne teme

• Spletna kultura
• Spletni razvoj
• JavaScript
• Programiranje
• jQuery

O avtorju James Bruce(707 objavljenih člankov)

James je diplomiral iz umetne inteligence in je certificiran za CompTIA A+ in Network+. Ko ni zaposlen kot urednik pregledov strojne opreme, uživa v igrah LEGO, VR in družabnih igrah. Preden se je pridružil MakeUseOf, je bil tehnik razsvetljave, učitelj angleščine in inženir podatkovnega centra.

Več od Jamesa Brucea

Naročite se na naše novice

Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!

Kliknite tukaj, če se želite naročiti