JQUERY Dr Mohd Soperi Mohd Zahid Semester /16

Introduction to jQuery To use jQuery, obtain it from and integrate it into a webpagehttp:// 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

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

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 $()

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

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

Activity 11

Activity 12

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 ’); });

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

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

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

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

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

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

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

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

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

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

Changing Attribute of element Set Attribute Steve Suehring's Web Site var a1 = document.getElementById("braingialink"); alert(a1.getAttribute("href")); a1.setAttribute("href", " alert(a1.getAttribute("href"));

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);

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…

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

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

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

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); }

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

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) :

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

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

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"); }

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); });

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; }

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

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); });

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: $ 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; } });