Zoals we hebben besproken, kan jQuery worden gezien als een "selecteer en doe" -bibliotheek. We hebben het nogal eens gehad over selecteren, dus laten we het nu hebben over wat er te doen is. Onthoud dat het patroon er in wezen als volgt uitziet:
// Select something! $(".something") // Do something! .hide();In plaats van met meer theoretische voorbeelden te werken, gaan we rechtstreeks naar iets echts. We hebben deze pen van Drew Barontini gevonden en gevorkt.
Zie het Pen Credit Card-formulier van Chris Coyier (@chriscoyier) op CodePen
In ons voorbeeld hebben we het creditcardformulier standaard verborgen. Vervolgens hebben we een link gemaakt waarop u kunt klikken om omhoog en omlaag over het creditcardformulier te schuiven. We selecteren de link en doen vervolgens een slideToggle op het formulier. Selecteer en doe!
We hebben nog niet veel over evenementen gesproken, maar dat is een groot deel van jQuery. Een gebeurtenis is zoiets als een muisklik, toetsaanslagen, scrollen, enz. Het "doen" -gedeelte van "selecteren en doen" gebeurt vaak na een gebeurtenis. Maak je geen zorgen, we zullen veel over evenementen praten voordat deze serie voorbij is. Weet voorlopig dat on () de beste / standaardmanier is om gebeurtenissen in jQuery te binden. Binden, wat 'let op deze gebeurtenis op dit element of een reeks elementen' betekent.
Het basisplan:
$("#link-that-toggles").on("click", function() ( $("#thing-to-toggle").slideToggle(); ));In ons voorbeeld was de link letterlijk een link.
schakelen
De manier waarop hash-links standaard in elke browser werken, is dat het venster naar beneden scrolt naar het element met de ID die overeenkomt met die hash-link. Soms is dat goed. Ik vind het leuk hoe het een semantische verbinding creëert tussen die link en dat element. Dus zonder JavaScript is de link in wezen nog steeds logisch (vooral als je het iets slims noemt).
Maar soms is dat hash-link-springgedrag een spelbreker. We kunnen het in JavaScript voorkomen met preventDefault. Zoals dit:
$("#link-that-toggles").on("click", function(event) ( $("#thing-to-toggle").slideToggle(); event.preventDefault(); ));We zullen daar meer over praten.
Natuurlijk is de eigen documentatie van jQuery een fantastische bron voor alle "doe" -aspecten van jQuery (methoden).
Ik denk dat de basiskennis van dit "selecteren en doen" en evenementen echt een wereld van begrip in JavaScript opent. Ik weet dat het voor mij deed. Aan het einde van deze screencast nemen we een kijkje in het huidige ontwerp van CSS-Tricks en zien we waar JavaScript duidelijk wordt gebruikt om op sommige klikgebeurtenissen te reageren en de gebruikersinterface te wijzigen. Zeer vergelijkbaar met wat we aan het doen waren in de vorige demo. Stel bijvoorbeeld een actieve klasse in voor dingen waarop u klikt:
Zie de Pen d6f7161a5931397b4f24195a315d52f3 door Chris Coyier (@chriscoyier) op CodePen