1. JQuery The Write Less, Do More, JavaScript Library

2. Core $( expression, [context] ) – match set of elements $( html, [ownerDocument] ) – create elements on fly $( elements ) – wraps jQuery around DOM element(S) $( callback )  $(document).ready() – starting point $( xyz ).each( callback ) – execute a function at every matched element. $( xyz ).size( ) or $( xyz ).length – length of elements $( xyz ). get( index ) – get DOM at matched index

3. Selectors (Basics) #id – eg: $("#myId") element – eg: $("a").class – eg: $(".myClass").class.class – : $(".myClassOne.myClassTwo") * – : $("*", divElement) selector 1, selector 2, … – : $("div#myId, a.myClass")

4. Selectors (Hierarchy) ancestor descendant – eg: $("div p") parent > child – eg: $("div > img") prev + next – eg: $("label + input") prev ~ siblings – eg: $("div ~ span"

5. Selectors (Filters) :first – eg: $("div:first") :last – eg: $("div:last") :odd – eg: $("div:odd") :even – eg: $("div:even") :eq(index) – eg: $("div:eq(5)") :lt(index) – eg: $("div:lt(5)") :gt(index) – eg: $("div:gt(5)") :parent – eg: $("div:parent") :hidden – eg: $("div:hidden") :visible – eg: $("div:visible")

6. Selectors (Attribute Filters) [attribute]– eg: $("div[id]") [attribute=value] – eg: $("input[type='hidden']") [attribute!=value] – eg: $("input[type!='text']") [attribute^=value] – eg: $("input[name^='my']") [attribute$=value] – eg: $("input[name$='Letter']") [attribute*=value] – eg: $("select[name*='drop']") [attributeFilter1][attributeFilter2] – eg: $("input[id][type='hidden'")

7. Selectors (Child Filters) :nth-child(index/even/odd/equation) – eg: $("ul li:nth- child(2)") :first-child – eg: $("ul li:first-child") :last-child – eg: $("ul li:last:child") :only-child – eg: $("div button:only-child") Note: –these matches more than one: One for each parent –index start from 1

8. Selectors (Form) :input – eg: $(":input") :text – eg: $(":text") :password – eg: $(": password ") :radio – eg: $(": radio ") :checkbox – eg: $(":checkbox") :submit – eg: $(":submit") :image – eg: $(":image") :reset – eg: $(":reset") :button – eg: $(":button") :file – eg: $(":file")

9. Attributes attr – eg: $("img").attr("title") $("img").attr({src: "src", alt:"alt"}) $("img").attr("src", "mySrc") $("img").removeAttr("title") class – eg: $("div").addClass("myClass") $("div").hasClass("myClass") $("div").removeClass("myClass") $("div").toggleClass("myClass")

10. Attributes/Manipulation html – eg: $("div").html() $("div".html(" my paragraph ") text – eg: $("p").text() $("p").text("my text") val – eg: $("input[name='myName']").val() $("input[name='myName'").val("my val")

11. Manipulation append – eg: $("p").append(" txt ") prepend – eg: $("p").prepend(" txt ") after – eg: $("p").after(" my div ") before – eg: $("p").before(" my div ") wrap – eg: $("p").wrap(" ") empty – eg: $("div").empty() remove – eg: $("p").remove("p.myClass") clone – eg: $("div").clone(true)

12. Traversing filter – eg: $("div").filter(".myClass") not – eg: $("div").not(".myClass") children – eg: $("div").children("a.myClass") find – eg: $("div").find("a") next – eg: $("div").next("span") nextAll – eg: $("div").nextAll("span") prev – eg: $("div").prev("span") pervAll – eg: $("div").prevAll(".myClass") parent – eg: $("div").parent("div.myClass") parents – eg: $("div").parents("div") siblings – eg: $("div").siblings("div")

13. css css – eg: –$("div").css("background-color") –$("div").css({'color':'yellow','font-weight':'bolder'}) –$("div").css('color','yellow') height – eg: –$("div").height() –$("div").height(100) width – eg: –$("div").width() –$("div").width(100) position – eg: $("div").position() offset – eg: $("div").offset()

14. Events bind ( type, data, fn ) trigger ( type, data) hover – eg: $("a").hover(function(e){}, function(e){} ) toggle – eg: $("a").hover(function(e){}, function(e){} ) click – eg: –$("a").click() –$("a").click(function(e) {}) focus –$(":input").focus() –$(":input"). focus(function(e) {}) blur –$(":input").blur() –$(":input"). blur(function(e) {})

15. Event Object (Attributes) event.type event.target event.data event.relatedTarget event.currentTarget event.pageX/Y event.result event.timeStamp

16. Event Object (Methods) event.preventDefault() event.isDefaultPrevented() event.stopPropagation() event.isPropagationStopped() event.stopImmediatePropagation() event.isImmediatePropagationStopped()

17. Effects show – eg: $("p").show("slow", function(){}); hide – eg: $("p").hide("slow", function(){}); toggle – eg: $("p").toggle("slow", function(){}); slide – eg: –$("p"). slideUp ("slow", function(){}); –$("p"). slideDown ("slow", function(){}); –$("p"). slideToggle ("slow", function(){}); fade – eg: –$("p").fadeIn("slow", function(){}); –$("p").fadeOut("slow", function(){}); –$("p").fadeTo("slow", 0.2, function(){});

18. Ajax load – eg: $("div").load("/url div#my", data, callback) get – eg: $.get("url", {key: "value"}, callback, type) post – eg: $.post("url", {key: "value"}, callback, type) ajaxComplete( callback ) ajaxError( callback ) ajaxSend( callback ) ajaxStart( callback ) ajaxStop( callback ) ajaxSuccess( callback ) $("#div"). (function(e, req, o) {$(this);})