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

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

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?