JAVASCRIPT jQuery

Vad är jQuery?

JQuery är ett bibliotek fullt av färdiga funktioner och effekter som är skapade med javascript. JQuery är ett komplement till javascript. JQuery snabbar upp utvecklingen av webbsidor med javascript. Biblioteket innehåller massor av tillägg som kan utnyttjas vid programmerandet med javascript. Allt som finns i jQuery är webbläsarkompatibelt. Det är relativt enkelt att komma igång och använda hjälpmedlen i jQuery. jQuery, skapades av John Resig 2006.
Vi ska gå igenom några grundläggande detaljer och sen ska det vara möjligt att använda biblioteket.
För att komma åt alla funktioner i jQuery så måste vi länka till biblioteket.
Gå till www.jquery.com . Under "download" så finns flera versioner, komprimerad, okomprimerad, med och utan ajax/effekter.
Vi kör den kompletta och komprimerade jquery-3.1.1.min.js.
Google har också filerna, se nedan.

jQuery filen vi länkar in är liten, strax under 100kB. Vi använder den ihoppackade filen , .min. , som är mycket mindre är den opackade.

Grunder

Grund

<div id="a">Lorem ipsum dolor sit ... .</div>

<button id="b">Dölj/visa texten</button>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>

      $("#b").on('click', function () {
         $("#a").toggle("slow");
      });

</script>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Vi kan se i exempel på internet att $(document).ready omsluter koden. Den koden motsvarar window.load i javascript, händelsen som känner av att sidan är färdigladdad i webbläsaren. I moderna webbläsare känner den av att DOM strukturen är inläst.
Vi hoppar över den men måste då vara noga med att lägga scrpten sist i body-elementet.

Vi får tag på ett eller flera element på sidan med $(<selektor>), i vårt fall id:et a, $("#a"). Vi hade kunnat ha en klass $(".myClass"), eller en tagg $("li"). Vi får ett element eller en lista av element.
Med punktnotation kommer vi åt jquery-funktioner.

Istället för the_div så har vi $the_div och det absolut inget speciellt med det utan det är för att förtydliga att det är en variabel. När vi vill skapa variabler så kan vi använda javascriptvariabler som vanligt. Om man alltid sätter $ framför sina variabelnamn så blandar man inte ihop dom med vanlig text. Det hade lika gärna kunnat stå "var the_div =" .
Däremot är inte $("#a") någon variabel utan det refererar till något på webbsidan.

Det kan vara ett tagg-namn (t ex body) eller ett klassnamn (t ex .redBackground) eller ett id (som här #a). Själva namnet kan skrivas inom citattecken, "#a", eller apostrofer '#a'.

Grundsyntax

När vi kopplar en händelse till en funktion,
$('thingToClick').on('event', function() {...}); ,
använder vi on och anger typ av händelse som första argument och funktionen som andra argument.

I jQuery finns inbyggda effekter som vi kan haka på något element genom punktnotation.
$('thingToAffect').effect();

Klick-händelse och exempel på Toggle, Fade, Slide

<div id="xc">Lorem ipsum ... </div>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<button id="c">Toggle</button><button id="d">Fade</button><button id="e">Slide</button>
<script>

      $("#c").on('click', function () {
         $('#xc').toggle("slow");
      });
      $("#d").on('click', function () {
         $('#xc').fadeOut("slow").fadeIn(4000, "linear").fadeOut("slow");
      });
      $("#e").on('click', function () {
         $('#xc').slideUp(1000).slideDown(1000).slideUp(1000).delay(2000).slideDown(4000);
      });

</script>

Som vi ser så kan man i jQuery bygga på med effekter genom att göra en punkt och fortsätta.
Andra effekter för att dölja och visa delar av sida är hide() och show().

Lägg till element och här text

<div id="fx"></div>
<button id="f">Toggle</button>
<div id="myAppend">
</div>

Vi använder append() för att lägga till något sist inuti ett html-element, det vill säga precis innan sluttaggen. Vill vi lägga till precis efter starttaggen så använder vi prepend().
För att skriva ut kod i en tagg använder vi html(), vilket motsvarar innerHTML i javascript.
Vill vi lägga till något före ett visst element så finns before() och efter ett visst element after().

Hämta och lägg till text

<input name="message" type="text" size="20" value="DemoTEXT"><br>
<button id="g">Append demo 2</button>
<div id="myAppend2"></div>

Ta bort ett "element"

<button class="removeButton">Remove me 1!</button>
<button class="removeButton">Remove me 2!</button>
<button class="removeButton">Remove me 3!</button>
<script>

      // $("button") fungerar också men påverkar alla "buttons" på sidan
      $(".removeButton:first").on('mouseover', function () {
            $(this).css({'background-color':'#ff0000'});
      });
      $(".removeButton:last").on('mouseover', function () {
            $(this).css({'background-color':'rgb(0,255,0)'});
      });
      $(".removeButton").on('click', function () {
         $(this).remove();
      });

</script>

$(".removeButton") skapar en lista med alla element, där alla får en händelse kopplad till funktionen.

Mouseover/Mouseout och Lägg till/Ta bort en css-klass

<button id="h">Remove</button>
<script>

<div id="hoverDiv">Testa att köra över texten med musen!</div>
<script>
   $(document).ready(function() {
      $('#hoverDiv').on('mouseover', function() {
         $(this).addClass('bg-orange');
      });
      $('#hoverDiv').on('mouseout', function(){
         $(this).removeClass('bg-orange');
      });

</script>

Testa att köra över texten med musen!

Det finns en specialhändelse i jQuery, hover, som skrivs enligt följande syntax: $(selector).hover(handlerInOut); som är en förkortad version av $( selector ).on( "mouseenter mouseleave", handlerInOut );
Andra specialare i jQuery är ready och unload.

Fler händelser som on() fungerar med är till exempel keydown, keyup, keypress som kommer från tangentbordet, i formulär har vi submit, select, change.
För element på sidan focus, blur. Webbläsaren t ex resize, error, scroll.

Ändra css-egenskap, ladda in fil på sidan

<div id="ruta1" class="testorange">
===================<br>
Hej svejs!<br>
===================
</div>
<div id="webb" class="testorange">xxx<br>xxx<br>xxx</div>
<div id="more" class="testorange">yyy<br>yyy<br>yyy</div>
<script src="jquery-2.1.1.js"></script>
<script>
$(".testorange").click(function() {
$(this).css("background-color","orange");
});

// ladda varannan sekund
// load() fungerar enbart då filerna ligger på servern
var x=0;
setInterval(function() {
x=x+1;
if (x%2==0) {
$("#webb").load("webbutveckling2/jquery/jquerytest/hej.htm");
$("#more").insertBefore("#ruta1");
}
else {
$("#webb").load("webbutveckling2/jquery/jquerytest/bu.htm");
$("#more").insertAfter("#ruta1");
}
},2000);
</script>

Ta tag och dra cirkeln

<div id="demoDiv1">Ta tag i cirkeln och dra och släpp!</div>
<img id="bild" height="200" border="0" src="bilder/cirkel.svg" alt="bild"/>
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
   $(document).ready(function() {
      $(function() {
         $( "#bild" ).draggable();
      });
   });
</script>

Ta tag i cirkeln och dra! ==>

OBS! Du måste importera ytterliggare ett jQuery-paket för att få "draggable". Se till att det ligger efter det tidigare nämnda paketet.