jquery Grundkurs Copyright Mahmud Al Hakim mahmud@dynamicos.se http://www.webbacademy.se Innehåll Introduktion till JavaScript-bibliotek Vad är jquery? Implementation och Grundsyntax Selectors (väljare) jquery CSS jquery Events jquery Effects Chaining Ajax jquery UI jquery Plugins (tillägg) Copyright 2015 Mahmud Al Hakim www.webbacademy.se 2 jquery Grundkurs 1
JavaScript-bibliotek För att förenkla användning av JavaScript och för att undvika återuppfinnandet av hjulet, har erfarna programmerare skrivit ett antal bibliotek som innehåller funktioner och objekt som man kan återanvända. Copyright 2015 Mahmud Al Hakim www.webbacademy.se 3 Några JavaScript-bibliotek jquery http://jquery.com Modernizr http://modernizr.com Bootstrap http://getbootstrap.com Mootools http://mootools.net Prototype http://prototypejs.org Copyright 2015 Mahmud Al Hakim www.webbacademy.se 4 jquery Grundkurs 2
Lite statistik (2015) Usage of JavaScript libraries for websites Copyright 2015 Mahmud Al Hakim http://w3techs.com/technologies/overview/javascript_library/all www.webbacademy.se 5 Vad är jquery jquery är ett JavaScript-bibliotek. Syftet med jquery är att förenkla och snabba upp webbutvecklingen. Med jquery kan du manipulera HTML, DOM och CSS. Du kan även hantera händelser (events) och skapa animeringar på ett snabbt och effektivt sätt. Version 1 lanserades 2006 av John Resig. OBS! Version 2 är inte kompatibel med IE 6/7/8 Copyright 2015 Mahmud Al Hakim www.webbacademy.se 6 jquery Grundkurs 3
Implementation jquery-biblioteket består av en enda JavaScript-fil som innehåller all funktionalitet. Filen kan inkluderas på en webbsida på två olika sätt: 1. Ladda ner från http://jquery.com/download Spara lokalt och lägg till en script-tagg <script src="jquery-1.11.2.min.js"></script> 2. Använd en CDN (Content Delivery Network) t.ex. från Google <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> </script> Copyright 2015 Mahmud Al Hakim www.webbacademy.se 7 Placering av jquery-kod Du kan placera jquery-kod antingen i huvudet i en script-tagg eller en extern JavaScript-fil (js-fil). <head> <title>jquery</title> <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.2.min.js"> </script> <script> // Skriv jquery här... </script> </head> Copyright 2015 Mahmud Al Hakim www.webbacademy.se 8 jquery Grundkurs 4
jquery Grundsyntax $(selector).action(); $ anropar jquery En väljare för att hitta HTML-element En metod (event/händelse) t.ex. click eller hide Copyright 2015 Mahmud Al Hakim www.webbacademy.se 9 Document Ready För att vara säker på att jquery hittar element och stilmallar på sidan, så bör du först vänta tills hela dokumentet (inkl. CSS) är nerladdad och färdig (ready). Därför placeras jquery-metoder normalt i en speciell metod som heter ready() // Skriv jquery kod här... Copyright 2015 Mahmud Al Hakim www.webbacademy.se 10 jquery Grundkurs 5
En förkortad version av Document Ready Det finns en enklare metod för att kolla om dokumentet är ready. $(function(){ Detta är samma som Copyright 2015 Mahmud Al Hakim www.webbacademy.se 11 jquery Selectors (väljare) Med hjälp av en selector väljs ett eller flera HTML-element. Olika sätt att välja element: 1. Element-väljare (Element Selector) 2. ID-väljare (#id Selector) 3. Klass-väljare (.class Selector) 4. This-väljare (väljer detta element) Copyright 2015 Mahmud Al Hakim www.webbacademy.se 12 jquery Grundkurs 6
Element Selector - Exempel $(document).ready(function() { $("button").click(function() { $("p").hide(); } ); } ); <p>lite text och annat smått och gott</p> <p>lite text och annat smått och gott</p> <button>klicka här</button> Copyright 2015 Mahmud Al Hakim www.webbacademy.se 13 #id Selector - Exempel $(document).ready(function() { $("button").click(function() { $("#ingress").hide(); } ); } ); <p id="ingress">första stycket</p> <p>lite text och annat smått och gott</p> <button>klicka här</button> Copyright 2015 Mahmud Al Hakim www.webbacademy.se 14 jquery Grundkurs 7
.class Selector - Exempel $(document).ready(function() { $("button").click(function() { $(".test").hide(); } ); } ); <p class="test">stycke 1</p> <p>stycke 2</p> <p class="test">stycke 3</p> <button>klicka här</button> Copyright 2015 Mahmud Al Hakim www.webbacademy.se 15 This-väljare - Exempel $(document).ready(function() { $("p").click(function() { $(this).hide(); } ); } ); <p>stycke 1</p> <p>stycke 2</p> <p>stycke 3</p> Copyright 2015 Mahmud Al Hakim www.webbacademy.se 16 jquery Grundkurs 8
Tips! jquery Selector Tester http://www.w3schools.com/jquery/trysel.asp Copyright 2015 Mahmud Al Hakim www.webbacademy.se 17 jquery CSS() Med hjälp av metoden css() du kan hämta eller sätta CSS-egenskaper. Exempel $("p").css("background-color"); Hämtar värdet av CSS-egenskapen background-color för det absolut första stycket (p) som hittas i dokumentet. Copyright 2015 Mahmud Al Hakim www.webbacademy.se 18 jquery Grundkurs 9
jquery CSS() Exempel 1 $("button").click(function(){ alert( $("p").css("background-color") ); <p style="background-color:#ff00ff"> Lite text och annat smått och gott.</p> <button>klicka här</button> Copyright 2015 Mahmud Al Hakim www.webbacademy.se 19 jquery CSS() Exempel 2 $("button").click(function(){ $("p").css("background-color", "yellow"); Sätter värdet yellow på egenskapen background-color på ALLA p-element Copyright 2015 Mahmud Al Hakim www.webbacademy.se 20 jquery Grundkurs 10
jquery CSS() Exempel 3 $("button").click(function(){ $("p").css({"background-color": "yellow ", "font-size": "200%" Ändrar flera CSS-egenskapar css({"egenskap":"värde","egenskap":"värde",... Copyright 2015 Mahmud Al Hakim www.webbacademy.se 21 addclass() och removeclass() <script> $("button").click(function(){ $("div, p").addclass("important"); </script> Metoden addclass() kopplar en CSS-klass till olika element. <style> Testa även removeclass().important { font-weight: bold; } </style> Copyright 2015 Mahmud Al Hakim www.webbacademy.se 22 jquery Grundkurs 11
jquery toggleclass() <script> $("button").click(function(){ $("div").toggleclass("important"); </script> Metoden toggleclass() växlar mellan addclass och removeclass() Copyright 2015 Mahmud Al Hakim www.webbacademy.se 23 Händelser (Events) jquery är skräddarsytt för att reagerar på händelser som uppstår i HTMLdokument. Alla händelser som görs på sidan kallas events t.ex. klicka, välja, peka, m.m. Copyright 2015 Mahmud Al Hakim www.webbacademy.se 24 jquery Grundkurs 12
jquery Events Mouse Events Keyboard Events Form Events Document/ Window Events click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload Copyright 2015 Mahmud Al Hakim www.webbacademy.se 25 jquery Events mouseenter och mouseleave $("p").mouseenter(function () { $(this).css("background-color", "#FF0") ); $("p").mouseleave(function () { $(this).css("background-color", "#FFF") ); Copyright 2015 Mahmud Al Hakim www.webbacademy.se 26 jquery Grundkurs 13
jquery Events focus och blur $("input").focus(function(){ $(this).css("background-color", "gold"); $("input").blur(function(){ $(this).css("background-color", "white"); Namn: <input type="text" name="namn"> <br> E-post: <input type="text" name="epost"> Copyright 2015 Mahmud Al Hakim www.webbacademy.se 27 jquery DOM Manipulation En av de viktigaste delarna med jquery är möjligheten att manipulera DOM (Document Object Model). Några användbara metoder text() Hämtar eller sätter text (innehåll). html() Hämtar eller sätter text och HTML. attr() Hämtar eller sätter attribut. val() Hämtar eller sätter värdet (value) från textfält. Copyright 2015 Mahmud Al Hakim www.webbacademy.se 28 jquery Grundkurs 14
jquery text() Exempel 1 <script> $("#knapp").click(function(){ alert("text: " + $("#test").text()); </script> <p id="test"> Lite <b>fet</b> text och annat smått och gott.</p> <button id="knapp">visa Text</button> Copyright 2015 Mahmud Al Hakim www.webbacademy.se 29 jquery text() Exempel 2 <script> $("#knapp").click(function(){ $("#test").text("lite text.") </script> <p id="test"></p> <button id="knapp">ändra Text</button> Copyright 2015 Mahmud Al Hakim www.webbacademy.se 30 jquery Grundkurs 15
jquery html() Exempel 1 <script> $("#knapp").click(function(){ alert("html: " + $("#test").html()); </script> <p id="test"> Lite <b>fet</b> text och annat smått och gott.</p> <button id="knapp">visa HTML</button> Copyright 2015 Mahmud Al Hakim www.webbacademy.se 31 jquery html() Exempel 2 <script> $("#knapp").click(function(){ $("#test").html("lite <b>fet</b> text.") </script> <p id="test"></p> <button id="knapp">ändra Text</button> Copyright 2015 Mahmud Al Hakim www.webbacademy.se 32 jquery Grundkurs 16
jquery attr() Exempel 1 <script> $("#knapp").click(function(){ alert("url: " + $("#test").attr("href")); </script> <a id="test" href="http://webbacademy.se"> Webbacademy</a> <br> <button id="knapp">visa URL</button> Copyright 2015 Mahmud Al Hakim www.webbacademy.se 33 jquery attr() Exempel 2 <script> $("#knapp").click(function(){ $("#test").attr("href", "Ny URL") </script> <a id="test" href="http://webbacademy.se"> Webbacademy</a> <br> <button id="knapp">ändra URL</button> Copyright 2015 Mahmud Al Hakim www.webbacademy.se 34 jquery Grundkurs 17
jquery val() Exempel 1 <script> $("#knapp").click(function(){ alert("value: " + $("#test").val()); </script> <p>namn: <input type="text" id="test" value="mahmud Al Hakim"></p> <button id="knapp">visa value</button> Copyright 2015 Mahmud Al Hakim www.webbacademy.se 35 jquery val() Exempel 2 <script> $("#knapp").click(function(){ $("#test").val("mahmud") </script> <p>förnamn: <input type="text" id="test" value=""></p> <button id="knapp">sätt value</button> Copyright 2015 Mahmud Al Hakim www.webbacademy.se 36 jquery Grundkurs 18
Lägga till innehåll append() Infogar innehåll i slutet av valda element. prepend() Infogar innehåll i början av valda element. after() Lägger till innehåll efter valda element. before() Lägger till innehåll före valda element. Copyright 2015 Mahmud Al Hakim www.webbacademy.se 37 append() - Exempel $("#knapp").click(function(){ $("ol").append("<li>ny Punkt</li>") <ol> <li>punkt</li> <li>punkt</li> </ol> <button id="knapp">lägg till en punkt</button> Copyright 2015 Mahmud Al Hakim www.webbacademy.se 38 jquery Grundkurs 19
prepend() - Exempel $("#knapp").click(function(){ $("ol").prepend("<li>ny Punkt</li>") <ol> <li>punkt</li> <li>punkt</li> </ol> <button id="knapp">lägg till en punkt</button> Copyright 2015 Mahmud Al Hakim www.webbacademy.se 39 before() och after() $("#knapp1").click(function(){ $("ol").after("<li>ny Text</li>") $("#knapp2").click(function(){ $("ol").before("<li>ny Text</li>") <button id="knapp1">lägg till före</button> <button id="knapp2">lägg till efter</button> Copyright 2015 Mahmud Al Hakim www.webbacademy.se 40 jquery Grundkurs 20
Ta bort innehåll empty() Tömmer valda element (tar bort innehåll och alla barnelement) remove() Tar bort valda element från DOM. Tips! Jämför med hide() som enbart sätter CSS-egenskapen display till none. Copyright 2015 Mahmud Al Hakim www.webbacademy.se 41 remove() och empty() $("#div1").click(function(){ $(this).remove() $("#div2").click(function(){ $(this).empty() div{ background-color: #b6ff00; height:100px; width:100px; margin:10px; } <div id="div1">box 1</div> <div id="div2">box 2</div> <div id="div3">box 3</div> Copyright 2015 Mahmud Al Hakim www.webbacademy.se 42 jquery Grundkurs 21
jquery Effects Visa/dölj $("#dolj").click(function(){ $("p").hide(1000) $("#visa").click(function(){ $("p").show(1000) Hastighet anges i millisekunder <p>lite text och annat smått och gott.</p> <button id="dolj">dölj</button> <button id="visa">visa</button> Copyright 2015 Mahmud Al Hakim www.webbacademy.se 43 jquery Effects toggle() Växla mellan hide() och show() $("#visa").click(function(){ $("p").toggle(1000); <p>lite text och annat smått och gott.</p> <button id="visa">visa/dölj</button> Copyright 2015 Mahmud Al Hakim www.webbacademy.se 44 jquery Grundkurs 22
jquery Effects Fading (toning) Del 1 $("#fade").click(function(){ $("#div1").fadeout(5000); div{ background-color: #b6ff00; height:100px; width:100px; margin:10px; } <div id="div1">box 1</div> <button id="fade">dölj</button> Copyright 2015 Mahmud Al Hakim www.webbacademy.se 45 jquery Effects Fading (toning) Del 2 $("#fade").click(function(){ $("#div1").fadein(5000); div{ background-color: #b6ff00; height:100px; width:100px; margin:10px; display:none; } <div id="div1">box 1</div> <button id="fade">visa</button> Copyright 2015 Mahmud Al Hakim www.webbacademy.se 46 jquery Grundkurs 23
jquery Effects Fading (toning) Del 3 $("#fade").click(function(){ $("#div1").fadetoggle(5000); div{ background-color: #b6ff00; height:100px; width:100px; margin:10px; } <div id="div1">box 1</div> <button id="fade">visa/dölj</button> Copyright 2015 Mahmud Al Hakim www.webbacademy.se 47 jquery Effects Fading (toning) Del 4 $("#fade").click(function(){ $("#div1").fadeto(500,0.5); div{ background-color: #b6ff00; height:100px; width:100px; margin:10px; } <div id="div1">box 1</div> <button id="fade">tona ner</button> Copyright 2015 Mahmud Al Hakim www.webbacademy.se 48 jquery Grundkurs 24
jquery Effects Sliding (glida) $("#glid").click(function(){ $("#panel").slidetoggle("slow"); #glid, #panel { padding: 5px; text-align: center; background-color: #e5eecc; border: solid 1px #c3c3c3; } #panel { padding: 50px; display: none; } <div id="glid">klicka här för mer info</div> <div id="panel">här kommer mer info...</div> Copyright 2015 Mahmud Al Hakim www.webbacademy.se 49 jquery Chaining (Kedja) Med jquery, kan du kedja ihop flera metoder i en och samma sats. Exempel: Kör slideup och slidedown på samma element (i samma sats). $(document).ready(function () { $("#knapp").click(function () { $("#p1").slideup(2000).slidedown(2000); Copyright 2015 Mahmud Al Hakim www.webbacademy.se 50 jquery Grundkurs 25
Ajax Asynchronous JavaScript and XML Ajax är inte ett programmeringsspråk. Ajax är ett samlingsnamn för flera olika tekniker som kan användas för att bygga webbapplikationer med bättre interaktivitet. Huvudidén med Ajax är att hämta data från servern utan att behöva ladda om webbapplikationen. Exempel på webbtjänster som använder Ajax är Gmail, Google Maps och Facebook. Copyright 2015 Mahmud Al Hakim www.webbacademy.se 51 jquery - AJAX jquery har ett API (Application Programmers Interface) för Ajax. jquery har ett antal enkla och kraftfulla Ajaxfunktioner (metoder) som du kan få en översikt av på http://api.jquery.com/category/ajax/ Copyright 2015 Mahmud Al Hakim www.webbacademy.se 52 jquery Grundkurs 26
Ajax load() En av viktigaste jquery Ajax-metoder är load() load() laddar data (från t.ex. en textfil eller HTML-fil) från servern och sätter de returnerade data i det valda elementet. Copyright 2015 Mahmud Al Hakim www.webbacademy.se 53 Ajax load() Exempel 1 $(document).ready(function() { $("#knapp").click(function() { $("#div1").load("test.txt"); Filen test.txt <h1>exempel</h1> <p>lite text och annat smått och gott.</p> <button id="knapp"> Hämta data från en extfil </button> <div id="div1"></div> Copyright 2015 Mahmud Al Hakim www.webbacademy.se 54 jquery Grundkurs 27
Ajax load() Exempel 2 $("#meny").load("meny.html"); Filen meny.html <a href="index.html">hem</a> <a href="om.html">om oss</a> <a href="kontakt.html">kontakt</a> <div id="meny"></div> <h1>start</h1> Copyright 2015 Mahmud Al Hakim www.webbacademy.se 55 jquery UI jquery UI är ett systerprojekt till jquery som innehåller ett antal UI-objekt (UI = User interface). Några vanliga användargränssnittskomponenter (Widgets) är: Tabs Accordion Datepicker Dialog Titta på exempel här: http://jqueryui.com/demos/ Copyright 2015 Mahmud Al Hakim www.webbacademy.se 56 jquery Grundkurs 28
jquery plugins Det finns hundratals tillägg till jquery på http://plugins.jquery.com/ Här hittar du bl.a. fina bildgallerier och animeringar. Testa gärna dessa tillägg: Lightbox http://lokeshdhakar.com/projects/lightbox2 Magnific Popup http://dimsemenov.com/plugins/magnific-popup Fancy Form http://fancyjs.com Copyright 2015 Mahmud Al Hakim www.webbacademy.se 57 jquery Grundkurs 29