Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
jQuery 101<br />John Bales, Software Engineer<br />IT<br />
JavaScript<br />Abstraction<br />DOM Manipulation<br />UI Candy<br />And More…<br />What is jQuery<br />
Who’s Using jQuery<br />
<script><br />$(document).ready(function () {<br />    $("#tabs").tabs();<br />});<br /></script><br /><div id="tabs" styl...
jQuery Plugins<br />
JavaScript Objects<br />var Person = {<br />FirstName: '',<br />LastName: '',<br />PhoneNumber: '',<br />EmailAddress: '',...
Jquery Templates<br /><script id="summaryTemplateView" type="text/x-jquery-tmpl"><br /><table><br />    <tr><td>Name:</td>...
$.get("templates/summary.htm", function (templateBody) {<br />                $('#summaryTemplate').html(templateBody);<br...
Widget Factory<br />(function ($) {<br />    $.widget("ui.tab1", {<br />        // default options<br />        options: {...
Widget Factory<br /><script type="text/javascript"><br />    $(document).ready(function () { $('#person_info').tab1(); });...
$.post()<br />Load data from the server using a HTTP POST request.<br />$(‘#selector’).load()<br />Load data from the serv...
What is jQuery<br />Who uses jQuery<br />jQuery Plugins<br />jQuery Templates<br />Widget Factory<br />AJAX<br />QUESTIONS...
Upcoming SlideShare
Loading in …5
×

JQuery 101

605 views

Published on

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

Published in: Technology, News & Politics
  • Be the first to comment

  • Be the first to like this

JQuery 101

  1. 1. jQuery 101<br />John Bales, Software Engineer<br />IT<br />
  2. 2. JavaScript<br />Abstraction<br />DOM Manipulation<br />UI Candy<br />And More…<br />What is jQuery<br />
  3. 3. Who’s Using jQuery<br />
  4. 4. <script><br />$(document).ready(function () {<br /> $("#tabs").tabs();<br />});<br /></script><br /><div id="tabs" style="width:500px;"><br /> <ul><br /> <li><a href="#fragment-1"><span>Contact Info</span></a></li><br /> <li><a href="#fragment-2"><span>Address Info</span></a></li><br /> <li><a href="#fragment-3"><span>Vehicle Info</span></a></li><br /> </ul><br /> <div id="fragment-1"></div><br /> <div id="fragment-2"></div><br /> <div id="fragment-3"></div><br /></div><br />jQuery Plugins<br />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.<br />
  5. 5. jQuery Plugins<br />
  6. 6. JavaScript Objects<br />var Person = {<br />FirstName: '',<br />LastName: '',<br />PhoneNumber: '',<br />EmailAddress: '',<br /> Address: {<br /> Address1: '',<br /> Address2: '',<br /> City: '',<br /> State: '',<br /> Zip: ''<br /> },<br /> Vehicle: {<br /> Class: '',<br /> Make: '',<br /> Model: '',<br /> Year: '',<br /> Color: ''<br /> }<br />};<br />
  7. 7. Jquery Templates<br /><script id="summaryTemplateView" type="text/x-jquery-tmpl"><br /><table><br /> <tr><td>Name:</td><br /> <td width="100%">${FirstName} ${LastName}</td><br /> </tr><br /> <tr><td>Email:</td><br /> <td>${EmailAddress}</td><br /> </tr><br /> <tr><td>Phone:</td><br /> <td>${PhoneNumber}</td><br /> </tr><br /> <tr><td>Address</td><br /> <td>${Address.Address1} ${Address.Address2} ${Address.City}, ${Address.State}. ${Address.Zip}</td><br /> </tr><br /> <tr><td>Vehicle:</td><br /> <td>${Vehicle.Color} ${Vehicle.Year} ${Vehicle.Make} ${Vehicle.Model} ${Vehicle.Class}</td><br /> </tr><br /></table><br /></script><br />
  8. 8. $.get("templates/summary.htm", function (templateBody) {<br /> $('#summaryTemplate').html(templateBody);<br /> $("#summaryTemplateView").tmpl(Person).appendTo("#summaryView");<br />Jquery Templates<br />
  9. 9. Widget Factory<br />(function ($) {<br /> $.widget("ui.tab1", {<br /> // default options<br /> options: {<br /> hidden: false<br /> },<br />_create: function () {<br />var self = this;<br />var options = this.options;<br />self._loadEventHandlers();<br /> },<br />_init: function () {<br />var self = this;<br />var options = this.options;<br />},<br /> destroy: function () {<br /> $.Widget.prototype.destroy.apply(this, arguments); // default destroy<br /> }<br /> });<br />} (jQuery));<br />It provides a flexible base for building complex, statefulplugins with a consistent API.<br />
  10. 10. Widget Factory<br /><script type="text/javascript"><br /> $(document).ready(function () { $('#person_info').tab1(); });<br /></script><br /><div id="person_info"><br /> <div id="person_form_container"><br /> <form id="person_form" name="person_form"><br /> <table><br /> <tr><td>First Name:</td><br /> <td><input type="text" id="firstname" name="firstname" /></td><br /> </tr><br /><tr><td>Last Name:</td><br /> <td><input type="text" id="lastname" name="lastname" /></td><br /> </tr><br /> <tr><td colspan="2" align="right"><input type="button" id="SavePersonInfo" value="Save" /></td><br /> </tr><br /> </table><br /> </form><br /> </div><br /> <div id="personResult"></div><br /></div><br />
  11. 11. $.post()<br />Load data from the server using a HTTP POST request.<br />$(‘#selector’).load()<br />Load data from the server and place the returned HTML into the matched element.<br />$.get()<br />Load data from the server using a HTTP GET request.<br />AJAX<br />
  12. 12. What is jQuery<br />Who uses jQuery<br />jQuery Plugins<br />jQuery Templates<br />Widget Factory<br />AJAX<br />QUESTIONS?<br />Conclusion<br />

×