John Bales, Software Engineer at The Active Network, briefly discusses the fundamentals of JQuery.

1. jQuery 101 John Bales, Software Engineer IT

2. JavaScript Abstraction DOM Manipulation UI Candy And More… What is jQuery

3. Who’s Using jQuery

4. <script> $(document).ready(function () { $("#tabs").tabs(); }); </script> <div id="tabs" style="width:500px;"> <ul> <li><a href="#fragment-1"><span>Contact Info</span></a></li> <li><a href="#fragment-2"><span>Address Info</span></a></li> <li><a href="#fragment-3"><span>Vehicle Info</span></a></li> </ul> <div id="fragment-1"></div> <div id="fragment-2"></div> <div id="fragment-3"></div> </div> jQuery Plugins jQuery UI provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications.

5. jQuery Plugins

6. JavaScript Objects var Person = { FirstName: '', LastName: '', PhoneNumber: '', EmailAddress: '', Address: { Address1: '', Address2: '', City: '', State: '', Zip: '' }, Vehicle: { Class: '', Make: '', Model: '', Year: '', Color: '' } };

7. Jquery Templates <script id="summaryTemplateView" type="text/x-jquery-tmpl"> <table> <tr><td>Name:</td> <td width="100%">${FirstName} ${LastName}</td> </tr> <tr><td>Email:</td> <td>${EmailAddress}</td> </tr> <tr><td>Phone:</td> <td>${PhoneNumber}</td> </tr> <tr><td>Address</td> <td>${Address.Address1} ${Address.Address2} ${Address.City}, ${Address.State}. ${Address.Zip}</td> </tr> <tr><td>Vehicle:</td> <td>${Vehicle.Color} ${Vehicle.Year} ${Vehicle.Make} ${Vehicle.Model} ${Vehicle.Class}</td> </tr> </table> </script>

8. $.get("templates/summary.htm", function (templateBody) { $('#summaryTemplate').html(templateBody); $("#summaryTemplateView").tmpl(Person).appendTo("#summaryView"); Jquery Templates

9. Widget Factory (function ($) { $.widget("ui.tab1", { // default options options: { hidden: false }, _create: function () { var self = this; var options = this.options; self._loadEventHandlers(); }, _init: function () { var self = this; var options = this.options; }, destroy: function () { $.Widget.prototype.destroy.apply(this, arguments); // default destroy } }); } (jQuery)); It provides a flexible base for building complex, statefulplugins with a consistent API.

10. Widget Factory <script type="text/javascript"> $(document).ready(function () { $('#person_info').tab1(); }); </script> <div id="person_info"> <div id="person_form_container"> <form id="person_form" name="person_form"> <table> <tr><td>First Name:</td> <td><input type="text" id="firstname" name="firstname" /></td> </tr> <tr><td>Last Name:</td> <td><input type="text" id="lastname" name="lastname" /></td> </tr> <tr><td colspan="2" align="right"><input type="button" id="SavePersonInfo" value="Save" /></td> </tr> </table> </form> </div> <div id="personResult"></div> </div>

11. $.post() Load data from the server using a HTTP POST request. $(‘#selector’).load() Load data from the server and place the returned HTML into the matched element. $.get() Load data from the server using a HTTP GET request. AJAX

12. What is jQuery Who uses jQuery jQuery Plugins jQuery Templates Widget Factory AJAX QUESTIONS? Conclusion