Slik legger du til hendelser på jQuery-objekter for HTML5 og CSS3 Programmering - dummier

JQuery-biblioteket legger til en annen ekstremt kraftig evne til JavaScript. Det tillater HTML5 og CSS3 programmerere å enkelt legge ved en hendelse til et hvilket som helst jQuery-objekt. Ta en titt på svingeren. html.

Når du flytter markøren over et hvilket som helst listeelement, vises en kant rundt elementet. Dette er ikke en vanskelig effekt å oppnå i vanlig CSS, men det er enda enklere i jQuery.

Slik legger du til en svinghendelse

Se koden for å se hvordan den virker:

svinger. html $ (init); funksjon init () {$ ("li"). sveve (grense, noBorder);} // end init-funksjonsgrensen () {$ (dette). css ("border", "1px solid black");} funksjon noBorder () {$ (dette). css ("grense", "0px ingen svart");}

Slå demo

alfa
beta
gamma
delta

HTML-en kunne ikke vært enklere. Det er rett og slett en uordnet liste. JavaScript er ikke mye mer komplekst. Den består av tre enlinjefunksjoner:

• init () kalles når dokumentet er klart. Det gjør jQuery-objekter av alle listeposter og legger hendelsen til dem. Funksjonen hover () aksepterer to parametere:

  • Den første er en funksjon som skal kalles når markøren svinger over objektet.

  • Den andre er en funksjon som skal kalles når markøren forlater objektet.

• border () trekker en kant rundt det nåværende elementet. $ (denne) -identifikatoren brukes til å spesifisere det nåværende objektet.

• noborder () er en funksjon som ligner på funksjonen border () , men den fjerner en kantlinje fra det nåværende objektet.

I dette eksemplet ble det brukt tre forskjellige funksjoner. Mange jQuery-programmerere foretrekker å bruke anonyme funksjoner (noen ganger kalt lambda funksjoner) for å legge hele funksjonaliteten i en lang linje:

$ ("li"). css ("grense", "0px ikke svart");}, funksjon () {$ (dette);

Merk at dette fremdeles er teknisk en enkelt linje med kode. I stedet for å referere til to funksjoner som allerede er opprettet, kan du bygge opp funksjonene umiddelbart der de trengs. Hver funksjonsdefinisjon er en parameter til hover () -metoden.

Hvis du er datavitenskapsmann, kan du hevde at dette ikke er et perfekt eksempel på en lambda-funksjon, og du ville være riktig. Det viktigste er å legge merke til at noen ideer om funksjonell programmering (for eksempel lambda-funksjoner) kryper inn i mainstream AJAX programmering, og det er en spennende utvikling.

Endre klasser på fluen

jQuery støtter en annen flott funksjon.Du kan definere en CSS-stil og deretter legge til eller fjerne denne stilen fra et element dynamisk.

Koden viser hvor lett denne typen funksjon er å legge til:

klasse. html. grenser {grense: 1px solid svart;} $ (init); funksjon init () {$ ("li"). klikk (toggleBorder);} // end init funksjon toggleBorder () {$ (dette). toggleClass ("bordered");}

Klassedemo

alfa
beta
gamma
delta

Slik gjør du dette programmet:

1. Begynn med en grunnleggende HTML-side.

   Alle interessante ting skjer i CSS og JavaScript, så det faktiske innholdet på siden er ikke så kritisk.

2. Opprett en klasse du vil legge til og fjerne.

   Du kan bygge en CSS-klasse kalt som bare trekker en kant rundt elementet. Selvfølgelig kan du lage en mye mer sofistikert CSS-klasse med all slags formatering hvis du foretrekker det.

3. Koble en init () -metode.

   Som du begynner å se, krever de fleste jQuery-programmer en form for initialisering. Du kan ringe den første funksjonen. init ()

4. Ring funksjonen toggleBorder () når brukeren klikker på en liste element.

   Metoden init () oppretter bare en hendelseshåndterer. Når et listeelement mottar klikkhendelsen (det vil si det klikkes), skal funksjonen toggleBorder () aktiveres. ToggleBorder () -funksjonen, vel, skifter grensen.

   jQuery har flere metoder for å manipulere klassen av et element:

   • addClass () tilordner en klasse til elementet.

   • removeClass () fjerner en klasses definisjon fra et element.

   • toggleClass () bytter klassen (legger til den hvis den ikke er vedlagt eller fjerner den på annen måte).