1. JQUERY Dr Mohd Soperi Mohd Zahid Semester 2 2015/16

2. Introduction to jQuery To use jQuery, obtain it from http://www.jquery.com/ and integrate it into a webpagehttp://www.jquery.com/ Two versions are available for download: production version and development version Use the minified production version unless you are interested at the internals of jQuery Another option is to reference it from a CDN site instead of downloading

3. Including jQuery in a web page Same method as using external javaScript file Latest version now may not be 1.7.2, check the web site

4. jQuery syntax When jQuery library is included in a page, a function called jquery() is added Fortunately, calls to jquery() to access jQuery library can be made by just referring to its shortcut, that is $()

5. Using $(document).ready() Document Ready $(document).ready(function() { alert(‘hi’); });

6. Using selectors Given Link Accessing with normal JavaScript: getElementById(“linkOne”) Accessing with jQuery: $(“#linkOne”) Given Accessing with jQuery: $(“.specialClass”) Other examples: $(‘div’), $(‘a’), $(‘div a’), $(“p:nth-child(3)”), $(“p:first”), $(“p:last”), etc $(“p”)[1] selects the second element $(“p:eq(3)”) selects the third paragraph

7. Activity 11

8. Activity 12

9. Inserting elements Given Here is a div, it’s quite nice $(“myDiv”).before(“ This is a new div ”); inserts another element before the above $(“myDiv”).after(“ This is another new div ”); inserts another element after the above Appending an element $(document).ready(function() { $(‘body’).append(‘ Adding an element ’); });

10. Document Object Model (DOM) Provides a way to access and alter the contents of HTML documents Represents HTML documents in a tree-like structure

11. Working with DOM Retrieving elements Setting elements and items related to elements Removing or deleting elements Adding nodes to an existing parent

12. Methods and Properties getElementById() getElementByTagName() … many more innerHTML childNodes

13. Activity 13 Get By id function checkref() { var a1 = document.getElementById("w3link"); alert(a1.href); } Here's some text. Here's more text. Link to the W3

14. Activity 14 (innerHTML property) Get By Id function changetext() { var p1 = document.getElementById("sometext"); alert(p1.innerHTML); p1.innerHTML = "Changed Text"; } Here's some text. Here's more text. Link to the W3

15. Changing elements and attributes Get By Id $(document).ready(function() { function changetext() { alert($("#sometext").html()); $("#sometext").html("Changed Text"); } changetext(); }); Here's some text. Here's more text. Link to the W3

16. Retrieving by tag name Tag Name function changecolors() { var a1 = document.getElementByTagName("td"); var a1length = a1.length; for (var i = 0; i < a1length; i++) { a1[i].style.background = "#aaabba";} } Left column Right column Click to Change Colors

17. Using jQuery Tag Name function changecolors() { $("td").each(function() { $(this).css("background-color", "#aaabba"); }); } Left column Right column Click to Change Colors

18. Objects having groups of elements document.anchors document.forms document.images document.links

19. childNodes, parentNode, … A property containing a group of nodes comprising the children of a given element To retrieve the first child of a element with id mydiv, and store it in a variable var childOne = document.getElementById(“mydiv”).childNodes[0] To retrieve the parent of a child, the parentNode property can be used nextSibling, previousSibling, firstChild, lastChild jQuery has the children() function which returns the children of the matched element; parent(), prev() and next() functions are available

20. Changing Attribute of element Set Attribute Steve Suehring's Web Site var a1 = document.getElementById("braingialink"); alert(a1.getAttribute("href")); a1.setAttribute("href", "http://www.microsoft.com"); alert(a1.getAttribute("href"));

21. Create and Remove Element Create Element var newelement = document.createElement("p"); newelement.setAttribute("id", "newelement"); document.body.appendChild(newelement); newelement.appendChild(document.createTextNode("Hello World")); alert(newelement.getAttribute("id")); for (var i = 0; i < 3; i++) { var element = document.createElement("p"); element.setAttribute("id", "element" + i); document.body.appendChild(element); element.appendChild(document.createTextNode("Hello World, I'm Element " + i + ".")); } var removeelm = document.getElementById("element1"); document.body.removeChild(removeelm);

22. Events HTML tags raised in response to various user actions or state changes onblur() – the element lost focus, no longer selected onchange() – user typed into a text field, element changes onclick() – the mouse clicked an element onfocus() – the element got focus onload() – the element is loaded (document or image) onmousedown() – mouse pressed while elem has focus onmouseover() – mouse is over an element onsubmit() – the form is submitted Many more…

23. Event handling First event is registered by associating a function with the event When a registered event gets triggered, the event’s function is called

24. Activity 22 Timer Hello function sendAlert() { alert("Hello"); } function startTimer() { var timerID = window.setTimeout(sendAlert, 3000); } $(window).load(function() { startTimer(); });

25. jQuery and image hover example $(window).load(function() { $('#home').hover(function() { $("#home").attr("src", "helping.jpg"); }, function() { $("#home").attr("src", “butterfly.jpg”); });

26. jQuery and Slideshow Slideshow var images = ['helping.jpg', 'butterfly.jpg', 'hadith.gif', 'islam.jpg']; function nextImage() { var index = $('img[name=slideimage]').attr("id"); if (index == images.length - 1) { index = 0; } else { index++; } $('img[name=slideimage]').attr("src", images[index]); $('img[name=slideimage]').attr("id", index); } function prevImage() { var index = $('img[name=slideimage]').attr("id"); if (index == 0) { index = images.length - 1; } else { index--; } $('img[name=slideimage]').attr("src", images[index]); $('img[name=slideimage]').attr("id", index); }

27. jQuery and Slideshow (cont.) $(window).load(function() { $("#prevbtn").on("click", function() { prevImage(); }); $("#nextbtn").on("click", function() { nextImage(); });

28. Form Validation with jQuery A Basic Example $(document).ready(function() { $("#myForm").submit(function(eventObj) { if ($("#textbox1").val() == "") { alert("Name is required."); eventObj.preventDefault(); return false; } else { alert("Hello " + $("#textbox1").val()); return true; } }); A Basic Form Example Name (Required) :

29. jQuery and Select Box Select boxes Select A Constellation: Aquila Centarus Canis Major Canis Minor Corona Borealis Crux Cygnus Gemini Lyra Orion Taurus Ursa Major Ursa Minor

30. jQuery and Select box (cont) $(document).ready(function() { $("#starselect").change(function(eventObj) { alert($("#starselect").val()); });

31. jQuery changes selected option Pizza function flip(pizzatype) { if (pizzatype.value == "Veggie Special") { $("#topping").val("veggies"); } else if (pizzatype.value == "Meat Special") { $("topping").val("meat"); } else if (pizzatype.value == "Hawaiian") { $("topping").val("pineapple"); }

32. jQuery changes selected option Main Topping: Cheese Veggies Meat Olive & Pineapples $(document).ready(function() { $('input[name^=special]').each(function() { $(this).on("click", function() { flip(this); });

33. jQuery with Select box & Radio button Pizza function prepza() { $("#orderheading").text("This pizza will have:"); $("input[name=toppingcheck]:checked").each(function() { $("#orderheading").append(' ' + $(this).val() + ' '); }); $("#orderheading").append(' ' + $("input[name=crust]:checked").val() + ' Crust '); return false; }

34. jQuery with Select box & Radio button Toppings Crust <input type="checkbox" id="topping1" value="Sausage" name="toppingcheck">Sausage <input type="radio" name="crust" value="Regular" checked="checked" id="radio1">Regular <input type="checkbox" id="topping2" value="Pepperoni" name="toppingcheck">Pepperoni <input type="radio" name="crust" value="Deep Dish" id="radio2">Deep Dish <input type="checkbox" id="topping3" value="Olive" name="toppingcheck">Olive <input type="radio" name="crust" value="Thin" id="radio3">Thin <input type="checkbox" id="topping4" value="Green Peppers" name="toppingcheck">Green Peppers

35. jQuery with Select box & Radio button <input type="checkbox" id="topping5" value="Mushrooms" name="toppingcheck">Mushrooms <input type="checkbox" id="topping6" value="Onions" name="toppingcheck">Onions <input type="checkbox" id="topping7" value="Pineapple" name="toppingcheck">Pineapple $(document).ready(function() { $("#prepBtn").on("click", function() { return prepza(this); });

36. jQuery with input checking Catalog Form Order quality books From My Bookstore Description: Gain your knowledge about Islam and other topics, all are available at My Bookstore. Quantities are extremely limited. Make your order now! Price: $100.00 per box Quantity to order (Limit 3 per purchase): $(document).ready(function() { $("#catalogform").on("submit", function(event) { if ($("input[name=quantity]").val() > 3) { $("input[name=quantity]").after(' Limit 3 per \ purchase '); $("#errorSpan").css("background-color", "grey"); event.preventDefault(); return false; } else { return true; } });