jQuery - undervisning ... til mig selv!

Her vil jeg begynde min "rejse" ind i jQuery

Min erfaring som frontend koder er desvære mangelfuld når det kommer til jQuery. Ofte benytter jeg snippets, som andre har lavet og gennemtestet, uden helt selv at forstå hvordan de virker. Det er stort set sådan alle gør, men nu skal det være slut med blot at copy & paste - nu skal jeg til at lærer lidt :-)

.attr

Her tilføjes target="_blank" på alle udgående link ... link med http

$("a[href^='http']").attr("target","_blank");

.before og .after

before og after indsætter HTML før og efter et andet HTML element. Modsat prepend og append der indsætter HTML/tekst inde i et eksisterende HTML element.

$(document).ready(function() {
 
  $("p").before("<h1>Sætningen indsættes før sætningen fra HTML dokumentet</h1>");
 
  $("p").after("<p class='red'>Sætningen indsættes efter sætningen fra HTML dolumentet</p>");
 
});

Man kan benytte before og after til at flytte HTML elementer. Her er de to overskrifter flytte ud af boksen (class = box)

$(document).ready(function() {

$(".box").before($("h1"));
$(".box").after($("h2").addClass("red"));
                 
});

.click

click function - nok en af de mest simple og brugbare funktioner. Klik på et HTML element og udfør en handling.

Her et eksempel hvor der benyttes toggleClass, til at tilføje eller fjerne en class (.red) på HTML elementet. Da class tilføjes samme element, som det der klikes på, benyttes $(this)

$(document).ready(function(){
 
  $("p").click(function(){
    $(this).toggleClass("red");
  });
 
});

.css

Med CSS kan man tilføje HTML elementer en CSS værdi.

Med nth(0) vælgers den første <p>...</p>. Selve CSS strengen skrives som "egenskaben","værdi".
Skrivemåden er dog en lidt anden, hvis der skal angives flere CSS-egenskaber. Her pakkes CSS-egenskaberne og værdierne ind i {....} og nu med : (kolon) mellem egenskab og værdi, helt som man ville gøre, når man skriver CSS. Hver CSS egenskab/værdi-sæt adskilles af , (komma).

$(document).ready(function() {
 
  $(&quot;p:nth(0)&quot;).css(&quot;color&quot;,&quot;blue&quot;);
 
  $(&quot;p:nth(1)&quot;).css({&quot;color&quot;:&quot;red&quot;,&quot;font-weight&quot;:&quot;bold&quot;});
 
});
Check out this Pen!

Læg her mærke til forskellen på, hvordan man angiver en eller flere værdier!

$("XX").css("color","blue");

Ved angivelse af flere værdier, gør vi det til et object ved at hjælp af {...}

 
  $("XX)").css({
    "color":"red",
    "font-weight":"bold"
  });

.prepend og .append

prepend og append benyttes til at indsætte tekst eller HTML først og sidst i et HTML element.
I CSS har man samme mulighed med :before og :after

$(document).ready(function() {
  
$(&quot;.for&quot;).prepend(&quot;Vises før elementet - &quot;);
$(&quot;.efter&quot;).append(&quot;- Vises efter elementet&quot;);  
  
});

Lad os benytte prepend og append til at indsætte HTML elementer i koden.

$(document).ready(function() { 
  
$(&quot;ul&quot;).prepend(&quot;&lt;li&gt;Nyt liste-punkt indsat med jQuery først i listen&lt;/li&gt;&quot;);
$(&quot;ul&quot;).append(&quot;&lt;li class='red'&gt;Nyt liste-punkt indsat med jQuery til sidst i listen&lt;/li&gt;&quot;);
  
$(&quot;div&quot;).prepend(&quot;&lt;h1&gt;Her er en overskrift indsat med jQuery&lt;/h1&gt;&quot;);
$(&quot;div&quot;).append(&quot;&lt;p&gt;&lt;em&gt;Her er en linje i kursiv indsat med jQuery.&lt;/em&gt;&lt;/p&gt;&quot;);

});

NB!
Læg mærke til at der ved indsættelse af class='red' i liste-punktet IKKE benyttes "..." men derimod ' ...'

appendTo

En variant til append er appendTo. Igen gælder det om, at tilføje indhold til et HTML element. appendTo har en lidt anden struktur end append. Her beskriver man først hvad man vil tilføje og bagefter hvor det skal tilføjes til. $("<p>En sætning der tilføjes</p>").appendTo('.min-div');

.text

Ændre tekst i HTML strukturen ved hjælpe af .text

$(".mindiv").text("Denne tekst overskriver teksten i class mindiv");

.toggle og fadeToggle

toggle og fadeToggle benyttes til skiftevis at skjule og vise HTML elementer.
Her benyttes .click(function() for at vise effekten.

$(document).ready(function(){
 
  $(&quot;.klik&quot;).click(function() {
   
    $(&quot;.box&quot;).toggle(&quot;slow&quot;, function() {
    });
    $(&quot;.box2&quot;).fadeToggle( 3000, function() {
    });
   
   });
 
});

.val

Skal teksten af en value ændres i eksempelvis en input, kan dette gøres med .val

Læg mærke til at der kun "rammes" input med typen = submit

$(&quot;input[type=submit]&quot;).val(&quot;Tekst i knap indsat med jQuery&quot;);Check out this Pen!

Her benyttes .val til at slette de indtastede værdier i en formular.

$(&quot;p.knap&quot;).click(function () {
  $(&quot;input&quot;).val(&quot;&quot;);
});
Check out this Pen!

.wrapInner

See the Pen yFovE by Morten Andersen (@MortenAndersen) on CodePen