JQuery (2. osa) sissejuhatus: meetodid ja funktsioonid

Reklaam

See on osa pidevast jQuery veebiprogrammeerimissarja tutvustamisest. 1. osa hõlmas jQuery põhitõdesid jQuery juhendaja - alustamine: põhitõed ja valijadEelmisel nädalal rääkisin sellest, kui oluline on jQuery iga kaasaegse veebiarendaja jaoks ja miks see on fantastiline. Sel nädalal arvan, et on aeg käes käsi mõne koodiga määrida ja saime teada, kuidas ... Loe rohkem kuidas seda oma projekti lisada ja valijad. 2. osas jätkame põhikasutusega, kui vaatleme mõnda meetodit, mida saate nende DOM-i elementide puhul kasutada, ja veel mõned keele põhialused.

$(valija).meetod();

Kui meenutate õppetunnist 1, on see DQ manipuleerimise põhistruktuur jQuery-s. DOM-i manipuleerimine pole muidugi ainus asi, mida saate jQuery abil teha, kuid see on kõige lihtsam koht alustamiseks ja kõige levinum, seetõttu valisime selle.

Kiireks kokkuvõtmiseks valija selle väljavõtte osa võimaldab teil kasutada DOM-i osade leidmiseks CSS-i tüüpi elementide nimesid, klasse või ID-sid. Näiteks selleks, et haarata kõik klassi nimega .peidetud, kasutaksime:

$ ('div.hidden')

Selle võrrandi teine ​​osa on meetod esinema nendel DIV-del, kui oleme need leidnud (kui need üldse olemas on; või võivad need olla ainult üks "sobiv" üksus). Pidage meeles, et jQuery tagastab ID-de valimisel ainult ühe elemendi, kuna ID-d peaksid viitama ainulaadsetele üksustele. Kui teil on midagi enamat kui üks, tuleb see CSS-is määratleda klassina.

Seejärel meetoditele; mida saab nagunii DOM-i elementidega teha?

Esiteks tutvustasin teile .css meetodit viimati, nii et saaksite seda katsetamiseks kasutada. Vorming on lihtne:

.css ('omadus', 'väärtus');

Midagi CSS-is määratletavat saab jQuery abil kohandada - värvid, läbipaistvus, asukoht, suurus -, et nimetada vaid mõnda. Muudatus on kohene.

Kui eelistaksite CSS-i muudatusi animeerida, olen saanud teile suurepäraseid uudiseid; seal on ka meetod nimega .animate (). See on natuke keerulisem:

.animate ({'omadus': 'väärtus'}, kiirus);

Näitena:

.animaalne ({'läbipaistmatus': '0,25', 'kõrgus': '100 pikslit', 'kiire');

Sel hetkel võiksite küsida, mille jaoks on lokkis traksid; neid nimetatakse "objektide liitriteks" ja tavaliselt kasutatakse nende loendi loomiseks vara: väärtus paar, selline nagu indekseeritud massiiv kui olete pärit teistest keeltest. Kasutate neid jQuery programmis palju, seega ütlen seda veel kord - harjuge kinniste sulgude ja traksidega korralikult kontrollima!

Vaadake sellel lehel paljudele animeeriva meetodi töönäidetele.

Lisaks millegi CSS-i omadustega manipuleerimisele saate selle sisu reguleerida ka nupuga .ka text (), .html () ja .val () meetodid (val on vormielementide sisu kohta). Need meetodid toimivad mõlemad seatudters ja saadaters; kui te väärtust ei määra, saavad nad praeguse väärtuse. Kui määrate väärtuse, asendavad need praeguse väärtuse.

Siin on mõned näited:

Hankige kommentaari vormis nimevälja praegune väärtus ja määrake see muutujale kommentaari_nimi:

var kommentaatori_nimi = $ (# kommentaari-vorm #nimi) .val ();

Seadke väärtus väärtuseni, mille haarasite alates kommentaatori_nimi:

$ ('span.name'). tekst (kommentaari_nimi);

Siis on meil tohutu valik DOM-i osade kloonimise, liikumise, sisestamise või kustutamise meetodeid. Teie kujutlusvõime on tõesti piir.

Oletame, et soovisite reklaamipildiploki dünaamiliselt sisestada iga iga kolmanda järel sisu veerus olev lõik, kuid teete seda Javascriptiga, nii et lehe algne koormus võib olla hoiti puhtana. Kõlab üsna keeruliselt, eks? Vaevalt…

$('div # sisulk: n-laps (3n)').pärast ('');

Selle ära murdes oleme palunud jQueryl:

1. Leidke div koos sisutunnusega
2. Leidke selles jaotises olevad p-d
3. Filtreeri iga 3. lk n-nda lapse pseudovalija kasutamine (sellest lähemalt siin)
4. Sisestage suvaline pilt pärast iga sobiv element

Ma ei saa siinkohal kõiki meetodeid loetleda ega tahaks seda lugeda. Asi on selles, et on olemas meetod, mille abil saate teha peaaegu kõike, mida võite manipuleerimise puhul mõelda, seega kontrollige API-d ühe saate kasutada.

Samuti pidage meeles, et millegi tegemiseks on mitu võimalust. Näiteks kui te ei saa õiget objekti kitsendada insertAfter (), võib-olla mõtleme selle leidmise üle järgmine laps maha ja kasutab insertBefore () selle asemel.

Meetodi aheldamine

Lõpuks andkem täna kiire sõna meetodi aheldamise kohta, peamiselt seetõttu, et see on fantastiline. Kõigepealt kaaluge järgmisi koodiridasid:

$ ('nav # menüü'). fadeIn ('kiire'); $ ('nav # menüü'). addClass ('beingShown'); $ ('nav # menüü'). css ('parem-parempoolne', '10 pikslit');

See kõlab piisavalt mõistlikult, eks? Kuid saate teha sama ainult ühe reaga:

$ ('nav # menüü'). fadeIn ('kiire'). addClass ('beingShown'). css ('marginaal paremal', '10 pikslit');

See teeb täpselt sama asja ja seda kutsutakse meetod aheldamine. Kuna peaaegu kõik jQuery meetodid tagavad jQuery objekti ise, saab igaüks neist järgmise sisestada. See tähendab vähem koodi - mis on alati hea -, kuid see töötab ka kiiremini.

Miks? Noh, iga kord, kui käivitate tavalise jQuery $ käsku ja valijat, palute tal otsida DOM-i puust, otsides sobivat elementi. Meetodeid aheldades ei pea te pidevalt DOM-ile tagasi viitama, sest ta teab, kus nad praegu asuvad, ja saab seda meetodit kohe rakendada.

Nii see on tänaseks ja ma arvan, et oleme ilmselt üsna palju kaetanud. Nüüd peaksite olema relvastatud võimalusega teostada mõnda päris rasket DOM-i manipulatsiooni, nii et minge edasi, aheldage oma meetodid kokku ja tehke lehe tõeline segadus. Praegu peate oma skriptid jalusesse paigutama, et anda ülejäänud lehe laadimiseks aega. Järgmisel nädalal tegeleme sellega, et jQuery teeks asju ainult siis, kui kõik on sündmustega õigesti laaditud ja anonüümsete funktsioonide uudishimulik juhtum.

Kui olete just selle postituse otsa komistanud, olete tõenäoliselt mingisugune veebiarendaja ja võiksite vaadata kõiki meie WordPress ja ajaveeb artiklid või isegi meie Parimad WordPressi pluginad Parimad WordPressi pluginad Loe rohkem lehel.