Web Programming Language Chapter 9
Introducing JQuery Handling Events with Jquery Jquery Effects
JQuery A JavaScript library Makes JavaScript easier! Traversing and Manipulating the DOM Handling Events & Animations Managing AJAX
Download the Library OR What is the difference? <head> <script src="js/jquery-3.1.0.min.js"></script> </head> OR <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> </head> What is the difference?
Hosted by Google? Download time reduced – the closest copy from the CDN is delivered Less workload for your server May already have a copy cached Increased latency through concurrent downloads from different servers
Basic JQuery Syntax $(selector).action() What is $ for?
Basic JQuery $(“p”).hide(); $(“.test”).hide(); $(“#test2”).hide(); $(this).hide(); .hide() is the same as setting the css property “display:none” You could also use .show()
Is the document ready? Generally place JQuery code within a document ready function, to make sure all page elements are loaded before the functions are defined. $(document).ready(function() { console.log(“Loaded”) });
Sample Selectors $(document).ready(function() { $(“*”) //Selects ALL elements on the page $(“p.intro”) //Selects paragraph elements with the ‘intro’ class $(“p:first”) //Selects the first paragraph element $(“ul li:first”) //Selects the first list item (li) in an unordered list (ul) $(“[href]”) //Selects elements that have a href attribute $(“a[target=‘_blank’]”) //Selects links where the target attribute is _blank $(“a[target!=‘_blank’]”) //Selects links where the target attribute is NOT _blank $(“tr:even”) //Selects even rows in a table $(“tr:odd”) //Selects odd rows in a table });
Events! Mouse Events click When the user clicks on the element dblclick When the user double clicks on the element mouseenter When the user moves the mouse over the element mouseleave When the user moves the mouse away from the element Keyboard Events keydown When the user presses down a key on the keyboard keyup When the user releases a key on the keyboard keypress When the user types a key Form Events submit When a form is submitted change When the value of an input is changed focus When a form input element becomes active blur When a form element stops being active Browser Events load When the page finishes loading resize When the page is resized scroll When the page is scrolled unload When the page is closed
Mouse Events – click() <html><head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); </script> </head><body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Click me</button> <br> </body></html>
Mouse Events – dblclick() <script> $(document).ready(function(){ $("button").dblclick(function(){ $("#test").hide(); }); }); </script>
Mouse Events - mouseenter <script> $(document).ready(function(){ $("#myelement").mouseenter(function(){ $("p.test").hide(); }); }); </script>
Mouse Events - mouseleave <script> $(document).ready(function(){ $("#p1").mouseleave(function(){ alert("Bye! You have now left p1!"); }); }); </script>
Keyboard Events <script> $(document).ready(function() { $("#input").keydown(function() { $("#display").hide() }); $("#input").keyup(function() { $("#display").show() }); }); </script>
Keyboard Events <script> $(document).ready(function() { $("#input").keypress(function(event) { if(event.which==13) { alert("You pressed enter!"); event.preventDefault(); } }); }); </script>
Form Validation Revisited! <script> $(document).ready(function() { $("#input").submit(function(event) { alert(“Form Being Validated!”); validate(); event.preventDefault(); }); }); </script> How is this better than; onsubmit="return validate()"
JQuery Effects Extending the “hide()” function we get; $(selector).hide(speed, callback); Speed could be “fast”, “slow” or a number of milliseconds A callback function is called after the animation completes. We could use .toggle() to change between hide() and show()
Opacity Page elements have different “opacity”, between 0 and 1, where 0 is completely see through, and 1 is completely solid. <html><head> <style> span { height: 100px; width: 100px; background: #000; float:left; } span.opacity100 { opacity: 1; } span.opacity70 { opacity: 0.7; } span.opacity40 { opacity: 0.4; } span.opacity10 { opacity: 0.1; } </style> </head><body> <span class="opacity100">opacity: 1</span> <span class="opacity70">opacity: 0.7</span> <span class="opacity40">opacity: 0.4</span> <span class="opacity10">opacity: 0.1</span> </body> </html>
Fade Events Fade events can adjust the opacity of an element Fade Effects fadeIn() Gradually changes opacity until the element is completely transparent fadeOut() Gradually changes opacity until the element is completely opaque fadeToggle() Switches between opaque and transparent fadeTo() Changes opacity to a specified level
Fade Events <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeOut(“fast”); $("#div2").fadeIn("slow"); $("#div3").fadeToggle(3000); }); }); </script>
fadeTo <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeTo("slow",0.15); $("#div2").fadeTo("slow",0.4); }); }); </script>
Slide Events Slide Effects slideDown() Slides an element down, by increasing its height slideUp() Slides an element up, by decreasing its height slideToggle() Switches the state of an element between up and down
Slide Events <html><head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("#menu").click(function(){ $("#panel").slideDown("slow"); }); }); </script> <style> #panel,#menu { border:solid 1px #333; } #panel { display:none; } </style> </head><body> <div id="flip">Click Here</div> <div id="panel">Hello world!</div> </body></html>
Animation Events Animations can modify any css properties of elements over a period of time – position, size, colour, etc. $(selector).animate({params}, speed, callback);
Animation Events <script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px', }); }); }); </script>
Animation Events <script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); }); }); </script>
Animation Events <script> $(document).ready(function(){ $("button").click(function(){ var div=$("div"); div.animate({height:'400px',opacity:'0.2'},"slow"); div.animate({width:'400px',opacity:'1'},"slow"); div.animate({height:'50px',opacity:'0.2'},"slow"); div.animate({width:'50px',opacity:'1'},"slow"); }); }); </script>
Animation Events – Timing issues <script> $(document).ready(function(){ $("button").click(function(){ $("div").hide(“slow”); alert("All Gone!"); }); }); </script>
Callback functions Called after an effect is complete <script> $(document).ready(function(){ $("button").click(function(){ $("div").hide("slow",function(){ alert("All Gone!"); }); }); }); </script>
Chaining Function <script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({height:'400px',opacity:'0.2'},"slow") .animate({width:'400px',opacity:'1'},"slow") .animate({height:'50px',opacity:'0.2'},"slow") .animate({width:'50px',opacity:'1'},"slow"); }); }); </script>
Key Points JQuery is a powerful JavaScript library that makes writing client side code easy. Selectors are used to identify elements within a webpage. JQuery code is written to respond to events when a user interacts with a webpage, such as when they click on a particular element. JQuery can be used to respond to events by changing the document, through animation effects such as fading, sliding or changing other CSS properties.