Jquery er et javascript bibliotek – eller omskrivning af javascript som kan genkende html/css og gør det meget lettere at arbejde med.
For at afvikle jquery skal man indlæse biblioteket i browseren – det kan gøres ved at linke til biblioteket i head – sektionen af sit html dokument :
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!--link til javascript biblioteket: Jquery--> <script> //første line igangsætter javascript/jquery når det er indlæst jQuery(function($){ //første funktion hide på id box farvel skjuler nav.responsive $("#skjul").click(function(){ $("nav.responsive").hide(); }); // den anden funktion show - p-tagget $("#vis").click(function(){ $("nav.responsive").show(); }); //og afslutning }); </script> <style type="text/css"> #vis {width: 30px; height:30px; background-color: green;} #skjul {width: 30px; height:30px; background-color: red; } </style> </head> |
Øvelse 1: Indsæt henholdsvis div id=”vis” og div id=”skjul” samt menuen nav.responsive i html-filens body-sektion og lav en uordnet liste som du styler så den kan fungere på en smartphone.