By Jon Marozick

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

 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

 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() { … });

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

 $(“#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

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

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

.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

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

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

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

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

Chocolate Candy Taffy Caramel Fudge Cookie

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

   

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

  essentials essentials  jQuery In Action 

 