1. By Jon Marozick

2.  JavaScript toolkit  Aims to change the way developers think  jQuery philosophy  Find some HTML  Do something to it

3.  Fixes cross-browser issues  Powerful selectors  Zebra-stripe a table ▪ $(“table tr:nth-child(even)”).addClass(“striped”);  If you know CSS, you know jQuery selectors

4.  Separates behavior from structure  CSS separates design from structure  Need to wait until DOM is loaded so elements exist  window.onload = function() { … };  $(document).ready(function() { … }); or $(function() { … });

5.  $(selector) or jQuery(selector)  $() is a function that returns a special JavaScript object containing an array of DOM elements that match the selector

6.  $(“#post”) get element with id post  $(“a.toggle”) get links with class toggle  $(“input:hidden”) get all hidden input elements  $(”input:checkbox :checked”) gets all checkboxes that are checked  $(“a[href*=jquery]”) gets all links whose href contains the string jquery

7.  $(“div a”).fadeIn().addClass(“highlight”);  Fluent Interface

8. .fadeIn() fade to opaque .fadeTo() adjusts opacity .hide() hides elements .show() displays elements .slideToggle() displays or hides elements

9. .addClass() adds css class(es) .removeClass() removes css class(es) .height() get height of first element in set .position() get coordinates of first element in set, relative to parent

10.  Add banner after each div  $(“div”).after(“ Banner here ”); Put stuff here… Put more stuff here…

11.  Add banner after each div  $(“div”).after(“ Banner here ”); Put stuff here… Banner here Put more stuff here… Banner here

12. Get.attr(“checked”).html().val().css(“margin”).width() Set.attr(“checked”, “checked”).html(“ ”).val(“some value”).css(“margin”, “5px”).width(150)

13.  $(“button”).click(function() { // do something }); .mouseover() .keypress() .focus() .blur() .change()

14. Chocolate Candy Taffy Caramel Fudge Cookie

15. $("select").change(function () { var str = ""; $("select option:selected").each(function () { str += $(this).text() + " "; }); $("div").text(str); }).change();

17.  http://code.google.com/apis/ajaxlibs/ http://code.google.com/apis/ajaxlibs/   http://www.asp.net/ajaxlibrary/cdn.ashx http://www.asp.net/ajaxlibrary/cdn.ashx 

19.  First on-the-fly interaction design tool  No coding  Edit directly in browser  Saves data in local database using Google Gears

20.  www.jquery.com www.jquery.com  http://www.slideshare.net/1Marc/jquery- essentials http://www.slideshare.net/1Marc/jquery- essentials  jQuery In Action  www.ixedit.com www.ixedit.com

21.  Email: Jon.Marozick@blc.eduJon.Marozick@blc.edu  Twitter: @JonMarozick