OK we zullen terugkomen.
Tot nu toe hebben we gesproken over hoe we de elementen met J Querrey kunt selecteren en ook hoe we ze kunnen manipuleren.
Nu gaan we naar de laatste grote ontbrekende stuk dat de gebeurtenissen in J-query te introduceren.
Dus denk terug aan vanille J.S ..
Toen we gebeurtenislisteners toegevoegd gebruikten we een methode genaamd een evenement luisteraar.
Nou, het blijkt dat Jay waar hij heeft een ton van de methoden die te maken hebben met gebeurtenissen.
Dus ik heb het hoofdstuk evenement open op Jake, waar hij daar kan krijgen door te klikken op de gebeurtenissen hier.
Dus zoals ik hier doorheen te scrollen kun je zien hoe veel.
Coria evenement methoden zijn er chikor het komt met een ton van hen.
Dus wat ik ga doen is aandacht vestigen op de drie belangrijkste zijn de drie die u kunt gebruiken.
Negenennegentig procent van de tijd die drie methoden zijn snel druk op een toets en op.
En ik zei dat deze drie zou je 99 procent van de tijd te gebruiken.
Het is eigenlijk meer zoals deze hier.
U kunt 99 procent van de tijd te gebruiken.
Dus ik ga om te laten zien klikken en druk op de toets het eerste, maar mijn belangrijkste doel is om te laten zien hoe geweldig de methode is.
Dus laten we beginnen.
Dus Jay adjudanten snelle methode is hoe we kunnen heel snel en gemakkelijk een klik luisteraar toe te voegen aan een enkel element of een verzameling van elementen.
Dus je kunt zien heb ik twee voorbeelden in dit geval.
Ik ben het selecteren van iets en vervolgens het toevoegen van een klik luisteraar met een klik.
Dus iets met het idee van het indienen lopen we selecteren we.
Klik erop en dan komen we in een callback functie en dit callback functie zal worden geleid als er iets met het idee in te dienen wordt geklikt.
En omdat het een ID-er is slechts één op de pagina.
Dus als dat een item wordt geklikt deze code wordt uitgevoerd.
Als je hier een kijkje nemen van je kunt zien dat ik het selecteren van alle knoppen op de pagina waarop het kon zijn.
Het zou kunnen zijn 10 knopen en ik ben het toevoegen van een klik luisteraar om ze allemaal.
Dus elke keer dat een toets is snel het zal waarschuwen iemand klikt u op de knop.
Dus laat me te tonen dat.
Nu heb ik een eenvoudige HTL pagina met Jay queery opgenomen als een CDN.
En ik ga voegen laten we het doen Jay vraag evenementen en ik zal toevoegen in een paar knoppen.
Dus de eerste die ik zeg me niet te corrigeren.
En dan is de volgende zal zeggen serieus ok me.
En de laatste die zal zeggen dat dit is je laatste waarschuwing.
Dus we zullen slaan en open deze in de browser en controleer altijd alleen dat J geladen.
OK.
Ziet er goed uit.
Dus we gemakkelijk hier beginnen door het toevoegen van een snelle luisteraar deze H-1 en er is slechts één op de pagina.
Dus we hoeven alleen maar eerst met een dollarteken om te selecteren.
Dus degene die geeft ons het recht voor H-1, die slechts één en dan lopen we.
Klik niet op dat en dan moeten we passeren een callback functie die zal worden uitgevoerd wanneer we op dat H-1.
Dus achter de schermen klik is met behulp van een event listener en het toevoegen van een klik luisteraar op deze H-1 en kunnen we dit doen een anonieme functie die veel vaker te zien, maar wat meer intimiderend voor nieuwere studenten of we konden een benoemde functie schrijven afzonderlijk en vervolgens de naam van die functie in hier.
Maar zoals ik al zei anonieme functie zijn veel vaker voor.
Dus wat we willen doen is gewoon te waarschuwen ieder correct en ik druk op enter hier en nu als ik op deze H-1 klik je ziet krijg ik H-1 af te sluiten en dat gebeurt niet op een ander element.
Het gebeurt hier niet vergeten omdat mijn H-1 gaat helemaal over het scherm zodat CSSA probleem als ik wil de grootte van de ene veranderen, maar het gebeurt alleen als ik klik op de één element.
Nu wat ik wil doen is laten zien hoe we snel een luisteraar kan toevoegen aan een verzameling van elementen.
Dus ik ga alle knoppen hier selecteert.
Dus een dollarteken knop en dan voegen we onze klik net als dat en we kunnen overgaan in een anonieme functie opnieuw als onze terugbelservice.
En dit zal worden uitgevoerd wanneer een knop wordt geklikt en we zullen gewoon een waarschuwing druk op de knop, net als dat en druk op enter.
En nu, als ik klik op een van deze knoppen daar gaan we knop geklikt knop klik op de knop te stoppen.
Dus denk terug aan vanilla javascript om een ​​evenement luisteraar een verzameling van knoppen toe te voegen.
Ik zou hebben om ze allemaal met de vraag selector selecteren of om elementen op tag naam en dan zou ik een te gebruiken voor lus om lus door ze allemaal en dan zou ik moeten individueel voeg een evenement luisteraar die duidelijk er gebeurt Achter de schermen.
Maar alles wat ik moet doen is te schrijven deze lijn en dat zal lus voor mij dat het evenement luisteraars individueel zal toevoegen die haar leven echt makkelijk in plaats van alleen een leren knop geklikt wordt.
Wat als ik wilde veranderen de stijl te veranderen de achtergrondkleur van de knop waarop is geklikt.
Dus ik nodig zou hebben om een ​​klik luisteraar opnieuw toe te voegen.
Ik ben gewoon op de pijl omhoog en dan waarschuwen.
Wat we gaan doen is de kleur achtergrond, zodat gaat om iets dat C-s s achtergrond en we zullen veranderen roze te zijn.
Dus de vraag is wat moeten we bellen Dotsie CSSA op en terug met vanille javascript.
We zouden dit kunnen gebruiken.
Het sleutelwoord dit en dat verwijst naar het element dat werd geklikt echter NJ query die zal niet helemaal werken wat we moeten doen, is gebruik maken van de J Querrey versie van deze.
Dit is altijd een beetje een verwarrende idee.
Ik denk dat het helpt om te onthouden dat wat Shakeri doet is het neemt plain vanilla Ja en wikkelt het in Jay query en het is groot J.A.G. knuffelen en het geeft het een aantal speciale eigenschappen en methoden.
Dus als we willen dot CSSA dat is een J-query methode die we moeten ervoor zorgen dat we het nu draait op een J-query-object gebruiken.
Dus gewoon oud Dit is de reguliere vanille javascript dit.
Dus moeten we het te verpakken en te vertellen dat dit is de J-query-versie.
Dus laten we testen of buiten.
Druk op enter hier en nu laten we klik op de knop eerste hebben we dat alert omdat we nooit verlost van deze eerste klik luisteraar.
En dan de achtergrond verandert in roze en je kunt zien dat er zal gebeuren met een ieder die ik klik.
Wij konden ook zoiets te doen.
Dus ik raakte de pijl omhoog en ik vernieuw de pagina in plaats van alleen het veranderen van hen roze te zijn.
We kunnen ook doen annuleren die log en Walcott's voor volwassenen te loggen de tekst van de knop waarop is geklikt.
Dus het zou iets zijn als u plus geklikt en dan zal ik een variabele om dit zo variabel tekst op te slaan gelijk dollarteken dit punt en aan die tekst uit daar hoeven we alleen maar naar de tekst methode te gebruiken, net als dat Kaso die inloggen krijgen u hebt geklikt ons tekst dat is onze naam van de variabele en voer.
En nu, als ik er een klik je klikte niet click me u hebt geklikt.
Dit is je laatste waarschuwing.
En u hebt geklikt.
Serieus niet click me.
OK.
Dus dat is alles wat ik zal laten zien over.
Klik.
Samenvattend kunnen we een luisteraar toe te voegen aan een element op een moment als we deden voor de H-1.
Of we kunnen doen om een ​​collectie die is waar het echt nuttig wordt.
En dan tot slot als we willen verwijzen naar het element dat is geklikt we nodig hebben om dollarteken dit is het J queery wikkel de J.A.G. gebruiken versie van de Vanilla.