Innehållsförteckning:
Video: JavaScript for Web Apps, by Tomas Reimers and Mike Rizzo 2024
Biblioteket jQuery lägger till en annan extremt kraftfull förmåga att JavaScript. Det låter HTML5 och CSS3 programmerare enkelt bifoga en händelse till något jQuery-objekt. Ta en titt på svävaren. html.
När du flyttar markören över något listobjekt visas en kant runt objektet. Detta är inte en svår effekt att uppnå i vanlig CSS men det är ännu enklare i jQuery.
Så här lägger du till en svänghändelse
Titta på koden för att se hur den fungerar:
sväva. html $ (init); funktion init () {$ ("li"). sväva (gränsen, noBorder);} // end init-funktionen gränsen () {$ (detta). css ("border", "1px solid black");} funktion noBorder () {$ (detta). css ("gränsen", "0px ingen svart");}
Hover Demo
- alfa
- beta
- gamma
- delta
HTML-filen kunde inte vara enklare. Det är helt enkelt en orörd lista. JavaScript är inte mycket mer komplext. Den består av tre enradiga funktioner:
-
init () kallas när dokumentet är klart. Det gör jQuery-objekt av alla listobjekt och fäster händelsen till dem. Funktionen svävar () aktiverar två parametrar:
-
Den första är en funktion som ska ringas när markören svänger över objektet.
-
Den andra är en funktion som ska ringas när markören lämnar objektet.
-
-
border () drar en kant runt det aktuella elementet. $ (this) -identifieraren används för att ange det aktuella objektet.
-
noborder () är en funktion som mycket liknar funktionen border () , men den tar bort en gräns från det aktuella objektet.
I det här exemplet användes tre olika funktioner. Många jQuery-programmerare föredrar att använda anonyma funktioner (ibland kallade lambda -funktioner) för att bifoga hela funktionaliteten i en lång rad:
$ ("li"). css ("border", "0px solid black");}, funktion () {$ (detta). css ("border", "0px none black");;
Observera att detta fortfarande är tekniskt en enda kodrad. Istället för att referera till två funktioner som redan har skapats kan du bygga upp funktionerna omedelbart där de behövs. Varje funktionsdefinition är en parameter till hover () -metoden.
Om du är datavetenskapsman kan du argumentera för att detta inte är ett perfekt exempel på en lambda-funktion, och du skulle vara korrekt. Det viktiga är att märka att några idéer om funktionell programmering (som lambda-funktioner) kryper in i AJAX-programmering, vilket är en spännande utveckling.
Ändra klasser på flugan
jQuery stöder en annan underbar funktion.Du kan definiera en CSS-stil och sedan lägga till eller ta bort den stilen från ett element dynamiskt.
Koden visar hur lätt den här typen av funktion är att lägga till:
klassen. html. gränsar till {border: 1px solid black;} $ (init); funktion init () {$ ("li"). klicka (toggleBorder);} // end init funktion toggleBorder () {$ (detta). toggleClass ("bordered");}
Klassdemo
- alfa
- beta
- gamma
- delta
Så här gör du det här programmet:
-
Börja med en grundläggande HTML-sida.
Alla intressanta saker händer i CSS och JavaScript, så det faktiska innehållet på sidan är inte så kritiskt.
-
Skapa en klass som du vill lägga till och ta bort.
Du kan bygga en CSS-klass som kallas att det bara drar en gräns runt elementet. Naturligtvis kan du göra en mycket mer sofistikerad CSS-klass med alla slags formatering om du föredrar det.
-
Länk en init () -metod.
Som du börjar se behöver de flesta jQuery-applikationer någon form av initialisering. Du kan ringa den första funktionen. init ()
-
Ring funktionen toggleBorder () när användaren klickar på ett listobjekt.
Metoden init () skapar helt enkelt en händelsehanterare. När en listobjekt får klickhändelsen (det vill säga den klickas) ska funktionen toggleBorder () aktiveras. Funktionen toggleBorder () växlar gränsen.
jQuery har flera metoder för att manipulera klassen av ett element:
-
addClass () tilldelar en klass till elementet.
-
removeClass () tar bort en klassdefinition från ett element.
-
toggleClass () växlar klassen (lägger till den om den inte är ansluten eller tar bort den annars).
-
