După cum am vorbit, jQuery poate fi gândit ca o bibliotecă „selectează și face”. Am vorbit despre selectarea destul de mult, așa că acum să vorbim despre unele lucruri. Amintiți-vă că modelul arată în principiu astfel:
// Select something! $(".something") // Do something! .hide();Mai degrabă decât să lucrăm cu mai multe exemple teoretice, ne mutăm direct în ceva din lumea reală. Am găsit acest stilou de Drew Barontini și l-am bifurcat.
Consultați Formularul de card de credit Pen de către Chris Coyier (@chriscoyier) pe CodePen
În exemplul nostru, am ascuns în mod prestabilit formularul cardului de credit. Apoi am creat un link pe care puteți face clic pentru a glisa în sus și a glisa în jos formularul cardului de credit. Noi selectați link - ul, apoi face o slideToggle pe formular. Selectați și faceți!
Nu am vorbit prea multe despre evenimente încă, dar aceasta este o parte imensă a jQuery. Un eveniment este ceva de genul unui clic al mouse-ului, apăsarea tastelor, derulare etc. Partea „face” din „selectați și faceți” se întâmplă adesea după un eveniment. Nu vă faceți griji, vom vorbi multe despre evenimente înainte ca această serie să fie terminată. Deocamdată, știți doar că on () este cel mai bun / standard mod de a lega evenimente în jQuery. Bind, adică „urmăriți acest eveniment pe acest element sau set de elemente”.
Planul de bază:
$("#link-that-toggles").on("click", function() ( $("#thing-to-toggle").slideToggle(); ));În exemplul nostru, link-ul a fost literalmente un link.
comutare
Modul în care funcționează legăturile hash în mod implicit în orice browser este că fereastra va derula până la elementul cu ID-ul care se potrivește cu acel link hash. Uneori e bine. Îmi place cum creează o conexiune semantică între acea legătură și acel element. Deci, fără niciun cod JavaScript, link-ul are în esență sens (mai ales dacă îl denumiți ceva inteligent).
Dar, uneori, acel comportament de săritură prin link hash este o prostie. O putem preveni în JavaScript folosind preventDefault. Ca aceasta:
$("#link-that-toggles").on("click", function(event) ( $("#thing-to-toggle").slideToggle(); event.preventDefault(); ));Vom vorbi mai multe despre asta.
Desigur, documentația proprie a jQuery este o resursă fantastică pentru toate aspectele „de făcut” ale jQuery (metode).
Cred că înțelegerea de bază a acestui „select și a face” și a evenimentelor deschide într-adevăr o lume de înțelegere în JavaScript. Știu că a făcut-o pentru mine. La sfârșitul acestui screencast luăm un vârf la designul actual al CSS-Tricks și vedem unde JavaScript este clar utilizat pentru a reacționa la unele evenimente de clic și pentru a schimba interfața de utilizare. Lucruri foarte asemănătoare cu ceea ce făceam în demo-ul anterior. De exemplu, setarea unei clase active pentru lucrurile pe care faceți clic, astfel:
Vedeți Penul d6f7161a5931397b4f24195a315d52f3 de Chris Coyier (@chriscoyier) pe CodePen