Your SlideShare is downloading. ×
0
Think jQuery
Think jQuery
Think jQuery
Think jQuery
Think jQuery
Think jQuery
Think jQuery
Think jQuery
Think jQuery
Think jQuery
Think jQuery
Think jQuery
Think jQuery
Think jQuery
Think jQuery
Think jQuery
Think jQuery
Think jQuery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Think jQuery

2,570

Published on

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Think jQuery 06/02/09 By Ying Zhang
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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>

×