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