Your SlideShare is downloading. ×
0
Vikas SharmaInternet Programming
2What is jQuery?• JavaScript Library• Functionality– DOM scripting & event handling– Ajax– User interface effects– Form va...
3Why jQuery?• Lightweight – 14kb (Minified andGzipped)• Cross-browser support (IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+)• ...
JQuery• Powerful JavaScript library– Simplify common JavaScript tasks– Access parts of a page• using CSS or XPath-like exp...
5Example – Show/Hide the old way<a href="#" onclick="toggle_visibility(foo);">Click here to togglevisibility of #foo</a>fu...
6Example – Show/Hide with jQuery$().ready(function(){$("a").click(function(){$("#more").toggle("slow");return false;});});
Introductory Sample<html><body><h1>Cities of the World</h1><dl><dt>Paris</dt><dd>Chic,fashionable, expensiverude</dd><dt>S...
Basic JQuery• Selecting part of document isfundamental operation• A JQuery object is a wrapper for aselected group of DOM ...
Basic JQuery• .addClass() method changes the DOM nodesby adding a ‘class’ attribute– The ‘class’ attribute is a special CS...
Basic JQuery• To make this change, put it in a function andcall it when the document has been loadedand the DOM is created...
Basic JQuery• JQuery provides an independent schedulingpoint after DOM is created and before imagesare loaded– $(document)...
JQuery Selectors• CSSp element name#id identifier.class classnamep.class element with classp a anchor as any descendant of...
JQuery Selectors• XPath/html/body//div pathsa[@href] anchor with anhref attrdiv[ol] div with an ol inside//a[@ref=nofollow...
JQuery Filtersp:first first paragraphli:last last list itema:nth(3) fourth linka:eq(3) fourth linkp:even or p:odd every ot...
Example• JQuery uses chaining as follows$(‘a:contains("ECS")’).parent().addClass("emphasize")
JQuery Events• bind(eventname, function) method– ‘click’– ‘change’– ‘resize’• $(“a[@href]”).bind(‘click’,function(){$(this...
Other JQuery Effects• .css(‘property’, ‘value’)• .css({‘prop1’:‘value1’, ‘prop2’:’value2’…})• E.g. .css(‘color’, ‘red’)• ....
More JQuery Changes DOM• .attr({‘name’, ‘value’})– sets a new attribute (or many)• $(‘<i>hello</i>’)– Creates a new elemen...
19Example – Show/Hide the old way<a href="#" onclick="toggle_visibility(foo);">Click here totoggle visibility of #foo</a>f...
20Example – Show/Hide with jQuery$().ready(function(){$("a").click(function(){$("#more").toggle("slow");return false;});});
21Example – Ajax the old wayfunction GetXmlHttpObject(handler) {var objXmlHttp = null; //Holds the local xmlHTTP object in...
22Example – Ajax with jQuery$.get(“controller/actionname", { name: "John", time: "2pm" },function(data){ alert("Data Loade...
23Example – Form Validation$().ready(function(){// validate the comment form when it is submitted$("#commentForm").validat...
Questions?
Upcoming SlideShare
Loading in...5
×

J query presentation

138

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
138
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "J query presentation"

  1. 1. Vikas SharmaInternet Programming
  2. 2. 2What is jQuery?• JavaScript Library• Functionality– DOM scripting & event handling– Ajax– User interface effects– Form validation
  3. 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. 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. 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(e.style.display == block)e.style.display = none;elsee.style.display = block;}
  6. 6. 6Example – Show/Hide with jQuery$().ready(function(){$("a").click(function(){$("#more").toggle("slow");return false;});});
  7. 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. 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. 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. 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. 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. 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. 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. 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. 15. Example• JQuery uses chaining as follows$(‘a:contains("ECS")’).parent().addClass("emphasize")
  16. 16. JQuery Events• bind(eventname, function) method– ‘click’– ‘change’– ‘resize’• $(“a[@href]”).bind(‘click’,function(){$(this).addClass(‘red’);});
  17. 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. 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. 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(e.style.display == block)e.style.display = none;elsee.style.display = block;}
  20. 20. 20Example – Show/Hide with jQuery$().ready(function(){$("a").click(function(){$("#more").toggle("slow");return false;});});
  21. 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. 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. 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. 24. Questions?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×