Johdanto jQueryyn (osa 2): Menetelmät ja toiminnot

Mainos

Tämä on osa käynnissä olevaa aloittelijaa jQuery-web-ohjelmasarjoihin. Osa 1 kattoi jQuery-perusteet jQuery-opas - Aloittaminen: Perusteet ja valitsimetViime viikolla puhuin siitä, kuinka tärkeä jQuery on kaikille nykyaikaisille web-kehittäjille ja miksi se on mahtava. Tällä viikolla mielestäni on aika saada kädet likaantumaan jollain koodilla ja oppia kuinka ... Lue lisää kuinka sisällyttää se projektiisi ja valitsimiin. Osassa 2 jatkamme peruskäyttöä, kun tarkastelemme joitain menetelmiä, joita voit suorittaa kyseisille DOM-elementeille, ja joitain muita kielen perusteita.

$(valitsin).menetelmä();

Jos muistat oppitunnista 1, tämä on DOM-manipulaation perusrakenne jQueryssa. DOM-manipulointi ei ole tietysti ainoa asia, jonka voit tehdä jQueryllä, mutta se on helpoin paikka aloittaa ja yleisin, joten siksi valitsimme sen.

Nopeasti uudelleen, valitsin tämän lausunnon osan avulla voit käyttää CSS: n kaltaisia ​​elementtinimiä, luokkia tai tunnuksia DOM-osien paikantamiseen. Esimerkiksi napata kaikki luokan nimellä .hidden, käytämme:

$ ( 'Div.hidden')

Tämän yhtälön toinen osa on menetelmä suorittaa näillä DIV-levyillä, kun olemme löytäneet ne (jos niitä on ollenkaan; tai ne voivat olla vain yksi ”vastaava” esine). Muista, että jQuery palauttaa vain yhden elementin tunnusvalinnoissa, koska tunnusten tulisi viitata yksilöiviin kohteisiin. Jos sinulla on useampi kuin yksi jostakin, se on määriteltävä luokkaksi CSS: ssä.

Sitten menetelmiin; mitä voit kuitenkin tehdä DOM-elementtien kanssa?

Ensinnäkin esittelin sinulle Css menetelmä viime kerralla, jotta voit käyttää sitä testaukseen. Muoto on yksinkertainen:

Css ( 'omaisuus', 'arvo');

JQuery voi siis säätää mitä tahansa CSS: n määrittelemää - värit, läpinäkyvyys, sijainti, koko - muutamia mainitaksesi. Muutos on välitön.

Jos haluat mieluummin animoida CSS-muutoksia, olen saanut sinulle hyviä uutisia; siellä on myös menetelmä nimeltään .animate (). Se on kuitenkin hieman monimutkaisempi:

.animate ({ 'omaisuus': 'arvo'}, nopeus);

Esimerkiksi:

.animate ({ 'opasiteetti': '0,25', 'korkeus': '100px'}, 'nopeasti');

Tässä vaiheessa saatat miettiä, mihin kiharaketjut ovat; niitä kutsutaan ”objektikirjaimellisiksi”, ja niitä käytetään yleensä luomaan luettelo kohteista omaisuuden arvo paria, sellainen kuin indeksoitu taulukko jos olet kotoisin muista kielistä. Käytät niitä paljon jQuery-sovelluksessa, joten sanon tämän taas - tottu tarkistamaan suljettujen kiinnikkeiden ja pidikkeiden oikein!

Tarkista tämä sivu paljon työskenteleviä esimerkkejä animoivasta menetelmästä.

Sen lisäksi, että manipuloit jonkin CSS-ominaisuuksia, voit säätää sen sisältöä .text (), .html () ja .val () menetelmätkin (val on lomakeelementtien sisällölle). Nämä menetelmät toimivat molemmina asetaters ja saadaters; Jos et määritä arvoa, he saavat nykyisen arvon. Jos määrität arvon, ne korvaavat nykyisen arvon.

Tässä muutamia nopeita esimerkkejä:

Hanki nimikenttä nykyinen arvo kommenttilomakkeessa ja määritä se muuttujalle comment_name:

