JavaScript. JavaScript Ramverk (Bibliotek) jquery + jquery UI

Storlek: px

Starta visningen från sidan:

Download "JavaScript. JavaScript Ramverk (Bibliotek) jquery + jquery UI"

Kjell Lundgren
för 8 år sedan
Visningar:

1 JavaScript JavaScript Ramverk (Bibliotek) jquery + jquery UI

2 Allmänt ramverk/bibliotek Importera JavaScript-kod Plattformsoberoende JavaScript Prototype + script.aculo.us jquery + jquery UI

3 Återanvända javascript Jskod.js minkod={ minfunktion:function(parameter1, parameter2) { //kod } } Webbsida.html <script type= text/javascript src= jskod.js ></script> <script> minkod.minfunktion(variabel1, variabel2); </script>

4 jquery jquery innehåller många saker HTML/DOM/CSS manipulation Ändra i HTML och CSS Effekter och animationer Ändra objekt vid händelser Ger en sida en dynamisk funktion

5 jquery Installation <head> <script src="jquery.js"></script> </head <head> <script type="text/javascript" src=" jquery/1.8.3/jquery.min.js"> </script> </head>

6 jquery Syntax $ (selektor).åtgärd () Ett $-tecken definierar jquery En selektor för att välja HTML-element En jquery-åtgärd () som skall utföras på elementen $(this).show() visar det aktuella elementet. $("p").show() visar alla <p> element. $(".test").show() visar alla element med class = "test $("#test").show() visar elementet med id = "test"

7 jquery Syntax <script type="text/javascript"> $(document).ready(function () { // Skriv koden här... }); </script> $(function(){ // Skriv koden här... });

8 Selektorer Väljer och manipulerar HTML-element Hittar element baserat på klass, id, typ, egenskap, attribut och mer Baserat på CSS-selektorer Finns även egna jquery-selektorer Börjar med dollartecken och parenteser: $ () $("p") $(".header")

9 Selektorer <script src="jquery min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); </script> </head> <body> <h1>en H1</h1> <p>en paragraf</p> <h2>en H2</h2> <p>en paragraf</p> <button>göm paragrafer</button> </body>

10 Selektorer $ ("*") Väljer alla element $ (this) Väljer aktuell HTML-element $ ("p.intro") Väljer alla <p> element med class = "intro" $ ("p.first") Väljer det första <p> elementet $ ("ul li: first") Väljer det första <li> elementet av den första <ul> $ ("ul li: first-child") Väljer det första <li> elementet av varje <ul> $ ("[href]") Väljer alla element med href-attribut $ ("a [target = '_blank']") Väljer alla <a> element med ett mål lika med "_blank" $ ( a [target! = '_blank']") Väljer alla <a> element med ett mål som inte är lika med "_blank" $ (":button") Väljer alla <button>-element och alla <Input>-element av typ = button" $ ("tr:even") Väljer alla jämna <tr> element $ ("tr:odd") Väljer alla udda <tr> element

11 Globala funktioner <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.j s"> </script> <script src="my_jquery_functions.js"></script> </head>

12 jquery HTML (DOM) Det finns funktioner i jquery som används för att ändra i HTML Egentligen ändrar man via DOM Get, Set, Add, Remove

13 Händelser CSS händelser Vi såg dem i de förra föreläsningarna $("p").click(); Aktiveras när en p-tagg klickas

14 mouseenter() <script> $(document).ready(function(){ $("#p1").mouseenter(function(){ alert("du står på id=p1!"); }); }); </script> </head> <body> <p id="p1">en paragraf med id=p1</p> </body>

15 mousedown() <script> $(document).ready(function(){ $("#p1").mousedown(function(){ alert("vänster musknapp är nedtryckt över p1"); }); }); </script> </head> <body> <p id="p1">en paragraf med id=p1</p> </body>

16 Effekter Hide Dölj objektet Show Visa objektet Toggle Byt mellan att dölja och visa objektet Animate Ändrar ett objekts CSS-egenskap till ett bestämt värde T.ex. Ändra height från 200px till 300px Det finns många fler

17 Fade fadein() fadeout() fadetoggle() fadeto() $(selector).fadein(fart,callback); "slow", "fast", or millisekunder Callback kan vara en funktion som anropas när fade är färdig

18 Slide slidedown() slideup() slidetoggle() <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slidetoggle("slow"); }); }); </script>

19 animate() animate() Animera valt objekt Ändra t.ex. storlek, textstorlek, etc. Kan ändra flera attribut samtidigt Kan ändra saker i sekvens Först figurstorlek, sen textstorlek, sen genomskinlighet Ändras samtidigt div.animate({height:'300px', width:'200px'}); Ändras i sekvens div.animate(height:'300px'); div.animate(width:'200px');

20 animate() HTML-objekt har statisk position per default För att ändra positionen på objektet måste CSS-positionen vara fixed, relative eller absolute Det går att använda både absoluta och relativa värden 250px +/- 150px Går att ställa hastighet för animeringen fast, slow 600 ms, 200 ms Default: 400 ms Millisekunder Värden, t.ex. 1000

21 jquery User Interface (UI) Finns flera funktioner för grafisk interaktion Draggable, dropable, sortable, osv. Gör att man kan animera färger Bakgrundsfärg, textfärg Ett annat ramverk än jquery Länkas in på samma sätt <script src=" Från den egna hårddisken

22 Animera färg Det går att ändra färger med animate också Bakgrundsfärg, backgroundcolor Textfärg, color jquery UI behövs

23 Funktioner i jquery UI Kan dra objekt draggable() Kan släppa dem i vissa områden dropable() Kan ändra objektens storlek resizable() Kan välja vissa element selectable() Kan sortera element sortable()

24 jquery Bra länkar jquery for Absolute Beginners Video Series: jquery-for-absolute-beginners-video-series/ w3schools.com: jquery.com: jquery UI

Relevanta dokument

jquery Grundkurs 1 Copyright Mahmud Al Hakim

jquery Grundkurs 1 Copyright Mahmud Al Hakim 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)