Kā mēs esam runājuši, jQuery var uzskatīt par “izvēlieties un izdariet” bibliotēku. Mēs esam runājuši par atlasi diezgan maz, tāpēc tagad parunāsim par dažām darbībām. Atcerieties, ka modelis būtībā izskatās šādi:
// Select something! $(".something") // Do something! .hide();Tā vietā, lai strādātu ar vairāk teorētiskiem piemēriem, mēs pārietam tieši uz kaut ko reālu pasauli-y. Mēs atradām šo Drū Barontīni pildspalvveida pilnšļirci un sazarojām to.
Skatiet Krisa Koijera (@chriscoyier) Pen kredītkartes veidlapu vietnē CodePen
Šajā piemērā mēs pēc noklusējuma slēpām kredītkartes veidlapu. Tad mēs izveidojām saiti, uz kuras varat noklikšķināt, lai slīdētu uz augšu un uz leju kredītkartes veidlapu. Mēs izvēlētos saiti, tad do kādu slideToggle veidlapā. Atlasiet un dariet!
Mēs vēl neesam daudz runājuši par notikumiem, taču tā ir milzīga jQuery sastāvdaļa. Notikums ir kaut kas līdzīgs peles klikšķiem, taustiņu nospiešanai, ritināšanai utt. “Atlasīt un darīt” daļa “darīt” bieži notiek pēc notikuma. Neuztraucieties, mēs daudz runāsim par notikumiem, pirms šī sērija būs pabeigta. Pagaidām vienkārši ziniet, ka vietnē () ir labākais / standarta veids, kā piesaistīt notikumus jQuery. Bind, kas nozīmē “skatīties šo notikumu uz šī elementa vai elementu kopas”.
Pamata plāns:
$("#link-that-toggles").on("click", function() ( $("#thing-to-toggle").slideToggle(); ));Mūsu piemērā saite bija burtiski saite.
pārslēgt
Ja pēc noklusējuma hash saites darbojas jebkurā pārlūkprogrammā, logs ritinās uz leju līdz elementam ar ID, kas atbilst šai hash saitei. Dažreiz tas ir labi. Man patīk, kā tas rada semantisku saikni starp šo saiti un šo elementu. Tātad bez jebkāda JavaScript saite joprojām ir jēga (it īpaši, ja jūs to nosaucat par kaut ko gudru).
Bet dažreiz šī saites lēciena uzvedība ir bummer. Mēs to varam novērst JavaScript, izmantojot preventDefault. Kā šis:
$("#link-that-toggles").on("click", function(event) ( $("#thing-to-toggle").slideToggle(); event.preventDefault(); ));Mēs parunāsim vairāk par to, ka tas notiks.
Protams, paša jQuery dokumentācija ir fantastisks resurss visiem jQuery (metožu) “do” aspektiem.
Es domāju, ka šīs “izvēlies un dari” un notikumu pamatzināšanas patiešām paver saprašanas pasauli JavaScript valodā. Es zinu, ka tas man darīja. Šīs ekrāna apraides beigās mēs sasniedzam maksimumu pašreizējā CSS-Tricks dizainā un redzam, kur JavaScript tiek skaidri izmantots, lai reaģētu uz dažiem klikšķu notikumiem un mainītu lietotāja saskarni. Ļoti līdzīga informācija tam, ko mēs darījām iepriekšējā demonstrācijā. Piemēram, aktīvās klases iestatīšana lietām, uz kurām noklikšķināt, piemēram:
Skatiet pildspalvu d6f7161a5931397b4f24195a315d52f3, ko izveidojis Chris Coyier (@chriscoyier) vietnē CodePen