Think jQuery 06/02/09 By Ying Zhang
What is jQuery <ul><li>A javascript library that doesn’t intermingle with HTML (unobtrusive) </li></ul><ul><li>Uses concis...
Why use jQuery <ul><li>Selector syntax is based on CSS (created by people who understand CSS) </li></ul><ul><ul><li>jQuery...
jQuery crash course <ul><li>$(“div.section”) returns a jQuery collection obj </li></ul><ul><ul><li>Assign it to a variable...
Chaining <ul><li>Since most jQuery methods return an object, you may chain methods together </li></ul><ul><ul><li>$(“<form...
Going unobtrusive <ul><li>$(document).ready(function() { </li></ul><ul><ul><li>alert(‘DOM is ready’); </li></ul></ul><ul><...
Going unobtrusive cont. <ul><li>If you have two scripts that required page onload calls </li></ul><ul><ul><li>Traditional ...
Syntax notes <ul><li>Different versions of the same thing </li></ul><ul><ul><li>$(document).ready(function() {}); </li></u...
jQuery one liners <ul><li>Issue: I cannot correct table border=“1” with CSS </li></ul><ul><ul><li>$(“table[border!=‘0’]”)....
Let’s write something <ul><li>Problem </li></ul><ul><ul><li>Have a list of checkboxes for a particular field </li></ul></u...
Let’s write something cont. <ul><li>Basic Tactic </li></ul><ul><ul><li>On page load </li></ul></ul><ul><ul><ul><li>save ch...
The HTML <ul><li><form action=&quot;#&quot;> </li></ul><ul><li><h2>Distributions</h2> </li></ul><ul><li><ul id=&quot;distr...
The jQuery script <ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>var checked; </li></ul><ul><li>jQuer...
The jQuery script cont. <ul><li>if(checked.length != onSubmitChecked.length) { </li></ul><ul><li>warn = true; </li></ul><u...
Cool plugins <ul><li>Hotkeys  – bind anything to key shortcuts </li></ul><ul><li>Textarea  Resizer   – drag and resize tex...
Extending jQuery <ul><li>Writing a jQuery plugin </li></ul><ul><li>jQuery.fn.functionName = function(param) { } </li></ul>...
jQuery vs. other libraries <ul><li>Sites/projects that use jQuery </li></ul><ul><ul><li>Wordpress – I’d argue it is the be...
jQuery Resources <ul><li>(Duh) http://jquery.com </li></ul><ul><li>http://remysharp.com/jquery-api / </li></ul><ul><li>(Ge...
Upcoming SlideShare
Loading in...5
×

Think jQuery

2,578

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,578
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
92
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Think jQuery

  1. 1. Think jQuery 06/02/09 By Ying Zhang
  2. 2. What is jQuery <ul><li>A javascript library that doesn’t intermingle with HTML (unobtrusive) </li></ul><ul><li>Uses concise syntax to speed up DOM programming </li></ul><ul><li>Relatively new: released on BarCamp NYC on Jan 2006 </li></ul><ul><li>Picking up momentum recently </li></ul><ul><li>Allows you to write less, do more </li></ul>
  3. 3. Why use jQuery <ul><li>Selector syntax is based on CSS (created by people who understand CSS) </li></ul><ul><ul><li>jQuery(‘h#header span’) </li></ul></ul><ul><ul><li>$(“div.neato > input.radio”) </li></ul></ul><ul><li>Lightweight </li></ul><ul><ul><li>15kb compressed </li></ul></ul><ul><ul><li>29kb packed </li></ul></ul><ul><li>Good documentation </li></ul><ul><li>Great community </li></ul><ul><ul><li>Mailing list gets 10-20 conversations per day </li></ul></ul><ul><ul><li>Tons of plugins and growing </li></ul></ul><ul><li>Works well with other Javascript libraries </li></ul><ul><li>Good browser compatibility </li></ul><ul><ul><li>IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+ </li></ul></ul><ul><li>Integrated with Firebug </li></ul><ul><ul><li>console.log($(“div.jQuery”)) </li></ul></ul><ul><li>Write less, do more </li></ul>
  4. 4. jQuery crash course <ul><li>$(“div.section”) returns a jQuery collection obj </li></ul><ul><ul><li>Assign it to a variable </li></ul></ul><ul><ul><ul><li>var mySection = $(“div.section”); </li></ul></ul></ul><ul><ul><ul><li>But remember, it’s a jQuery obj not a DOM obj, therefore use $(mySection) to interact with it </li></ul></ul></ul><ul><ul><li>Select Info </li></ul></ul><ul><ul><ul><li>$(mySection).children(&quot;p:first&quot;) </li></ul></ul></ul><ul><ul><li>Traverse </li></ul></ul><ul><ul><ul><li>$(mySection).each(function(i,div) { // blah }); </li></ul></ul></ul><ul><ul><li>Manipulate </li></ul></ul><ul><ul><ul><li>$(mySection).html(“<span>some text</span>”); </li></ul></ul></ul><ul><ul><ul><li>$(mySection).append(“<span>some text</span>”); </li></ul></ul></ul><ul><ul><ul><ul><li>$(&quot;<span/>&quot;).html(&quot;some text&quot;).appendTo(mySelection); </li></ul></ul></ul></ul><ul><ul><li>Bind Events </li></ul></ul><ul><ul><ul><li>$(mySection).click(function() { </li></ul></ul></ul><ul><ul><ul><ul><li>$(“div#someOtherDiv).toggle(); </li></ul></ul></ul></ul><ul><ul><ul><li>}); </li></ul></ul></ul><ul><li>jQuery documentation is categorized this way </li></ul>
  5. 5. Chaining <ul><li>Since most jQuery methods return an object, you may chain methods together </li></ul><ul><ul><li>$(“<form/>”) </li></ul></ul><ul><ul><ul><li>.addClass(“form”) </li></ul></ul></ul><ul><ul><ul><li>.attr(“id”, “unique”) </li></ul></ul></ul><ul><ul><ul><li>.find(“input.firstName”).removeClass(“formInput”) </li></ul></ul></ul><ul><ul><ul><li>.submit(function() { return confirm(“Are you sure?” }) </li></ul></ul></ul><ul><ul><ul><li>.appendTo(“div#parentWrapper”); </li></ul></ul></ul>
  6. 6. Going unobtrusive <ul><li>$(document).ready(function() { </li></ul><ul><ul><li>alert(‘DOM is ready’); </li></ul></ul><ul><li>}); </li></ul><ul><li>Replaces non-lib js code: </li></ul><ul><li>window.onload=function() { </li></ul><ul><li>alert(‘DOM is ready’); </li></ul><ul><li>} </li></ul><ul><li>Or </li></ul><ul><li><body onload=“alert(‘DOM is ready’)”> </li></ul><ul><li>But it’s so much superior!!! </li></ul>
  7. 7. Going unobtrusive cont. <ul><li>If you have two scripts that required page onload calls </li></ul><ul><ul><li>Traditional javascript: </li></ul></ul><ul><ul><ul><li>loadClock.js </li></ul></ul></ul><ul><ul><ul><ul><li>window.onload=loadClock; </li></ul></ul></ul></ul><ul><ul><ul><li>loadOther.js </li></ul></ul></ul><ul><ul><ul><ul><li>window.onload=loadOther; </li></ul></ul></ul></ul><ul><ul><ul><li>But it will not work because loadOther will override loadClock. So you must either create another js that contains </li></ul></ul></ul><ul><ul><ul><ul><li>window.onload=function() {loadClock(); loadOther()} </li></ul></ul></ul></ul><ul><ul><ul><li>or do </li></ul></ul></ul><ul><ul><ul><ul><li><body onload=“loadClock();loadOther()”> </li></ul></ul></ul></ul><ul><ul><ul><li>in your HTML </li></ul></ul></ul><ul><ul><ul><li>It requires you to have knowledge that both loadClock and loadOther need to be called on page load </li></ul></ul></ul><ul><ul><li>jQuery </li></ul></ul><ul><ul><ul><li>loadClock.js </li></ul></ul></ul><ul><ul><ul><ul><li>$(function() { // code for your clock loading }); </li></ul></ul></ul></ul><ul><ul><ul><li>loadOther.js </li></ul></ul></ul><ul><ul><ul><ul><li>$(function() { // code for your other loading }); </li></ul></ul></ul></ul><ul><ul><ul><li>Include both scripts in your HTML and you are done </li></ul></ul></ul><ul><ul><ul><li>Nothing needs to be aware of both loadClock and loadOther </li></ul></ul></ul>
  8. 8. Syntax notes <ul><li>Different versions of the same thing </li></ul><ul><ul><li>$(document).ready(function() {}); </li></ul></ul><ul><ul><li>jQuery(function($){}); </li></ul></ul><ul><ul><li>$(function() {}); </li></ul></ul><ul><li>jQuery = $ </li></ul><ul><ul><li>$(“div.section”) is the same as jQuery(“div.section”) </li></ul></ul>
  9. 9. jQuery one liners <ul><li>Issue: I cannot correct table border=“1” with CSS </li></ul><ul><ul><li>$(“table[border!=‘0’]”).attr(“border”, “0”); </li></ul></ul><ul><li>Issue: I want to know if the user doesn’t check any checkboxes in a group </li></ul><ul><ul><li>$(“.groupWrapper :checked”).length == 0 </li></ul></ul><ul><li>Issue: Put focus on the first input field when page loads </li></ul><ul><ul><li>$(“#wrapper :input:eq(0)”).focus(); </li></ul></ul><ul><li>Issue: ‘Clear page’ button needs to clear values off all of the input fields on the screen </li></ul><ul><ul><li>$(“input#clearPage”).click(function() { $(“:input”).val(“”); }); </li></ul></ul>
  10. 10. Let’s write something <ul><li>Problem </li></ul><ul><ul><li>Have a list of checkboxes for a particular field </li></ul></ul><ul><ul><li>The choices are persisted to the backend </li></ul></ul><ul><ul><li>The page may be loaded with previous selection or no selection </li></ul></ul><ul><ul><ul><li>If all left unchecked, prevent user from moving on </li></ul></ul></ul><ul><ul><ul><li>If check fields are pre-populated & the user makes changes to the selections, warn user the selection has been updated </li></ul></ul></ul>
  11. 11. Let’s write something cont. <ul><li>Basic Tactic </li></ul><ul><ul><li>On page load </li></ul></ul><ul><ul><ul><li>save checked checkboxes into a global variable checked </li></ul></ul></ul><ul><ul><li>On form submit </li></ul></ul><ul><ul><ul><li>save checked checkboxes into a local variable onSubmitChecked </li></ul></ul></ul><ul><ul><ul><li>compare it to checked and do more logic to determine if the submission should be allowed </li></ul></ul></ul>
  12. 12. The HTML <ul><li><form action=&quot;#&quot;> </li></ul><ul><li><h2>Distributions</h2> </li></ul><ul><li><ul id=&quot;distributions&quot;> </li></ul><ul><li><li><input type=&quot;checkbox&quot; id=&quot;checkbox1&quot;><label for=&quot;checkbox1&quot;> Distribution 1</label></li> </li></ul><ul><li><li><input type=&quot;checkbox&quot; id=&quot;checkbox2&quot;><label for=&quot;checkbox2&quot;> Distribution 2</label></li> </li></ul><ul><li><li><input type=&quot;checkbox&quot; id=&quot;checkbox3&quot;><label for=&quot;checkbox3&quot;> Distribution 3</label></li> </li></ul><ul><li><li><input type=&quot;checkbox&quot; id=&quot;checkbox4&quot;><label for=&quot;checkbox4&quot;> Distribution 4</label></li> </li></ul><ul><li><li><input type=&quot;checkbox&quot; id=&quot;checkbox5&quot;><label for=&quot;checkbox5&quot;> Distribution 5</label></li> </li></ul><ul><li><li><input type=&quot;checkbox&quot; id=&quot;checkbox6&quot;><label for=&quot;checkbox6&quot;> Distribution 6</label></li> </li></ul><ul><li><li><input type=&quot;checkbox&quot; id=&quot;checkbox7&quot;><label for=&quot;checkbox7&quot;> Distribution 7</label></li> </li></ul><ul><li><li><input type=&quot;checkbox&quot; id=&quot;checkbox8&quot;><label for=&quot;checkbox8&quot;> Distribution 8</label></li> </li></ul><ul><li><li><input type=&quot;checkbox&quot; id=&quot;checkbox9&quot;><label for=&quot;checkbox9&quot;> Distribution 9</label></li> </li></ul><ul><li></ul> </li></ul><ul><li><input type=&quot;submit&quot; id=&quot;submit&quot; value=&quot;Submit&quot; /> </li></ul><ul><li></form> </li></ul>
  13. 13. The jQuery script <ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>var checked; </li></ul><ul><li>jQuery(function($){ </li></ul><ul><li>checked = $(&quot;ul#distributions :checked&quot;); </li></ul><ul><li>$(&quot;#submit&quot;).click(function() { </li></ul><ul><li>return validForm(); </li></ul><ul><li>}); </li></ul><ul><li>}); </li></ul><ul><li>function validForm() { </li></ul><ul><li>var valid = true; </li></ul><ul><li>var onSubmitChecked = $(&quot;ul#distributions :checked&quot;); </li></ul><ul><li>// if nothing is checked, alert and return false </li></ul><ul><li>if(onSubmitChecked.length == 0) { </li></ul><ul><li>alert(&quot;Please select at least one distribution!&quot;); </li></ul><ul><li>valid = false; </li></ul><ul><li>} else { </li></ul><ul><li>var warn = false; </li></ul><ul><li>// if the length doesn't match, then the checked has been updated </li></ul>
  14. 14. The jQuery script cont. <ul><li>if(checked.length != onSubmitChecked.length) { </li></ul><ul><li>warn = true; </li></ul><ul><li>} else { </li></ul><ul><li>// if all the checked ones match the checked ones in onSubmitChecked </li></ul><ul><li>$(checked).each(function(i,checkbox) { </li></ul><ul><li>var onSubmitCheckbox = $(onSubmitChecked).get(i); </li></ul><ul><li>//if($(this).attr(&quot;id&quot;) != $(onSubmitCheckbox).attr(&quot;id&quot;)) { </li></ul><ul><li>if($(this).next().text() != $(onSubmitCheckbox).next().text()) { </li></ul><ul><li>warn = true; </li></ul><ul><li>return false; // breaks out of the for each loop </li></ul><ul><li>} </li></ul><ul><li>}); </li></ul><ul><li>} </li></ul><ul><li>if(warn) { </li></ul><ul><li>valid = confirm(&quot;Selected distributions have been updated. Are you sure you wish to continue?&quot;); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>return valid; </li></ul><ul><li>} </li></ul><ul><li></script> </li></ul>
  15. 15. Cool plugins <ul><li>Hotkeys – bind anything to key shortcuts </li></ul><ul><li>Textarea Resizer – drag and resize text input area </li></ul><ul><li>http:// jquery.com/demo/thickbox / – modal window </li></ul><ul><li>jQuery Ajax Form </li></ul><ul><li>jQuery Validation </li></ul><ul><li>(Coz I contributed) DodosPicklist </li></ul><ul><li>So many more http://plugins.jquery.com/ </li></ul><ul><li>Or just search Google for jQuery plugins </li></ul>
  16. 16. Extending jQuery <ul><li>Writing a jQuery plugin </li></ul><ul><li>jQuery.fn.functionName = function(param) { } </li></ul><ul><li>jQuery object vs. DOM object </li></ul><ul><ul><li>$(this) vs this </li></ul></ul><ul><ul><li>$(this)[0] gets the DOM object </li></ul></ul><ul><li>Optional parameters </li></ul><ul><ul><li>jQuery.fn.multiSelect = function(to, options) { } </li></ul></ul><ul><ul><li>options = $.extend({ </li></ul></ul><ul><ul><ul><li>sortOptions: true, </li></ul></ul></ul><ul><ul><ul><li>autoSubmit: true </li></ul></ul></ul><ul><ul><li>}, options); </li></ul></ul><ul><li>$(“#example”).multiSelect(“#blah”, { </li></ul><ul><ul><li>sortOptions: false </li></ul></ul><ul><li>}); </li></ul>
  17. 17. jQuery vs. other libraries <ul><li>Sites/projects that use jQuery </li></ul><ul><ul><li>Wordpress – I’d argue it is the best open source blog script on the web </li></ul></ul><ul><ul><li>Firefox – Take a peek at the source code </li></ul></ul><ul><ul><li>RichFaces – jQuery is included with the framework </li></ul></ul><ul><ul><li>Oracle – Fan blog entry? </li></ul></ul><ul><li>Vs. Prototype </li></ul><ul><ul><li>Now Ruby on Rails come prepackaged with it </li></ul></ul><ul><ul><li>script.aculo.us </li></ul></ul><ul><ul><ul><li>I do not see an ever growing plugins list </li></ul></ul></ul><ul><ul><ul><li>The demos hardly changed since I visited two years ago </li></ul></ul></ul><ul><ul><ul><li>If interested, watch this slide </li></ul></ul></ul><ul><ul><li>Maybe prototype has more OOP support? </li></ul></ul><ul><ul><li>But jQuery has basic support too </li></ul></ul>
  18. 18. jQuery Resources <ul><li>(Duh) http://jquery.com </li></ul><ul><li>http://remysharp.com/jquery-api / </li></ul><ul><li>(General) http://groups.google.com/group/jquery -en </li></ul><ul><li>(Plugin) http://groups.google.com/group/jquery-plugins </li></ul><ul><li>http://www.learningjquery.com/ </li></ul><ul><li>(Search jQuery) http://www.slideshare.net / </li></ul><ul><li>Use jQuery without download: </li></ul><ul><ul><li><!-- jQuery packed --> </li></ul></ul><ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;http://code.jquery.com/jquery-latest.js&quot;> </li></ul></ul><ul><ul><li></script> </li></ul></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×