„JQuery“ (2 dalis) įvadas: metodai ir funkcijos

Skelbimas

Tai pradedančiųjų pradedančiojo „jQuery“ interneto programavimo serijos įžangos dalis. 1 dalis apėmė „jQuery“ pagrindus „jQuery“ pamoka - pradžia: pagrindai ir parinkėjaiPraėjusią savaitę aš kalbėjau apie tai, kokia svarbi „jQuery“ bet kuriam šiuolaikiniam interneto kūrėjui ir kodėl tai nuostabu. Šią savaitę, manau, atėjo laikas susitepti rankas su kažkokiu kodu ir išmokti, kaip ... Skaityti daugiau kaip įtraukti jį į savo projektą ir parinkiklius. 2 dalyje tęsime pagrindinį vartojimą, kai apžvelgsime kai kuriuos metodus, kuriuos galite atlikti su tais DOM elementais, ir kai kuriuos kitus kalbos pagrindus.

$(selektorius).metodas();

Jei prisimenate iš 1 pamokos, tai yra pagrindinė DOM manipuliacijos „jQuery“ struktūra. Manoma, kad DOM manipuliavimas nėra vienintelis dalykas, kurį galite padaryti naudodamiesi „jQuery“, tačiau tai yra paprasčiausia vieta pradėti ir dažniausiai, todėl mes pasirinkome būtent jį.

Norėdami greitai susikaupti, selektorius dalis šio teiginio leidžia naudoti CSS tipo elementų pavadinimus, klases ar ID norint nustatyti DOM dalis. Pavyzdžiui, norint patraukti visus su klasės pavadinimu

.slėpta, mes naudosime:

$ („div.hidden“)

Antroji šios lygties dalis yra metodas atlikti šiuos DIV, kai tik juos surasime (jei jų išvis yra; arba jie gali būti tik vienas „atitinkantis“ elementas). Atminkite, kad „jQuery“ kada nors grąžins tik vieną elementą pasirinkdami ID, nes ID turėtų reikšti unikalius elementus. Jei ketinate turėti daugiau nei vieną, tai reikia apibrėžti kaip klasę CSS.

Tada apie metodus; ką jūs vis dėlto galite padaryti su DOM elementais?

Pirmiausia aš jus supažindinau su .css paskutinį kartą, kad galėtumėte naudoti jį bandymams. Formatas yra paprastas:

.css ('nuosavybė', 'vertė');

Todėl viską, ką galima apibrėžti CSS, „jQuery“ gali pakoreguoti - spalvas, skaidrumą, vietą, dydį. Pokytis yra nedelsiant.

Jei norite animuoti CSS pakeitimus, aš turiu jums puikių naujienų; taip pat yra metodas vadinamas .animate (). Vis dėlto jis yra šiek tiek sudėtingesnis:

.animate ({'nuosavybė': 'vertė'}, greitis);

Pavyzdžiui:

.anima ({'nepermatomumas': '0,25', 'aukštis': '100px'}, 'greitas');

Šiuo metu jums gali kilti klausimas, kam skirti garbanoti petnešos; jie vadinami „objekto pažodiniu“ ir paprastai naudojami kuriant turtas: vertė poros, tokios kaip an indeksuotas masyvas jei esate iš kitų kalbų. Jūs daug jų naudosite „jQuery“, todėl vėl tai pasakysiu - priprasite tinkamai tikrinti, ar nėra uždarų skliaustų ir breketų!

Patikrinkite šitas puslapis daug darbinių animacinio metodo pavyzdžių.

Galite ne tik manipuliuoti CSS savybėmis, bet ir koreguoti jos turinį .teksto (), .html () ir .val () metodai taip pat (val. yra formos elementų turiniui). Šie metodai veikia abu rinkinysters ir gautiters; jei nenurodysite vertės, jie gaus dabartinę vertę. Jei nurodysite vertę, ji pakeis dabartinę vertę.

Čia yra keletas trumpų pavyzdžių:

Gaukite dabartinę vardo lauko vertę komentaro formoje ir priskirkite ją kintamajam komentaro_pavadinimas:

