Sådan tilføjes hændelser til jQuery-objekter til HTML5 og CSS3-programmering - dummier

JQuery-biblioteket tilføjer en anden ekstremt kraftig evne til JavaScript. Det gør det muligt for HTML5 og CSS3 programmører nemt at vedhæfte en begivenhed til ethvert jQuery-objekt. Tag et kig på sværgeren. html.

Når du flytter markøren over et hvilket som helst listeelement, vises en grænse omkring elementet. Dette er ikke en vanskelig effekt at opnå i almindelig CSS, men det er endnu nemmere i jQuery.

Sådan tilføjes en svævningsbegivenhed

Se koden for at se, hvordan den virker:

svinger. html $ (init); funktion init () {$ ("li"). svinge (grænse, noBorder);} // end init-funktion grænsen () {$ (dette). css ("border", "1px solid black");} funktion noBorder () {$ (dette). css ("grænse", "0px ingen sort");}

Hover Demo

alfa
beta
gamma
delta

HTML'en kunne ikke være enklere. Det er simpelthen en uordnet liste. JavaScript er ikke meget mere komplekst. Den består af tre one-line-funktioner:

• init () kaldes, når dokumentet er klar. Det gør jQuery-objekter af alle listeposter og tilføjer hændelsen til dem. Funktionen hover () accepterer to parametre:

  • Den første er en funktion, der skal kaldes, når markøren svæver over objektet.

  • Den anden er en funktion, der skal kaldes, når markøren forlader objektet.

• border () tegner en grænse omkring det aktuelle element. $ (this) -identifikatoren bruges til at angive det aktuelle objekt.

• noborder () er en funktion, der ligner funktionen border () , men den fjerner en grænse fra det aktuelle objekt.

I dette eksempel blev der anvendt tre forskellige funktioner. Mange jQuery-programmører foretrækker at bruge anonyme funktioner (undertiden kaldet lambda funktioner) for at vedhæfte hele funktionaliteten i en lang linje:

$ ("li"). css ("border", "0px solid black");}, funktion () {$ (dette). css ("grænse", "0px ingen sort");});

Bemærk, at dette stadig er teknisk en enkelt kodekode. I stedet for at referere til to funktioner, der allerede er oprettet, kan du opbygge funktionerne, hvor de er nødvendige. Hver funktionsdefinition er en parameter til hover () -metoden.

Hvis du er computerforsker, kan du argumentere for, at dette ikke er et perfekt eksempel på en lambda-funktion, og du ville være korrekt. Det vigtige er at bemærke, at nogle ideer om funktionel programmering (som lambda-funktioner) kryber ind i mainstream AJAX programmering, og det er en spændende udvikling.

Ændring af klasser på flugt

jQuery understøtter en anden vidunderlig funktion.Du kan definere en CSS-stil og derefter tilføje eller fjerne denne stil fra et element dynamisk.

Koden viser, hvor nemt denne type funktion er at tilføje:

klasse. html. grænser {border: 1px solid black;} $ (init); funktion init () {$ ("li"). klik (toggleBorder);} // end init funktion toggleBorder () {$ (dette). toggleClass ("bordered");}

Klassedemo

alfa
beta
gamma
delta

Sådan gør du dette program:

1. Begynd med en grundlæggende HTML-side.

   Alle de interessante ting sker i CSS og JavaScript, så det faktiske indhold på siden er ikke så kritisk.

2. Opret en klasse, du vil tilføje og fjerne.

   Du kan opbygge en CSS-klasse kaldet, der blot tegner en ramme rundt om elementet. Selvfølgelig kan du lave en langt mere sofistikeret CSS klasse med alle former for formatering, hvis du foretrækker det.

3. Link en init () metode.

   Som du begynder at se, kræver de fleste jQuery-programmer en form for initialisering. Du kan ringe til den første funktion. init ()

4. Kald funktionen toggleBorder (), når brugeren klikker på en listeobjekt.

   Metoden init () indstiller blot en hændelseshandler. Når et liste element modtager klikhændelsen (det vil sige det klikkes), skal funktionen toggleBorder () aktiveres. Funktionen toggleBorder () bytter også grænsen.

   jQuery har flere metoder til at manipulere klassen af ​​et element:

   • addClass () tildeler en klasse til elementet.

   • removeClass () fjerner en klassedefinition fra et element.

   • toggleClass () skifter klassen (tilføjer den, hvis den ikke er vedhæftet eller fjerner den ellers).