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.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
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
<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>
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.
$("#a") refererar till något på webbsidan.
Grundsyntax
<script>
$('thingToClick').on('event', function() {
$('thingToAffect').effect();
});
</script>
$('thingToClick').on('event', function() {...}); ,
använder vi on och anger typ av händelse som första argument och funktionen som andra argument.
$('thingToAffect').effect();
Klick-händelse och exempel på Toggle, Fade, Slide
<button id="c">Toggle</button><button id="d">Fade</button><button id="e">Slide</button>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<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().
Mouseover/Mouseout och Lägg till/Ta bort en css-klass
<div class="hoverDiv">Testa att köra över texten med musen!</div> <br>
<div class="hoverDiv">En annan divruta att köra musen över!</div>
<script>
$('.hoverDiv').on('mouseover', function() {
$(this).addClass('bg-orange');
});
$('.hoverDiv').on('mouseout', function(){
$(this).removeClass('bg-orange');
});
</script>
Här använder vi en klass för att komma åt fler element på sidan. Det reserverade ordet this i jquery syftar på det aktuella elementet som orsakat händelsen.
3e parts skapare
PrettyPhoto
Källor
http://www.w3schools.com/jquery