philipdev.se

Guest

Learning | jQuery

.show() & .hide(): Visa/göm element $each: Loopa igenom en array

Vad är jQuery?

jQuery är ett JavaScript bibliotek designat att förenkla manipuleringen av HTML-DOM-tree. Det hanterar även "event handling", CSS animationer och Ajax. Läs mer.

Hur använder man jQuery?

Att få jQuery att funka i ditt HTML dokument är väldigt enkelt.

Absolut enklast är att klistra in senaste versionen av Google's CDN i din <head>, ex:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Detta är såklart inte det enda sättet, man kan även ladda ner jquery som en js fil och länka det på samma sätt.

Exempel

En stor anledning till att använda jQuery är att det vara lättare och koden ska bli kortare och lätt att läsa.

Exempel: Att visa/gömma element.

I "vanilla" JavaScript hade det sett ut såhär: 

function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
button.onclick = function(){myFunction};  //setting the function for this eventlistener

Med jQuery kan man göra detta för samma effekt: 

$("button").click(function(){
  $('#myDIV').toggle();
});

  • $

    Så, skillnaden, kodvis, är speciellt ett tecken som inte dyker upp i "vanilla" JS: $ (dollartecknet). $ betyder egentligen "jQuery", så i exemplet hade man kunnat skriva jQuery('#myDIV').toggle();.

  • ('button') & ('#myDIV')

    Här VÄLJER vi vilket/vilka element vi vill göra saker med. Man kan välja genom id $('#id'), class $('.classname'), taggnamn $('p') och andra attribut såsom href $('[href]').

  • .click()

    Här väljer vi VAD(vilket event) som ska "avfyra" en funktion/action.

  • .toggle()

    Detta är en ACTION. JQuery har massvis med liknande ACTION funktioner.

Exempel: $each(array, function (index, item) {})
var array = ["äpple", "päron", "vindruvor"]

Om du vill loopa igenom en lista av vad som helst så finns det ett par olika sätt att göra det på. Men när man har jQuery så är det lika lätt som $each.

  • $each

    Här säger du att du vill använda $each funktionen.

  • array

    Denna variabeln ska vara den listan (arrayen) som du vill loopa igenom.

  • function (index, item)

    I funktionen som skapas i $each så skickas 2 attribut vidare. Vi kan kalla de vad som helst (function "(apa, banan)" hade funkat lika bra) men för att förklara på ett så bra sätt som möjligt så är index och item nog bäst.

    "index" är vilken position vi är på i listan. Alltså är det 1:a positionen, 2:a, 3:e, etc. Så om man skriver
    $each(array, function (index, item) {console.log(index);})
    så får man output:
    1
    2
    3

    "item" är vad som listan innehåller, så om man gör såhär:
    $each(array, function (index, item) {console.log(index);})
    så får man output:
    "äpple"
    "päron"
    "vindruvor"

Mer från jQuery!

Det finns väääldigt många funktioner i jQuery som är väldigt användbara. Så mitt tips är att du testar det jag visat här för att komma igång. Sen när du ska göra fler grejer så googlar du bara det du vill veta, "jquery hover" eller "jquery add element".
Jag rekommenderar att välja länkar som går till w3schools.com, stackoverflow.com och sist api.jquery.com

philipdev.se
Learning | jQuery