Think jQuery

Slide 1: Think jQuery 04/21/08 By Ying Zhang

Slide 2: What is jQuery  A javascript library that doesn’t intermingle with HTML (unobtrusive)  Uses concise syntax to speed up DOM programming  Relatively new: released on BarCamp NYC on Jan 2006  Picking up momentum recently  Allows you to write less, do more 04/21/08 Ying Zhang 2

Slide 3: Why use jQuery Selector syntax is based on CSS (created by people who understand CSS)   jQuery(‘h#header span’)  $(“div.neato > input.radio”) Lightweight   15kb compressed  29kb packed Good documentation  Great community   Mailing list gets 10-20 conversations per day  Tons of plugins and growing Works well with other Javascript libraries  Good browser compatibility   IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+ Integrated with Firebug   console.log($(“div.jQuery”)) Write less, do more  04/21/08 Ying Zhang 3

Slide 4: jQuery crash course $(“div.section”) returns a jQuery collection obj   Assign it to a variable  var mySection = $(“div.section”);  But remember, it’s a jQuery obj not a DOM obj, therefore use $(mySection) to interact with it  Select Info  $(mySection).children("p:first")  Traverse  $(mySection).each(function(i,div) { // blah });  Manipulate  $(mySection).html(“<span>some text</span>”);  $(mySection).append(“<span>some text</span>”);  $("<span/>").html("some text").appendTo(mySelection);  Bind Events  $(mySection).click(function() {  $(“div#someOtherDiv).toggle();  }); jQuery documentation is categorized this way  04/21/08 Ying Zhang 4

Slide 5: Chaining  Since most jQuery methods return an object, you may chain methods together $(“<form/>”) .addClass(“form”) .attr(“id”, “unique”) .find(“input.firstName”).removeClass(“formInput”) .submit(function() { return confirm(“Are you sure?” }) .appendTo(“div#parentWrapper”); 04/21/08 Ying Zhang 5

Slide 6: Going unobtrusive $(document).ready(function() { alert(‘DOM is ready’); }); Replaces non-lib js code: window.onload=function() { alert(‘DOM is ready’); } Or <body onload=“alert(‘DOM is ready’)”> But it’s so much superior!!! 04/21/08 Ying Zhang 6

Slide 7: Going unobtrusive cont. If you have two scripts that required page onload calls   Traditional javascript:  loadClock.js window.onload=loadClock;   loadOther.js window.onload=loadOther;   But it will not work because loadOther will override loadClock. So you must either create another js that contains  window.onload=function() {loadClock(); loadOther()}  or do  <body onload=“loadClock();loadOther()”>  in your HTML  It requires you to have knowledge that both loadClock and loadOther need to be called on page load  jQuery  loadClock.js $(function() { // code for your clock loading });   loadOther.js  $(function() { // code for your other loading });  Include both scripts in your HTML and you are done  Nothing needs to be aware of both loadClock and loadOther 04/21/08 Ying Zhang 7

Slide 8: Syntax notes  Different versions of the same thing  $(document).ready(function() {});  jQuery(function($){});  $(function() {});  jQuery = $  $(“div.section”) is the same as jQuery(“div.section”) 04/21/08 Ying Zhang 8

Slide 9: jQuery one liners  Issue: I cannot correct table border=“1” with CSS  $(“table[border!=‘0’]”).attr(“border”, “0”);  Issue: I want to know if the user doesn’t check any checkboxes in a group  $(“.groupWrapper :checked”).length == 0  Issue: Put focus on the first input field when page loads  $(“#wrapper :input:eq(0)”).focus();  Issue: ‘Clear page’ button needs to clear values off all of the input fields on the screen  $(“input#clearPage”).click(function() { $(“:input”).val(“”); }); 04/21/08 Ying Zhang 9

Slide 10: Let’s write something  Problem  Have a list of checkboxes for a particular field  The choices are persisted to the backend  The page may be loaded with previous selection or no selection  If all left unchecked, prevent user from moving on  If check fields are pre-populated & the user makes changes to the selections, warn user the selection has been updated 04/21/08 Ying Zhang 10

Slide 11: Let’s write something cont.  Basic Tactic  On page load  save checked checkboxes into a global variable checked  On form submit  save checked checkboxes into a local variable onSubmitChecked  compare it to checked and do more logic to determine if the submission should be allowed 04/21/08 Ying Zhang 11

Slide 12: The HTML <form action="#"> <h2>Distributions</h2> <ul id="distributions"> <li><input type="checkbox" id="checkbox1"><label for="checkbox1"> Distribution 1</label></li> <li><input type="checkbox" id="checkbox2"><label for="checkbox2"> Distribution 2</label></li> <li><input type="checkbox" id="checkbox3"><label for="checkbox3"> Distribution 3</label></li> <li><input type="checkbox" id="checkbox4"><label for="checkbox4"> Distribution 4</label></li> <li><input type="checkbox" id="checkbox5"><label for="checkbox5"> Distribution 5</label></li> <li><input type="checkbox" id="checkbox6"><label for="checkbox6"> Distribution 6</label></li> <li><input type="checkbox" id="checkbox7"><label for="checkbox7"> Distribution 7</label></li> <li><input type="checkbox" id="checkbox8"><label for="checkbox8"> Distribution 8</label></li> <li><input type="checkbox" id="checkbox9"><label for="checkbox9"> Distribution 9</label></li> </ul> <input type="submit" id="submit" value="Submit" /> </form> 04/21/08 Ying Zhang 12

Slide 13: The jQuery script <script type="text/javascript"> var checked; jQuery(function($){ checked = $("ul#distributions :checked"); $("#submit").click(function() { return validForm(); }); }); function validForm() { var valid = true; var onSubmitChecked = $("ul#distributions :checked"); // if nothing is checked, alert and return false if(onSubmitChecked.length == 0) { alert("Please select at least one distribution!"); valid = false; } else { var warn = false; // if the length doesn't match, then the checked has been updated 04/21/08 Ying Zhang 13

Slide 14: The jQuery script cont. if(checked.length != onSubmitChecked.length) { warn = true; } else { // if all the checked ones match the checked ones in onSubmitChecked $(checked).each(function(i,checkbox) { var onSubmitCheckbox = $(onSubmitChecked).get(i); //if($(this).attr("id") != $(onSubmitCheckbox).attr("id")) { if($(this).next().text() != $(onSubmitCheckbox).next().text()) { warn = true; return false; // breaks out of the for each loop } }); } if(warn) { valid = confirm("Selected distributions have been updated.nnAre you sure you wish to continue?"); } } return valid; } </script> 04/21/08 Ying Zhang 14

Slide 15: Cool plugins  Hotkeys – bind anything to key shortcuts  Textarea Resizer – drag and resize text input area  http://jquery.com/demo/thickbox/ – modal window  jQuery Ajax Form  jQuery Validation  (Coz I contributed) DodosPicklist  So many more http://plugins.jquery.com/  Or just search Google for jQuery plugins 04/21/08 Ying Zhang 15

Slide 16: Extending jQuery  Writing a jQuery plugin  jQuery.fn.functionName = function(param) { }  jQuery object vs. DOM object  $(this) vs this  $(this)[0] gets the DOM object  Optional parameters  jQuery.fn.multiSelect = function(to, options) { }  options = $.extend({  sortOptions: true,  autoSubmit: true  }, options);  $(“#example”).multiSelect(“#blah”, {  sortOptions: false  }); 04/21/08 Ying Zhang 16

Slide 17: jQuery vs. other libraries  Sites/projects that use jQuery  Wordpress – I’d argue it is the best open source blog script on the web  Firefox – Take a peek at the source code  RichFaces – jQuery is included with the framework  Oracle – Fan blog entry?  Vs. Prototype  Now Ruby on Rails come prepackaged with it  script.aculo.us  I do not see an ever growing plugins list  The demos hardly changed since I visited two years ago  If interested, watch this slide  Maybe prototype has more OOP support?  But jQuery has basic support too 04/21/08 Ying Zhang 17

Slide 18: jQuery Resources (Duh)http://jquery.com   http://remysharp.com/jquery-api/ (General)http://groups.google.com/group/jquery-en   (Plugin)http://groups.google.com/group/jquery-plugins http://www.learningjquery.com/   (Search jQuery)http://www.slideshare.net/ Use jQuery without download:   <script type="text/javascript" src="http://code.jquery.com/jquery- latest.js"> </script> 04/21/08 Ying Zhang 18

Slideshare.net (beta)