Download
1 / 18
180 likes | 363 Views
JQuery. The Write Less, Do More, JavaScript Library. 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
E N D
JQuery The Write Less, Do More, JavaScript Library
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
Selectors (Basics) • #id – eg: $("#myId") • element – eg: $("a") • .class – eg: $(".myClass") • .class.class – : $(".myClassOne.myClassTwo") • * – : $("*", divElement) • selector 1, selector 2, … – : $("div#myId, a.myClass")
Selectors (Hierarchy) • ancestor descendant – eg: $("div p") • parent > child – eg: $("div > img") • prev + next – eg: $("label + input") • prev ~ siblings – eg: $("div ~ span"
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")
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'")
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
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")
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")
Attributes/Manipulation • html – eg: • $("div").html() • $("div".html("<p>my paragraph</p>") • text – eg: • $("p").text() • $("p").text("my text") • val – eg: • $("input[name='myName']").val() • $("input[name='myName'").val("my val")
Manipulation • append – eg: $("p").append("<strong>txt</strong>") • prepend – eg: $("p").prepend("<b>txt</b>") • after – eg: $("p").after("<div>my div</div>") • before – eg: $("p").before("<div>my div</div>") • wrap – eg: $("p").wrap("<div></div>") • empty – eg: $("div").empty() • remove – eg: $("p").remove("p.myClass") • clone – eg: $("div").clone(true)
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")
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()
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) {})
Event Object (Attributes) • event.type • event.target • event.data • event.relatedTarget • event.currentTarget • event.pageX/Y • event.result • event.timeStamp
Event Object (Methods) • event.preventDefault() • event.isDefaultPrevented() • event.stopPropagation() • event.isPropagationStopped() • event.stopImmediatePropagation() • event.isImmediatePropagationStopped()
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(){});
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").<ajaxEvent>(function(e, req, o) {$(this);})
