Your SlideShare is downloading. ×
J query presentation
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

J query presentation


Published on

Published in: Technology

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Vikas SharmaInternet Programming
  • 2. 2What is jQuery?• JavaScript Library• Functionality– DOM scripting & event handling– Ajax– User interface effects– Form validation
  • 3. 3Why jQuery?• Lightweight – 14kb (Minified andGzipped)• Cross-browser support (IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+)• CSS-like syntax – easy fordevelopers/non-developers tounderstand• Active developer community• Extensible - plugins
  • 4. JQuery• Powerful JavaScript library– Simplify common JavaScript tasks– Access parts of a page• using CSS or XPath-like expressions– Modify the appearance of a page– Alter the content of a page– Change the user’s interaction with a page– Add animation to a page– Provide AJAX support– Abstract away browser quirks
  • 5. 5Example – Show/Hide the old way<a href="#" onclick="toggle_visibility(foo);">Click here to togglevisibility of #foo</a>function toggle_visibility(id) {var e = document.getElementById(id);if( == block) = none; = block;}
  • 6. 6Example – Show/Hide with jQuery$().ready(function(){$("a").click(function(){$("#more").toggle("slow");return false;});});
  • 7. Introductory Sample<html><body><h1>Cities of the World</h1><dl><dt>Paris</dt><dd>Chic,fashionable, expensiverude</dd><dt>Sydney</dt><dd>Operahouse but no culture, MardiGras, fireworks</dd></dl></body></html>h1 {font-size: 2.5em;margin-bottom: 0;}.emphasize {font-style:italic; color:red;}
  • 8. Basic JQuery• Selecting part of document isfundamental operation• A JQuery object is a wrapper for aselected group of DOM nodes• $() function is a factory method thatcreates JQuery objects• $(“dt”) is a JQuery object containing allthe “dt” elements in the document
  • 9. Basic JQuery• .addClass() method changes the DOM nodesby adding a ‘class’ attribute– The ‘class’ attribute is a special CSS construct thatprovides a visual architecture independent of theelement structures• $(“dt”).addClass(“emphasize”) will change alloccurrences of <dt> to<dt class=“emphasize”>• See also .removeClass()
  • 10. Basic JQuery• To make this change, put it in a function andcall it when the document has been loadedand the DOM is createdfunction doEmph(){$(“dt”).addClass(“emphasize”)}<body onLoad=“doEmph()”>• We had to alter the HTML (bad)• Structure and appearance should beseparated!• Also, onLoad waits until all images etc areloaded. Tedious.
  • 11. Basic JQuery• JQuery provides an independent schedulingpoint after DOM is created and before imagesare loaded– $(document).ready(doEmph);• No HTML mods required. All done in script.• Better solution:– $(document).ready(function(){$(“dt”).addClass(“emphasize”)}); <html><head><script src="jquery.js" type="text/javascript"></script><script src="test.js" type="text/javascript"></script>…
  • 12. JQuery Selectors• CSSp element name#id identifier.class classnamep.class element with classp a anchor as any descendant of pp > a anchor direct child of p
  • 13. JQuery Selectors• XPath/html/body//div pathsa[@href] anchor with anhref attrdiv[ol] div with an ol inside//a[@ref=nofollow] any anchor with aspecific value for the ref attribute
  • 14. JQuery Filtersp:first first paragraphli:last last list itema:nth(3) fourth linka:eq(3) fourth linkp:even or p:odd every other paragrapha:gt(3) or a:lt(4) every link after the 4th orup to the fourtha:contains(‘click’) links that contain theword click
  • 15. Example• JQuery uses chaining as follows$(‘a:contains("ECS")’).parent().addClass("emphasize")
  • 16. JQuery Events• bind(eventname, function) method– ‘click’– ‘change’– ‘resize’• $(“a[@href]”).bind(‘click’,function(){$(this).addClass(‘red’);});
  • 17. Other JQuery Effects• .css(‘property’, ‘value’)• .css({‘prop1’:‘value1’, ‘prop2’:’value2’…})• E.g. .css(‘color’, ‘red’)• .hide(speed) or .show(speed)– Where speed is ‘slow’, ‘normal’ or ‘fast’
  • 18. More JQuery Changes DOM• .attr({‘name’, ‘value’})– sets a new attribute (or many)• $(‘<i>hello</i>’)– Creates a new element• $(‘<i>hello</i>’).insertAfter(‘div.chapter p’);– Creates element and inserts it into the document• .html() or .text() or .empty() will replace matchedelements with newly created elements
  • 19. 19Example – Show/Hide the old way<a href="#" onclick="toggle_visibility(foo);">Click here totoggle visibility of #foo</a>function toggle_visibility(id) {var e = document.getElementById(id);if( == block) = none; = block;}
  • 20. 20Example – Show/Hide with jQuery$().ready(function(){$("a").click(function(){$("#more").toggle("slow");return false;});});
  • 21. 21Example – Ajax the old wayfunction GetXmlHttpObject(handler) {var objXmlHttp = null; //Holds the local xmlHTTP object instance//Depending on the browser, try to create the xmlHttp objectif (is_ie){var strObjName = (is_ie5) ? Microsoft.XMLHTTP : Msxml2.XMLHTTP;try{objXmlHttp = new ActiveXObject(strObjName);objXmlHttp.onreadystatechange = handler;}catch(e){//Object creation erroredalert(Verify that activescripting and activeX controls are enabled);return;}}else{// Mozilla | Netscape | SafariobjXmlHttp = new XMLHttpRequest();objXmlHttp.onload = handler;objXmlHttp.onerror = handler;}//Return the instantiated objectreturn objXmlHttp;}
  • 22. 22Example – Ajax with jQuery$.get(“controller/actionname", { name: "John", time: "2pm" },function(data){ alert("Data Loaded: " + data); });$.post(“controller/actionname", { name: "John", time: "2pm" },function(data){ alert("Data Loaded: " + data); });
  • 23. 23Example – Form Validation$().ready(function(){// validate the comment form when it is submitted$("#commentForm").validate();});<input id="cname" name="name" class="some other styles {required:true,minLength:2}" /><input id="cemail" name="email" class="{required:true,email:true}" />
  • 24. Questions?