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

484
-1

Published on

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

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
484
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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 />

×