Shaun Geisert Matt Trice

What is jQuery?  Open source Javascript library/framework Created by John Resig  Their tagline – “The Write Less, Do More JavaScript Library”.  It’s still Javascript, just an abstraction  Feels like CSS

What Does jQuery Do?  Examples We’ll Give Today Relate To:  Making traversing the DOM easier  Making form validation easier  Making animating sites easier  Making AJAX calls easier  Note: jQuery is Not Intended For Core Functionality (In Case JS Is Disabled)  Further Documentation Can Be Found at

DOM – What Is It? DOM = Document Object Model 2 common DOM elements: document form

DOM - continued  document example: Pure Javascript – Hide ElementjQuery – Hide Element var tmpDiv = document.getElementById('mydiv'); if (tmpDiv) { tmpDiv.style.display = 'none'; } $(document).ready(function () { $(‘#mydiv').hide(); }

Why jQuery - Advantages  Typically does more with less code (than pure JavaScript)  Easier to learn and to use  Handles browser discrepancies  DOM tree navigation  Extensive 3rd party libraries  Supported by all modern browsers There is even is a jQuery version for mobile devices that's lighter in weight

Disadvantages  Does have a footprint, although it's minimal. This footprint can be reduced further by ○ Minifying/compressing the JavaScript ○ Using a CDN (content delivery network)  It's JavaScript, but at one layer abstracted Depending upon your point of view, this is a good thing. Therefore, it can be a little bit more difficult to debug than pure JavaScript (unless you’re using Firebug).

jQuery – Overview of How It Works

Example 1: – Applying CSS

Example 2: Basics of Selectors  Get HTML of all elements with class “myClass” $(‘.myClass').html()  Set HTML of element with ID, “myID” $(‘#myID').html(“Set something”)  Hide 2 nd h1 tag on page $(‘h1:eq(1)').hide();  Show all paragraphs on page with a title of “myTitle” $('p[title=“myTitle"]').show();

Example 3: Form Validation  $(document).ready(function(){ $("#registerForm").validate(); }); $ - jQuery class / object Wait till document loads Function call Find ids (#) with registerForm execute.validation plugin optional parameters

Example 3: AJAX  jQuery.ajax({  url: 'save.php',  type: 'post',  data: {  id: jQuery('#user-id').val()  },  success: function(response) {  alert('Received the following response: ' + response);  }  });

Example 4: Cycle/Animations  Eg,  tml tml 

Example 5: Using a jQuery Plugin  Basic Tabs - serFiles/jquery/tabs.htm serFiles/jquery/tabs.htm  $(function () { $("#tabs").tabs(); });

Resources  resources.aspx resources.aspx  - use your eID for access Dozens of free videos on jQuery &Javascript   jQuery Visual Cheatsheet visual-cheat-sheet 2-visual-cheat-sheet  Plugins -