var komentatoriaus vardas = $ (# komentaras-forma #pavadinimas) .val ();

Nustatykite į vertę, kurią patraukė nuo komentatoriaus vardas:

$ ('span.name'). tekstas (komentatoriaus vardas);

Tuomet turime platų DOM dalių klonavimo, judėjimo, įterpimo ar naikinimo metodų pasirinkimą. Jūsų fantazija tikrai yra riba.

Tarkime, kad norėjote dinamiškai įterpti reklaminio vaizdo bloką kas trečią pastraipą turinio stulpelyje, bet jūs darote tai „Javascript“, kad būtų galima įkelti pradinį puslapį laikomi švarūs. Skamba gana sudėtingai, tiesa? Vargu ...

$('div # turinysp: n-tas vaikas (3n)').po ('');

Nepaisydami to, mes paprašėme „jQuery“:

1. Raskite skyrių su „turinio“ ID
2. Raskite tame skyriuje esančius p
3. Filtruokite kas 3 p naudojant n-ojo vaiko pseudo selektorių (daugiau apie tai čia)
4. Įdėkite savavališką paveikslėlį po kiekvienas atitikimo elementas

Negaliu išvardyti visų metodų čia ir nenorėtumėte to perskaityti. Esmė ta, kad yra būdas padaryti beveik viską, ką gali galvoti apie manipuliavimą, taigi patikrinkite API vienam galite naudoti.

Be to, atminkite, kad gali būti daugiau nei vienas būdas ką nors padaryti. Pavyzdžiui, jei negalite susiaurinti tinkamo objekto iki insertAfter (), galbūt pagalvok apie Kitas vaikas žemyn ir naudojasi insertBefore () vietoj to.

Metodo sujungimas

Galiausiai šiandien trumpai papasakokime apie metodų sujungimą iš esmės vien dėl to, kad jis nuostabus. Pirmiausia apsvarstykime šias kodo eilutes:

$ ('nav # meniu'). fadeIn ('greitas'); $ ('nav # menu'). addClass ('beingShown'); $ ('nav # menu'). css ('margin-right', '10px');

Tai skamba pakankamai pagrįstai, tiesa? Bet jūs galite padaryti tą patį tik viena eilute:

$ ('nav # menu'). fadeIn ('greitas'). addClass ('beingShown'). css ('kraštinė-dešinė', '10px');

Tai daro lygiai tą patį ir vadinasi metodo sujungimas. Kadangi beveik visi „jQuery“ metodai patys grąžina „jQuery“ objektą, kiekvienas gali būti įtrauktas į kitą. Tai reiškia, kad mažiau kodo - o tai visada yra geras dalykas - tačiau jis taip pat veikia greičiau.

Kodėl? Na, kiekvieną kartą iškviečiant pagrindinę „jQuery“ $ komandą ir parinkiklį, jūs prašote jo ieškoti DOM medyje, ieškant atitinkančio elemento. Kai grandinėsite metodus, jums nereikės nuolatos kreiptis į DOM, nes jis žino, kur jie yra, ir gali atlikti metodą akimirksniu.

Taip yra šiandiena, ir aš manau, kad tikriausiai apžvelgėme gana daug. Dabar jūs turėtumėte būti ginkluotas su galimybe atlikti keletą sunkių DOM manipuliacijų, taigi, eik, susipainiok savo metodus ir padaryk tikrą puslapio netvarką. Kol kas norėsite sudėti scenarijus į poraštę, kad likusiam puslapiui būtų suteikta laiko įkelti. Kitą savaitę spręsime klausimą, kaip „jQuery“ daryti dalykus tik tada, kai viskas tinkamai pakrauta į įvykius ir įdomus anoniminių funkcijų atvejis.

Jei jūs tiesiog suklupote ant šio įrašo, tikriausiai esate tam tikro pobūdžio internetinių svetainių kūrėjas ir galbūt norėsite patikrinti visus mūsų „WordPress“ ir tinklaraščių kūrimas straipsnius ar net mūsų Geriausi „WordPress“ papildiniai Geriausi „WordPress“ papildiniai Skaityti daugiau puslapis.