Amint arról már beszéltünk, a jQuery úgy tekinthető, mint egy „select and do” könyvtár. Elég sokat beszéltünk a kiválasztásról, ezért most beszéljünk néhány cselekedetről. Ne feledje, hogy a minta alapvetően így néz ki:
// Select something! $(".something") // Do something! .hide();Ahelyett, hogy elméletibb példákkal dolgoznánk, jobbra lépünk valami valós világba. Megtaláltuk ezt a tollat Drew Barontini által, és elágaztunk.
Lásd Chris Coyier (@chriscoyier) Pen hitelkártya űrlapját a CodePen-en
Példánkban alapértelmezés szerint elrejtettük a hitelkártya űrlapot. Ezután létrehoztunk egy linket, amelyre kattintva csúsztathatja fel és csúsztathatja le a hitelkártya űrlapot. Mi válasszuk a linkre, majd tegye a slideToggle az űrlapon. Válassza ki és tegye!
Még nem nagyon beszéltünk az eseményekről, de ez a jQuery hatalmas része. Az esemény olyasmi, mint az egér kattintása, gombnyomása, görgetése stb. A „választani és csinálni” rész „megteszi” része gyakran egy esemény után következik be. Ne aggódjon, még sokat beszélgetünk az eseményekről, még mielőtt véget érne ez a sorozat. Egyelőre csak tudd, hogy az () a legjobb / szokásos módszer az események lekötésére a jQuery-ben. Kötés, vagyis „figyelje ezt az eseményt ezen az elemen vagy elemkészleten”.
Az alapterv:
$("#link-that-toggles").on("click", function() ( $("#thing-to-toggle").slideToggle(); ));Példánkban a link szó szerint egy link volt.
váltani
A hash-linkek alapértelmezés szerint bármely böngészőben működnek úgy, hogy az ablak lefelé görget az elemhez, amelynek azonosítója megegyezik a hash-linkkel. Néha ez jó. Tetszik, hogy ez hogyan hoz létre szemantikus kapcsolatot a kapcsolat és az elem között. Tehát minden JavaScript nélkül a linknek továbbra is van értelme (főleg, ha valami okosnak címezzük).
De néha ez a hash link ugró viselkedés bummer. Megelőzhetjük JavaScriptben a preventDefault használatával. Mint ez:
$("#link-that-toggles").on("click", function(event) ( $("#thing-to-toggle").slideToggle(); event.preventDefault(); ));Még többet fogunk beszélni erről.
Természetesen a jQuery saját dokumentációja fantasztikus erőforrás a jQuery (módszerek) minden „do” aspektusához.
Úgy gondolom, hogy ennek a „választani és csinálni” és az események legalapvetőbb megértése valóban a megértés világát nyitja meg a JavaScriptben. Tudom, hogy nekem tett. A jelen képernyő végén csúcsot érünk el a CSS-Tricks jelenlegi kialakításánál, és megnézzük, hol használatos egyértelműen a JavaScript a kattintási eseményekre reagáláshoz és a felhasználói felület megváltoztatásához. Nagyon hasonló dolgok, mint amit az előző bemutatóban csináltunk. Például egy aktív osztály beállítása a kattintott dolgokra, például:
Lásd a Pen d6f7161a5931397b4f24195a315d52f3 című cikket, Chris Coyier (@chriscoyier) a CodePen-en