Introduktion till

Webbutveckling 2

Syfte

  • Testa på att använda ett Javascriptbibliotek
  • Få en överblick vad jQuery är och hur man kodar det
  • Kunna känna igen jQuery när man letar efter exempel  att använda på sin webbplats, finns mycket på nätet!
  • Vi ska inte lära oss jQuery fullt ut, bara nosa på det!

Vad är jQuery?

Ett Javascriptbibliotek som förenklar DOM-manipulation, event, animeringar och AJAX (ladda in information utan att sidan behöver laddas om)

Varför jQuery?

  • Smidigt och enkelt
  • Bra community
  • Löste många problem med skillnader i webbläsare (inte aktuellt idag)

Hur använder man  jQuery?

Alternativ 1: Ladda ner från http://jquery.com och                                               sedan länka i <script src=""> före din .js fil

Alternativ 2: Hämta CDN (finns på http://jquery.com) och                                   sedan länka i <script src=""> före din .js fil

Alternativ 3:  npm install jquery

https://jquery.com/

Syntax

Syntaxen för ett statement är (i de flesta fall) uppdelad i två delar:

Selector (hitta elementet/elementen) + Metod (gör något  med selektorn)

Alla jQuery-statements börjar med

$

$(".testDiv").addClass("testClass");

jQuery symbol

Vad är skillnaden?

Vanilla Javascript

const test = document.querySelector(".testDiv");

test.classList.add("testClass")

 
$(".testDiv").addClass("testClass");

jQuery

Exempelvis DOM-manipulering -  lägga till en klass på ett element

Events

Vanilla Javascript

const button = document.querySelector("button");
const statusDiv = document.querySelector(".status");

button.addEventListener("click", function() {
  
statusDiv.innerHTML = "<p>Clicked!</p>";

});

 
$("button").on("click", function() {

$(".status").html("<p>Cliked!</p>");

});

jQuery

Effekter

jQuery har färdiga och lättanvända funktioner för att animera element, sådant som vi kan göra med CSS transition.

  • hide/show
  • fade in/out/toggle
  • slide up/down/toggle
  • animate (mer avancerade animeringar)

jQuery Effects på W3schools

DOM manipulering - innehåll

// Ändra html i element .testDiv
$(".testDiv").html("<p>Ny paragraf</p>");
// Ändra text i element .testDiv
$(".testDiv").text("Ändra med bara text");

// Hämtar text i element .testDiv
const text = $(".testDiv").text();
// Hämtar värde i input-ruta
const inputValue = $("input").val();

jQuery har tre metoder för att hantera innehåll: text, html och val

(motsvarande vanilla JS textContent, innerHTML och value)

Lägga till element

  • append - lägga till HTML sist i ett element
  • prepend - lägga till HTML först i ett element
  • after - lägga till HTML efter ett element
  • before - lägga till HTML före ett element
$('body').append('<footer> Sidfot sist inuti body </footer>');

$('#saveBtn').after('<button>Undo save</button>');

Ändra i CSS

Vi kan manipulera ett elements CSS

$("p").css("background-color", "yellow");

(istället för att lägga till/ta bort en klass som egentligen är en bättre metod)

Ändra attribbut

Vi kan ändra ett elements attribut

 $("img").attr("width","500");

Vill du veta mer?

https://www.w3schools.com/jquery

http://youmightnotneedjquery.com/

Made with Slides.com