var kommentaattorinimi = $ (# kommentti-lomakkeen nimi) .val ();

Aseta arvo arvoon, joka tarttui COMMENTER_NAME:

$ ('span.name') .teksti (aloittajan_nimi);

Sitten meillä on laaja valikoima menetelmiä DOM: n osien kloonaamiseksi, liikkumiseksi, lisäämiseksi tai poistamiseksi. Mielikuvitus on raja, todella.

Oletetaan, että halusit lisätä dynaamisesti mainoskuvalohkon joka kolmas kappale sarakkeen sisältösarakkeessa, mutta teet sen Javascriptillä, jotta sivun alkuperäinen lataus voi olla pidettiin puhtaina. Kuulostaa melko monimutkaiselta, eikö niin? Tuskin…

$('div # contentp: n. lapsi (3n)').jälkeen('');

Tämän rikkoessa olemme pyytäneet jQueryä:

1. Löydä div-yksikkö sisällön tunnuksella
2. Löydä kyseisen jaon sisältämät p: t
3. Suodata joka 3. s n. lapsen pseudonvalitsimen avulla (lisää tästä täällä)
4. Aseta mielivaltainen kuva jälkeen jokainen vastaava elementti

En voi mahdollisesti luetella kaikkia menetelmiä täällä, enkä haluaisi lukea sitä. Asia on, että on olemassa menetelmä, jolla tehdään melkein mitä mitä tahansa ajatellaan manipuloinnin suhteen, niin tarkista sovellusliittymä yhdelle, jota voit käyttää.

Muista myös, että voi olla useita tapoja tehdä jotain. Jos esimerkiksi et voi kaventaa oikeaa objektia insertAfter (), ehkä ajatella löytää Seuraava lapsi alas ja käyttää insertBefore () sen sijaan.

Menetelmän ketjuttaminen

Viimeinkin tänään, annetaan nopea sana menetelmäketjusta, pohjimmiltaan vain siksi, että se on mahtava. Aluksi harkitaan seuraavia koodirivejä:

$ (NAV # valikko "). FadeIn ( 'nopeasti'); $ (NAV # valikko "). AddClass ( 'beingShown'); $ (NAV # valikko "). Css ( 'margin-right', '10px');

Se kuulostaa tarpeeksi kohtuulliselta, eikö niin? Mutta voit tehdä saman vain yhdellä rivillä:

$ (NAV # valikko "). FadeIn ( 'nopeasti'). AddClass ( 'beingShown'). Css ( 'margin-right', '10px');

Se tekee täsmälleen saman asian, ja sitä kutsutaan menetelmä ketjuttaminen. Koska melkein kaikki jQuery-menetelmät palauttavat itse jQuery-objektin, jokainen voi syöttää seuraavaan. Tämä tarkoittaa vähemmän koodia - mikä on aina hyvä asia -, mutta se toimii myös nopeammin.

Miksi? No, joka kerta, kun vedot jQuery-perustoimintoon $ komento ja valitsin, pyydät sitä etsimään vastaavaa elementtiä DOM-puusta. Kun ketjutat menetelmiä, sinun ei tarvitse liian viitata takaisin DOM: iin, koska se tietää missä ne ovat nyt, ja voi suorittaa menetelmän heti.

Se on se tänään, ja luulen, että olemme todennäköisesti peittäneet paljon. Sinun pitäisi nyt olla aseistettu kyvyllä suorittaa melko raskaita DOM-manipulaatioita, joten siirry eteenpäin, ketjuta menetelmät yhteen ja tee todellinen sotku sivulle. Toistaiseksi haluat sijoittaa skriptit alatunnisteeseen, jotta loput sivu latautuisi. Ensi viikolla käsittelemme kysymystä saada jQuery tekemään asioita vain, kun kaikki on ladattu oikein tapahtumiin ja utelias tapa tuntemattomia toimintoja.

Jos olet vain kompastellut tätä viestiä, olet todennäköisesti jonkinlainen web-kehittäjä ja haluat ehkä tarkistaa kaikki WordPress ja bloggaaminen artikkeleita tai jopa meidän Parhaat WordPress-laajennukset Parhaat WordPress-laajennukset Lue lisää sivu.