Philly.NET Hands-On jQuery + Plug-ins Bill Wolff, Rob Keiser

Why jQuery?  Pre-requisites: HTML – CSS – JavaScript  Lightweight JS library that reduces coding time  Wraps common tasks into single line or method  Framework for custom and downloaded plug-ins  Used by most major web players like Microsoft, Google  Used in 55% of 10,000 top web sites  Cross browser compliance including IE6  Free, open source MIT license  Developed by John Resig in 2006  Current release is 1.9.1

jQuery downloads  Versions  Production is minified and compressed  Development is readable and much larger  Example   Content Delivery Network (CDN)   Visual Studio MVC  Included in the default solution  Scripts folder with reference in bundle package

jQuery syntax  $(selector).action()  $ indicates jQuery entry point  (selector) to query HTML elements using CSS syntax  action() is a method built into jQuery or provided by a plug-in  Use document ready event to make sure DOM is fully loaded  $(document).ready(function(){  // jQuery methods go here...  });  Shorthand and more popular approach  $(function(){  // jQuery methods go here...  });

jQuery selectors  Use $() to select and manipulate HTML elements  $(“p”) – select all paragraph tags  $(”#bill”) – pound selects all tags with id of bill  $(“.bigbutton”) – period selects all tags by class name  $("ul li:first") – first li inside a ul  $("tr:even") – select even rows in a table  $("[href]") – all elements with an href attribute

jQuery events  Events fire based on user or system input  click() - user clicks on the HTML element  dblclick() - user double-clicks on the HTML element  mouseenter() - mouse pointer enters the HTML element  mouseleave() - mouse pointer leaves the HTML element  mousedown() - mouse pointer leaves the HTML element  mouseup() - mouse pointer leaves the HTML element  hover() – combines mouseenter and mouseleave  focus() - form field gets focus  blur() - form field loses focus  Example  $("p").click(function(){ // action goes here!! });

jQuery hide/show  Hide and show HTML elements  $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); });  Toggle combines hide and show  $("button").click(function(){ $("p").toggle(); });

jQuery fading  Fade an element in and out of visibility with optional speed  $("button").click(function(){ $("#box").fadeIn(); });  $("button").click(function(){ $("# box ").fadeOut(“slow”); });  Combining fade in and out  $("button").click(function(){ $("#box").fadeToggle(2000); });  Fading to a given opacity value between 0 and 1  $("button").click(function(){ $("# box ").fadeTo("slow",0.35); });

jQuery sliding  Use to slide down an element  $("#button").click(function(){ $("#panel").slideDown(); });  Use to slide up an element  $("# button ").click(function(){ $("#panel").slideUp(“slow”); });  Combine slide up and down  $("# button ").click(function(){ $("#panel").slideToggle(2000); });

jQuery animate  Create custom animations with CSS properties and optional speed  $("button").click(function(){ $(“box").animate({top:'250px'}); });  $("button").click(function(){ $(“box").animate({left:‘+=250px'}); });  Queued animations  $("button").click(function(){ var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow"); });

jQuery chaining  Run multiple jQuery methods on the same selector per statement  $("#box").css("color",“blue").fadeIn(1000).fadeOut(1000);  Cleaner syntax using multiple lines  $("#box").css("color",“blue").fadeIn(1000).fadeOut(1000);

jQuery HTML  DOM manipulation  text() - sets or returns the text content of selected elements  html() - sets or returns the content of selected elements and markup  $("#box").html(" Hello world! ");  val() - sets or returns the value of form fields  attr() - sets or returns the value of attributes  Creating and removing elements  append() - inserts content at the end of the selected elements  $(“ul").append(" Appended item ");  prepend() - inserts content at the beginning of the selected elements  after() - inserts content after the selected elements  before() - inserts content before the selected elements  remove() - removes the selected element and its children  empty() - removes the child elements from the selected element

jQuery CSS  CSS manipulation  addClass() - adds one or more classes to the selected elements  $("div").addClass("important");  removeClass() - removes one or more classes  toggleClass() - toggles between adding/removing classes  css() - sets or returns the style attribute  $(“button").css("background-color");  $("button").css("background-color", "red");  $("button").css({"background-color":“red","font-size":"150%"});

jQuery dimensions  There are built-in methods for element dimensions  width()  height()  innerWidth()  innerHeight()  outerWidth()  outerHeight()  Example  $("#box").width(400).height(300);

jQuery AJAX  Asynchronous JavaScript and XML loads data in the background  text, HTML, XML, or JSON using HTTP GET or POST  $(selector).load(URL,data,callback);