Hoe gebeurtenissen toevoegen aan jQuery Objects voor HTML5 en CSS3 Programming - dummies

De jQuery-bibliotheek voegt nog een extreem krachtige mogelijkheid toe aan JavaScript. Hiermee kunnen HTML5- en CSS3-programmeurs eenvoudig een gebeurtenis aan elk jQuery-object koppelen. Kijk eens hover. html.

Wanneer u uw cursor op een willekeurig item plaatst, verschijnt er een rand rond het item. Dit is geen moeilijk te bereiken effect in gewone CSS, maar het is zelfs gemakkelijker in jQuery.

Hoe een zwevende gebeurtenis toe te voegen

Kijk naar de code om te zien hoe het werkt:

zweven. html $ (init); function init () {$ ("li"). hover (border, noBorder);} // end init function border () {$ (this). css ("border", "1px solid black");} function noBorder () {$ (this). css ("border", "0px none black");}

Hover-demo

alpha
bèta
gamma
delta

De HTML kan niet eenvoudiger zijn. Het is gewoon een ongeordende lijst. JavaScript is niet veel complexer. Het bestaat uit drie functies met één regel:

• init () wordt aangeroepen wanneer het document gereed is. Het maakt jQuery-objecten van alle lijstitems en voegt de gebeurtenis eraan toe. De functie hover () accepteert twee parameters:

  • De eerste is een functie die moet worden aangeroepen wanneer de cursor boven het object zweeft.

  • De tweede is een functie die moet worden aangeroepen wanneer de cursor het object verlaat.

• border () tekent een rand rond het huidige element. De $ (this) -code wordt gebruikt om het huidige object op te geven.

• noborder () is een functie die erg lijkt op de border () -functie, maar verwijdert een rand van het huidige object.

In dit voorbeeld werden drie verschillende functies gebruikt. Veel jQuery-programmeurs gebruiken anonieme functies (soms lambda -functies) om de volledige functionaliteit in één lange regel te plaatsen:

$ ("li"). hover (function () {$ (this). css ("border", "1px solid black");}, function () {$ (this). css ("border", "0px none black");});

Houd er rekening mee dat dit nog steeds technisch gezien een enkele regel code is. In plaats van te verwijzen naar twee functies die al zijn gemaakt, kunt u de functies meteen bouwen waar ze nodig zijn. Elke functiedefinitie is een parameter voor de methode hover ().

Als je een computerwetenschapper bent, zou je kunnen zeggen dat dit geen perfect voorbeeld is van een lambda-functie, en je zou gelijk hebben. Het belangrijkste is om op te merken dat sommige ideeën van functioneel programmeren (zoals lambda-functies) doorsijpelen in de reguliere AJAX-programmering en dat is een opwindende ontwikkeling.

Van klassen veranderen

jQuery ondersteunt nog een geweldige functie.U kunt een CSS-stijl definiëren en vervolgens die stijl dynamisch aan een element toevoegen of verwijderen.

De code geeft aan hoe gemakkelijk dit soort functies is toe te voegen:

klasse. html. begrensd {border: 1px effen zwart;} $ (init); function init () {$ ("li"). klik (toggleBorder);} // end init-functie toggleBorder () {$ (this). toggleClass ("bordered");}

Class Demo

alpha
beta
gamma
delta

Zo kunt u dit programma maken:

1. Begin met een eenvoudige HTML-pagina.

   Alle interessante dingen gebeuren in CSS en JavaScript, dus de feitelijke inhoud van de pagina is niet zo belangrijk.

2. Maak een klas die u wilt toevoegen en verwijderen.

   U kunt een CSS-klasse bouwen met de naam die eenvoudig een rand rond het element tekent. Natuurlijk kun je een veel geavanceerdere CSS-klasse maken met allerlei opmaak als je dat wilt.

3. Koppel een methode init ().

   Zoals je begint te zien, vereisen de meeste jQuery-applicaties een soort van initialisatie. U kunt de eerste functie bellen. init ()

4. Roep de functie toggleBorder () op wanneer de gebruiker op een lijstitem klikt.

   De methode init () stelt eenvoudig een gebeurtenishandler in. Wanneer een lijstitem de klikgebeurtenis ontvangt (dat wil zeggen, er wordt op geklikt), moet de functie toggleBorder () zijn geactiveerd. De toggleBorder () -functie, goed, schakelt de rand.

   jQuery heeft verschillende methoden voor het manipuleren van de klasse van een element:

   • addClass () wijst een klasse toe aan het element.

   • removeClass () verwijdert een klassedefinitie uit een element.

   • toggleClass () schakelt de klasse (voegt deze toe als deze niet is bijgevoegd of verwijdert deze anders).