Vad är jQuery?

november 24, 2010 § Lämna en kommentar

jQuery är världens mest använda javascript bibliotek. Ett bibliotek som sparar tid åt utvecklare. I den här artikeln kommer jag att gå igenom vad som gör jQuery så kraftfullt.

För att kalla på ett HTML element behöver man bara använda sig av dollartecknet $.

För att kalla på exempelvis <body> så skriver jag $(‘body’).

Man kan också kalla på klasser och ID. Det görs på samma sätt. Vi tänker oss att jag i min html kod har <p class=”newstyle”>. För att kalla på klassen i jQuery så använder jag: $(‘.newstyle’)        <–notera punkten som står för klass

För att kalla på ett ID så gör man på samma sätt. <div id=”greenbg”>. För att kalla på det skriver jag $(‘#greenbg’).

Man kan också göra en så kallad ”action” på varje element man har valt. För att ta ett exempel: $(‘valtElement’).on(click, function(){console.log($this)}). Den functionen returnerar elementet som vi klickade på. I det här fallet är ”.on” en action.

Samlingsnamnet actions består av många olika grupper. En grupp kallas ”traversals”. Här finns en lista över traversals: http://api.jquery.com/category/traversing/ Dessa hjälper oss att hantera element.

En annan grupp kallas ”manipulation”. Den hjälper till att manipulera elementet. Här finns den listan. http://api.jquery.com/category/manipulation/

För att lägga till html text inom body taggar med jQuery. Skriv: $(‘body’).html(‘<p>Brödtext skrivs här</p>’).

Med selectors så väljer vi ut mer precist vilket element vi vill jobba med. Här finns det stöd för CSS3. Här är listan över selectors. http://api.jquery.com/category/selectors/

För att t.ex välja ut första <p> elementet skriver man: $(‘p:first’).
För att skapa en animation så kan vi skriva såhär:
$(‘#knappattklicka’).click(function() {
$(‘#ettannatelement’).animate({
opacity: 0.25,
height: ‘toggle’
}, 5000, function() {
// Animation complete.
});
});
Den animerar elementet genom att sänka opacity till 25%, och sedan använder den ”toggle”. Toggle används för att visa eller dölja element.

Annonser

Var befinner jag mig?

Du bläddrar för närvarande i kategorin jQueryTobiasboman's Blog.

%d bloggare gillar detta: