1. Shaun Geisert Matt Trice

2. 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

3. 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 http://docs.jquery.com http://docs.jquery.com

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

5. 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(); }

6. 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

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

8. jQuery – Overview of How It Works

9. Example 1: – Applying CSS

10. 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();

11. 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

12. 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);  }  });

13. Example 4: Cycle/Animations  Eg, http://jsfiddle.net/h6uc3/http://jsfiddle.net/h6uc3/  http://jquery.malsup.com/cycle/browser.h tml http://jquery.malsup.com/cycle/browser.h tml  http://ocl.colostate.edu/ http://ocl.colostate.edu/

14. Example 5: Using a jQuery Plugin  Basic Tabs - http://code.colostate.edu/Data/Sites/5/U serFiles/jquery/tabs.htm http://code.colostate.edu/Data/Sites/5/U serFiles/jquery/tabs.htm  $(function () { $("#tabs").tabs(); });

15. Resources  http://code.colostate.edu/jquery- resources.aspx http://code.colostate.edu/jquery- resources.aspx  http://lynda.colostate.edu - use your eID for access http://lynda.colostate.edu Dozens of free videos on jQuery &Javascript  http://jsfiddle.net http://jsfiddle.net  jQuery 1.4.2 Visual Cheatsheet - http://woorkup.com/2010/06/13/jquery-1-4- 2-visual-cheat-sheet http://woorkup.com/2010/06/13/jquery-1-4- 2-visual-cheat-sheet  Plugins - http://plugins.jquery.comhttp://plugins.jquery.com