Nagu me oleme sellest rääkinud, võib jQuery mõelda kui "valige ja tee" teeki. Oleme rääkinud üsna vähe valimisest, nii et nüüd räägime mõnest tegevusest. Pidage meeles, et muster näeb põhimõtteliselt välja selline:
// Select something! $(".something") // Do something! .hide();Teoreetilisemate näidetega töötamise asemel liigume otse millessegi reaalsesse maailma. Leidsime selle pliiatsi Drew Barontini käest ja kahvli.
Vaadake Chris Coyieri (@chriscoyier) pliiatsi krediitkaardivormi CodePenis
Meie näites varjasime vaikimisi krediitkaardi vormi. Seejärel lõime lingi, millel klõpsates saate krediitkaardi vormi üles ja alla libistada. Me valida link, siis teha slideToggle vormi. Valige ja tehke!
Me pole sündmustest veel palju rääkinud, kuid see on tohutu osa jQueryst. Sündmus on midagi sellist nagu hiireklõps, klahvivajutus, kerimine jne. „Vali ja tee” osa „tee” juhtub sageli pärast sündmust. Ärge muretsege, me räägime sündmustest palju enne, kui see sari läbi saab. Praegu lihtsalt tea, et on () on parim / standardne viis sündmuste sidumiseks jQuery's. Bind, mis tähendab "jälgige seda sündmust selle elemendi või elementide kogumi abil".
Põhiplaan:
$("#link-that-toggles").on("click", function() ( $("#thing-to-toggle").slideToggle(); ));Meie näites oli link sõna otseses mõttes link.
ümberlülitamine
Räsilinkide mis tahes brauseris vaikimisi toimimine on see, et aken kerib alla selle ID-ga elemendi juurde, mis vastab sellele räsilingile. Mõnikord on see hea. Mulle meeldib, kuidas see loob semantilise ühenduse selle lingi ja selle elemendi vahel. Nii et ilma JavaScripti puudumisel on lingil ikkagi sisuliselt mõtet (eriti kui panete sellele midagi nutikat).
Kuid mõnikord on selline hash link hüpped käitumine hüppeline. Saame seda JavaScriptis ära hoida, kasutades preventDefault. Nagu nii:
$("#link-that-toggles").on("click", function(event) ( $("#thing-to-toggle").slideToggle(); event.preventDefault(); ));Me räägime sellest lähemalt.
Muidugi on jQuery enda dokumentatsioon fantastiline ressurss kõigi jQuery (meetodite) aspektide jaoks, mida teha.
Ma arvan, et selle "vali ja tee" ning sündmuste põhiline arusaamine avab tõesti JavaScripti mõistmismaailma. Ma tean, et see tegi minu jaoks. Selle ekraanikuva ülekande lõpus jõuame tippu CSS-Tricksi praeguse kujunduse juures ja näeme, kus JavaScripti kasutatakse selgelt mõnele klikiüritusele reageerimiseks ja kasutajaliidese muutmiseks. Väga väga sarnane värk sellele, mida me eelmises demos tegime. Näiteks aktiivse klassi määramine klõpsatud asjadele järgmiselt:
Vaadake Code Cenilt Chris Coyieri (@chriscoyier) pliiatsi d6f7161a5931397b4f24195a315d52f3