JavaScript JavaScript Ramverk (Bibliotek) jquery + jquery UI
Allmänt ramverk/bibliotek Importera JavaScript-kod Plattformsoberoende JavaScript Prototype + script.aculo.us jquery + jquery UI
Å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>
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
jquery Installation <head> <script src="jquery.js"></script> </head <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/ jquery/1.8.3/jquery.min.js"> </script> </head>
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"
jquery Syntax <script type="text/javascript"> $(document).ready(function () { // Skriv koden här... }); </script> $(function(){ // Skriv koden här... });
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")
Selektorer <script src="jquery-1.8.3.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>
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
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>
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
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
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>
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>
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 http://www.w3schools.com/jquery/jquery_ref_effects.asp
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
Slide slidedown() slideup() slidetoggle() <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slidetoggle("slow"); }); }); </script>
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');
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
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="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> Från den egna hårddisken
Animera färg Det går att ändra färger med animate också Bakgrundsfärg, backgroundcolor Textfärg, color jquery UI behövs
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()
jquery Bra länkar jquery for Absolute Beginners Video Series: http://blog.themeforest.net/screencasts/ jquery-for-absolute-beginners-video-series/ w3schools.com: http://www.w3schools.com/jquery/default.asp jquery.com: http://docs.jquery.com/tutorials jquery UI http://jqueryui.com/