Förra veckan pratade jag om hur viktigt jQuery är för alla moderna webbutvecklare och varför det är fantastiskt. Den här veckan tror jag att det är dags att vi får smutsiga händer med lite kod och lärde oss hur vi faktiskt kan använda jQuery i våra projekt.

Jag säger detta nu - du behöver inte lära dig Javascript för att kunna använda jQuery. Det är nog bäst om du tänker på jQuery som en utveckling av Javascript - ett bättre sätt att göra det - än bara ett bibliotek som lägger till funktionalitet. Alla Javascript du behöver kommer att hämtas på vägen. Det antas dock att du som webbutvecklare har ganska goda kunskaper i HTML och CSS (och här är en gratis xHTML -guide om inte!).

Dokumentobjektmodell

jQuery handlar om traversal och manipulation av DOM - den D dokument ELLER bject M odel. DOM är en hierarkisk trädrepresentation av sidan, byggd av webbläsare efter att ha läst in all HTML -kod. I jQuery använder vi terminologi som förälder , barn , och syskon ganska ofta, så du borde ha en uppfattning om vad detta betyder i förhållande till DOM.

Detta enkla diagram frånw3skolorförklarar begreppen ganska bra. Du bör kunna se att föräldern till elementet är, medan element har en omedelbar

jQuery code codes here`

$ ('väljare').metod();

Det är det, i titeln där uppe. Det är grundstrukturen för en enda bit jQuery -kod för att manipulera DOM. Lätt, eller hur?

Deväljaresäger till jQuery att hitta saker som matchar denna regel, och är detsamma som CSS -väljare (och sedan lite mer ovanpå). Så precis som i CSS skulle du styla alla länkar med

a { }

Detsamma skulle göras i jQuery som

$('a')

Detta kan göras för alla HTML -element - div, h1, span - vad som helst. Du kan också använda CSS -klasser och ID för att vara mer specifik.

Till exempel, för att hitta alla länkar med klassen 'findme', skulle du använda:

$('a.findme')

Du behöver inte ange typ av element varje gång - men om du gör det gör det regeln mer specifik. Du kunde bara ha sagt

$('.findme')

som skulle matcha allt med klassen hitta mig , oavsett om det var en länk eller inte.

Om du vill använda ett namngivet ID -element använder du # teckna istället. Den viktigaste skillnaden här är att en ID -väljare bara någonsin kommer att välja ett objekt, medan en klassväljare kan hitta mer än ett.

när någon blockerar dig på snapchat

$('#something')

I grund och botten om du kan göra i CSS så gör jQuery det också. I själva verket kan du också några ganska komplexa pseudoväljare i CSS3 -stil som: först

$('body p:first')

Vilket skulle ta tag i sidens stycke. Du hittar också element med vissa attribut. Tänk på detta exempel; vi vill hitta alla länkar på sidan som pekar internt på använda och markera dem på något sätt. Så här kan vi hitta dem:

$('a[href*='makeuseof']')

Är det inte coolt? Jag tror att det är det.

Din nästa anlöpshamn bör vara jQuery API -dokumentation för väljare . Det är en enorm lista över alla olika sorters väljare som finns att använda, och ingen skulle förvänta sig att du lär dig dem alla.

Nästa del av ekvationen ärmetod- vad ska jag göra med dessa saker när du har hittat dem alla - men vi lämnar det till nästa lektion. Om du vill komma igång med att testa olika väljare nu föreslår jag att du håller dig till följande css -metod. Detta kräver två parametrar - en CSS egendomsnamn , och en ny värde att tilldela den egendomen. Så, för att ge alla länkar en röd bakgrundsfärg, skulle du göra:

$('a').css('background-color','red');

Enkelt nog! Även om detta kanske inte är praktiskt användbart kan du enkelt se alla element som finns med dina väljare. Gå nu fram och välj - DOM väntar på dig.

Jag hoppas att denna handledning har varit användbar för dig; Jag har försökt att göra det så enkelt som lätt att förstå som möjligt. Ställ gärna dina frågor eller lämna feedback, men var medveten om att jag verkligen inte är någon elit jQuery ninja.

Dela med sig Dela med sig Tweet E-post 5 tips för att ladda dina VirtualBox Linux -maskiner

Trött på den dåliga prestanda som erbjuds av virtuella maskiner? Här är vad du bör göra för att öka din VirtualBox -prestanda.

Läs Nästa Relaterade ämnen

Webbkultur
Webbutveckling
JavaScript
Programmering
jQuery

Om författaren James Bruce(707 artiklar publicerade)

James har en BSc i artificiell intelligens och är CompTIA A+ och Network+ -certifierad. När han inte är upptagen som Hardware Reviews Editor, gillar han LEGO, VR och brädspel. Innan han började på MakeUseOf var han belysningstekniker, engelsklärare och datacenteringenjör.

Mer från James Bruce

Prenumerera på vårt nyhetsbrev

Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e -böcker och exklusiva erbjudanden!

Klicka här för att prenumerera