jQuery 

1. jQuery

2. WhatisjQuery? • • • • Isafree,openJavascriptlibrary Simplifiesthetaskofcreatinghighly responsivewebpages Worksacrossmodernbrowsers Abstractsawaybrowser-specificfeatures, allowingyoutoconcentrateondesign

3. IntroductiontoJavascript HTML markuplanguage content CSS presentationlanguage presentation JavaScript scriptinglanguage behaviour Java JavaScript

4. Whatisascriptinglanguage? Can'tcommunicatewithOS Can'taccesslocalfiles Can'tdirectlyaccessdatabase Can'taccesshardware Client-sidelanguage WorksonDOM User'sComputer • • • • • • WebBrowser WebPage JavaScript WebServer Python,PHP,ASP.NET, RubyonRails

5. DocumentObjectModel Document-Object

6. DocumentObjectModel Model html head body title h1 p ul li li li

7. JavaScriptvsjQuery • • Example1-Hideanelementwithid"textbox“ //javascript document.getElementById('textbox').style.display="none"; //jQuery $('#textbox').hide(); Example2-Createa<h1>tagwith"mytext“ //javascript varh1=document.CreateElement("h1"); h1.innerHTML="mytext"; document.getElementsByTagName('body')[0].appendChild(h1); //jQuery $('body').append($("<h1/>").html("mytext");

8. EnablejQueryinyourpage • • jQuerycanbeenabledinyourpagebyincluding referencetojQuerylibraryfile <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> IntroduceajQueryfunctionbyusingthebelowbelow givenfunction. $(document).ready(function(){ //Scriptgoeshere }); OR $(function(){ //Scriptgoeshere });

9. Basicselectors • • • • TagName document.getElementsByTagName("tagName"); $("tagName")-$("div"),$("p"),$("div"),..... TagID document.getElementById("id"); $("#id")-$("#name"),$("#address") TagClass document.getElementsByClassName("className"); $(".className")-$(".comment"),$(".code") Toselectallelements-$("*")

10. Selectors-Combined • • Syntax $("tagName.className") $("tagName.className#tagId") Examples $("h1.mainTitle") $("h1.mainTitle#firstHeading")

11. Indexfilters Syntax: $("selector:first") $("selector:last") Examples: $("p:first") $("p:last") • • • • • • • • • • • • • • $("selector:odd") $("selector:even") $("selector:eq(i)") $("selector:gt(i)") $("selector:lt(i)") $("p:odd") $("p:even") $("p:eq(1)") $("p:gt(1)") $("p:lt(1)")

12. Conditionfilters-Formfilters • • • • • • • • • • • • • • • • • • • $("selector:visible") $("selector:hidden") $("selector:disabled") $("selector:enabled") $("selector:checked") $("selector:selected") $("selector:header") $("selector:animated") $("selector:not(selector:not )") $("selector:input") $("selector:text") $("selector:password") $("selector:radio") $("selector:checkbox") $("selector:submit") $("selector:reset") $("selector:image") $("selector:file") $("selector:button")

13. Relationshipfilters-Contentfilters • • • $("selector:content('text') ") $("selector:empty") $("selector:has(selector)") • • • • • • • • $("selector:parent") $("selector:first-child") $("selector:last-child") $("selector:only-child") $("selector:nth-child(i)") $("selector:nth-child(odd)") $("selector:nth- child(even)") $("selector:nth- child(Xn+M)")

14. Attributefilters Syntax: •$("selector[attribute]") •$("selector[attribute=value ]") •$("selector[attribute!=value ]") •$("selector[attribute^=valu e]") •$("selector[attribute$=valu e]") •$("selector[attribute*=valu e]") Examples: $("p:[name]") $("p:[name=para]") •$("p:[name!=para]") •$("p:[name^=para]") •$("p:[name$=para]") •$("p:[name*=para]") • •

15. Retrieve,SetandRemoveattributes Syntax: Examples: • • • • • • • • • • $("selector").attr("name") $("selector").attr("key", "val") $("selector").attr("key", fn()) $("selector").attr(propertie s) $("selector").removeAttr(a ttr) $("img").attr("src") $("p").attr("class", "source") $("img").attr("height", calHt()) $("img").attr({ "src":"/path/", "title":"MyImg" }); $("div").removeAttr("class“ )

16. Class,HTML,Text,Value-Functions • • • • • • • • • • $("selector").hasClass("className") $("selector").addClass("className") $("selector").removeClass("className") $("selector").toggleClass("className") $("selector").html() $("selector").html("htmlcode") $("selector").text() $("selector").text("textcontent") $("selector").val() $("selector").val("value")

17. Traversing Syntax: Examples: • • • • • • • • • • • • $("selector").length $("selector").size() $("selector").get() $("selector").get(index) $("selector").find("selector") $("selector").each(function(){ $(this).xxxx(); }); $("h1").length $("h1").size() varh1_list=$("h1").get() varh1=$("h1").get(2) $("select").find(" option[value='india']") $("selector").each(function(){ $(this).addClass('title'); });

18. Events • • • • • • bind() unbind() ready() toggle() hover() trigger() •$("selector").bind(event,data,handler) •$("selector").unbind(event,handler)

19. Bind-Example $(function(){ $("#myButton").bind("onclick",validate); $("#myButton").click(validate); }); functionvalidate(){ if($("#myText").val().length==0){ alert("Error") }else{ $("#myForm").submit(); } }

20. Animations • • • • • • show() hide() fadeIn() fadeOut() slideUp() slideDown()

21. AdditionalFeatures • • jQueryUI AJAXfunctionality

22. Thankyou kamalrawat86@gmail.com