Your SlideShare is downloading. ×
0
 
What is jQuery <ul><li>Javascript Library </li></ul><ul><li>Fast and concise </li></ul><ul><li>Simplifies the interaction ...
Why jQuery? <ul><li>Lightweight : 19KB in size  (Minified and Gzipped) </li></ul><ul><li>CSS1 - 3 Complaint  </li></ul><ul...
Why jQuery? <ul><li>Lightweight : 19KB in size  (Minified and Gzipped) </li></ul><ul><li>CSS1 - 3 Complaint  </li></ul><ul...
A ajax and DOM manipulation example <ul><li>if (!document.ELEMENT_NODE) { document.ELEMENT_NODE = 1; document.ATTRIBUTE_NO...
It’s just a single line in jQuery $(“#content”).load(“page.html #content”);
Who’s using jQuery? http:// docs.jquery.com/Sites_Using_jQuery
Dominating the world <ul><li>Google trends comparison of last JS framework 12 months </li></ul><ul><li>http:// www.google....
Let’s Start <ul><li>Download jQuery </li></ul><ul><ul><li>http:// docs.jquery.com/Downloading_jQuery </li></ul></ul>
Embed in you page <ul><li><html>  </li></ul><ul><li><head>  </li></ul><ul><li><script src=“ path/to/jquery-x.x.js &quot;><...
Embed in you page <ul><li><html>  </li></ul><ul><li><head>  </li></ul><ul><li><script src=&quot; path/to/jquery-x.x.js &qu...
$(“div”). addClass(“xyz”); Find Some Elements Do something with them { } jQuery Object jQuery philosophy
A Basic Example <body>  <div> <p>I m a paragraph 1</p>  <p>I m a paragraph 2</p>  </div> <p>I m another paragraph</p>  </b...
A Basic Example <body>  <div> <p>I m a paragraph 1</p>  <p>I m a paragraph 2</p>  </div> <p>I m another paragraph</p>  </b...
A Basic Example <body>  <div> <p class=“red”>I m a paragraph -1</p>  <p class=“red”>I m a paragraph -2</p>  </div> <p clas...
Selector Basics <ul><li>Just pass a  selector  to  $() </li></ul><ul><li>What is  selector? </li></ul><ul><li>Use any CSS ...
Selector Basics <ul><li>Think about your simplest css file. </li></ul>#header{ margin : 0 auto; } div{ margin : 0px; paddi...
Selector Basics <ul><li>The  red  colored items are  selectors </li></ul>#header { margin : 0 auto; } div { margin : 0px; ...
Selector Basics <ul><li>Selecting By Id </li></ul><ul><ul><li>$(“#header”) </li></ul></ul>Selecting using selectors
Selector Basics <ul><li>Selecting By Id </li></ul><ul><ul><li>$(“#header”) </li></ul></ul><ul><li>Selecting By Class </li>...
Selector Basics <ul><li>Selecting By Id </li></ul><ul><ul><li>$(“#header”) </li></ul></ul><ul><li>Selecting By Class </li>...
Selector Basics <ul><li>Selecting By Id </li></ul><ul><ul><li>$(“#header”) </li></ul></ul><ul><li>Selecting By Class </li>...
Basic Selector Example <ul><li>This is my page </li></ul><ul><li><body>  </li></ul><ul><li><div id=“header”> </li></ul><ul...
Basic Selector Example <ul><li>$(“#header”) </li></ul><ul><li><body>  </li></ul><ul><li><div id=“header”> </li></ul><ul><l...
Basic Selector Example <ul><li>$(“ul.menu”) </li></ul><ul><li><body>  </li></ul><ul><li><div id=“header”> </li></ul><ul><l...
Basic Selector Example <ul><li>$(“ul.menu li”) </li></ul><ul><li><body>  </li></ul><ul><li><div id=“header”> </li></ul><ul...
Using filters for selecting <ul><li>Basic Filters </li></ul><ul><ul><li>:first, :last, :even, :odd, …... </li></ul></ul>
Basic Filters Example Student list table. Lets make it zebra. Name Class Roll No. Comment Raju XII 2 Good Masud IX 1 Good ...
Basic Filters Example $(“#students tr:even”).css(“background-color”, “#dde”) Name Class Roll No. Comment Raju XII 2 Good M...
Using filters for selecting <ul><li>Basic Filters </li></ul><ul><ul><li>:first, :last, :even, :odd, …... </li></ul></ul><u...
Content Filters Example $(“#students tr:even”).css(“background-color”, “#dde”); $(“#students td.comment:empty”).text(“No C...
Using filters for selecting <ul><li>Basic Filters </li></ul><ul><ul><li>:first, :last, :even, :odd, …... </li></ul></ul><u...
Attribute Filters Example $(“#students tr:even”).css(“background-color”, “#dde”); $(“#students td.comment:empty”).text(“No...
Using filters for selecting <ul><li>Basic Filters </li></ul><ul><ul><li>:first, :last, :even, :odd, …... </li></ul></ul><u...
Forms Selector Example $(&quot;:submit&quot;) .click(function(e){ … }); $(&quot;input:disabled&quot;) .val(“You cannot cha...
Now we can Select Let’s perform some  action
jQuery Methods <ul><li>DOM Manipulation </li></ul><ul><ul><li>before(), after(), append(), appendTo(), ….. </li></ul></ul>
Dom Manipulation Example <ul><li>Move all paragraphs in div with id “contents” </li></ul><ul><li>$(“p”) </li></ul><ul><li>...
Dom Manipulation Example <ul><li>Move all paragraphs in div with id “contents” </li></ul><ul><li>$(“p”).appendTo(“#content...
Dom Manipulation Example <ul><li>Move all paragraphs in div with id “contents” </li></ul><ul><li>$(“p”).appendTo(“#content...
jQuery Methods <ul><li>DOM Manipulation </li></ul><ul><ul><li>before(), after(), append(), appendTo(), ….. </li></ul></ul>...
Attributes Example <ul><li>Make the texts of last paragraph bold </li></ul><ul><li>$(“#contents p:last”).css(“color”, “gre...
More Attributes Example <ul><li>Setting </li></ul><ul><li>$(“img.logo”) .attr(“align”, “left”); </li></ul><ul><li>$(“p.cop...
More Attributes Example <ul><li>Setting </li></ul><ul><li>$(“img.logo”) .attr(“align”, “left”); </li></ul><ul><li>$(“p.cop...
jQuery Methods <ul><li>DOM Manipulation </li></ul><ul><ul><li>before(), after(), append(), appendTo(), ….. </li></ul></ul>...
Event Example <ul><li>Start when DOM is ready </li></ul><ul><li>$(document).ready(function(){  </li></ul><ul><li>$( select...
Event Example <ul><li>Bind all interactions on events. </li></ul><ul><li>$( document ). ready (function(){  </li></ul><ul>...
Event Example <ul><li>You can fire events manually. </li></ul><ul><li>$(document).ready(function(){  </li></ul><ul><li>$(“...
jQuery Methods <ul><li>DOM Manipulation </li></ul><ul><ul><li>before(), after(), append(), appendTo(), ….. </li></ul></ul>...
Effects Example <ul><li>When “ show-cart ” link clicked, slide up/down “ cart ” div. </li></ul><ul><li>$(“a#show-cart”).cl...
Effects Example <ul><li>Build your custom animation </li></ul><ul><li>$(“a#show-cart”).click(function(){ </li></ul><ul><li...
jQuery Methods <ul><li>DOM Manipulation </li></ul><ul><ul><li>before(), after(), append(), appendTo(), ….. </li></ul></ul>...
Ajax Examples <ul><li>Load a page in a container </li></ul><ul><li>$(“#comments”).load(“/get_comments.php”); </li></ul><ul...
Ajax Examples <ul><li>Send ajax request with data </li></ul><ul><li>$.get(“/edit_comment.php&quot;,  </li></ul><ul><li>{id...
Ajax Examples <ul><li>You can send serialized form as data </li></ul><ul><li>$.get(“/edit_comment.php&quot;,  </li></ul><u...
Ajax Examples <ul><li>Set a callback function for handling response data </li></ul><ul><li>$.get(“edit_comment.php&quot;, ...
Chaining Methods <ul><li>Most jQuery methods return jQuery object </li></ul><ul><li>You can chain them together </li></ul>
Chaining Methods <ul><li>Most jQuery methods return jQuery object </li></ul><ul><li>You can chain them together </li></ul>...
Chaining Methods <ul><li>Most jQuery methods return jQuery object </li></ul><ul><li>You can chain them together </li></ul>...
jQuery Plugins jQuery is extensible.
jQuery Plugins <ul><li>jQuery lightBox </li></ul><ul><li>http://leandrovieira.com/projects/jquery/lightbox/   </li></ul>
jQuery Plugins <ul><li>Slider Plugins </li></ul><ul><li>http://www.hieu.co.uk/blog/index.php/imageswitch/   </li></ul><ul>...
And thousands of more… http://plugins.jquery.com/
jQuery UI <ul><li>Build highly interactive web applications </li></ul>
jQuery UI – Interactions  (Draggale, Droppable, Resizable, Selectable, Sortable)
jQuery UI – Sortable Example <ul><li>$(&quot;#items&quot;).sortable();  </li></ul>
jQuery UI – Widgets (Accordion, Datepicker, Dialog, Progressbar, Slider, Tabs)
jQuery UI – Datepicker Example $(&quot;#date&quot;).datepicker();
Which one will match your site?
Designing a jQuery UI theme - Themeroller http://ui.jquery.com/themeroller
Anis uddin Ahmad Sr. Software Engineer Right Brain Solution Ltd. http://ajaxray.com
Questions?
THANK YOU
Upcoming SlideShare
Loading in...5
×

Jquery presentation

1,679

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

No notes for slide

Transcript of "Jquery presentation"

  1. 2. What is jQuery <ul><li>Javascript Library </li></ul><ul><li>Fast and concise </li></ul><ul><li>Simplifies the interaction between HTML and JavaScript </li></ul>
  2. 3. Why jQuery? <ul><li>Lightweight : 19KB in size (Minified and Gzipped) </li></ul><ul><li>CSS1 - 3 Complaint </li></ul><ul><li>Cross Browser </li></ul><ul><ul><li>(IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome) </li></ul></ul>
  3. 4. Why jQuery? <ul><li>Lightweight : 19KB in size (Minified and Gzipped) </li></ul><ul><li>CSS1 - 3 Complaint </li></ul><ul><li>Cross Browser </li></ul><ul><ul><li>(IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome) </li></ul></ul>Great Community Plugins Tutorials TestCoverage Open (free) license Books
  4. 5. A ajax and DOM manipulation example <ul><li>if (!document.ELEMENT_NODE) { document.ELEMENT_NODE = 1; document.ATTRIBUTE_NODE = 2; document.TEXT_NODE = 3; document.CDATA_SECTION_NODE = 4; document.ENTITY_REFERENCE_NODE = 5; document.ENTITY_NODE = 6; document.PROCESSING_INSTRUCTION_NODE = 7; document.COMMENT_NODE = 8; document.DOCUMENT_NODE = 9; document.DOCUMENT_TYPE_NODE = 10; document.DOCUMENT_FRAGMENT_NODE = 11; document.NOTATION_NODE = 12; } document._importNode = function(node, allChildren) { switch (node.nodeType) { case document.ELEMENT_NODE: var newNode = document.createElement(node » .nodeName); /* does the node have any attributes to add? */ if (node.attributes && node.attributes » .length > 0) for (var i = 0; il = node.attributes.length; » i < il) newNode.setAttribute(node.attributes » .nodeName, node.getAttribute(node.attributes[i++] » .nodeName)); /* are we going after children too, and does » the node have any? */ if (allChildren && node.childNodes && » node.childNodes.length > 0) for (var i = 0; il = node.childNodes.length; » i < il) newNode.appendChild(document._importNode » (node.childNodes[i++], allChildren)); return newNode; break; case document.TEXT_NODE: case document.CDATA_SECTION_NODE: case document.COMMENT_NODE: return document.createTextNode(node.nodeValue); break; } }; </li></ul><ul><li>http:// www.alistapart.com/articles/crossbrowserscripting </li></ul>
  5. 6. It’s just a single line in jQuery $(“#content”).load(“page.html #content”);
  6. 7. Who’s using jQuery? http:// docs.jquery.com/Sites_Using_jQuery
  7. 8. Dominating the world <ul><li>Google trends comparison of last JS framework 12 months </li></ul><ul><li>http:// www.google.com/trends?q =jQuery%2C+prototype%2C+yui%2C+dojo%2C+mootools&ctab=0&geo= all&date = ytd&sort =0 </li></ul>
  8. 9. Let’s Start <ul><li>Download jQuery </li></ul><ul><ul><li>http:// docs.jquery.com/Downloading_jQuery </li></ul></ul>
  9. 10. Embed in you page <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><script src=“ path/to/jquery-x.x.js &quot;></script> </li></ul><ul><li></head> </li></ul><ul><li><body> … </body> </li></ul><ul><li></html> </li></ul>
  10. 11. Embed in you page <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><script src=&quot; path/to/jquery-x.x.js &quot;></script> </li></ul><ul><li><script> </li></ul><ul><li>$(document).ready(function(){ </li></ul><ul><li>// Start here </li></ul><ul><li>}); </li></ul><ul><li></script> </li></ul><ul><li></head> </li></ul><ul><li><body> … </body> </li></ul><ul><li></html> </li></ul>
  11. 12. $(“div”). addClass(“xyz”); Find Some Elements Do something with them { } jQuery Object jQuery philosophy
  12. 13. A Basic Example <body> <div> <p>I m a paragraph 1</p> <p>I m a paragraph 2</p> </div> <p>I m another paragraph</p> </body>
  13. 14. A Basic Example <body> <div> <p>I m a paragraph 1</p> <p>I m a paragraph 2</p> </div> <p>I m another paragraph</p> </body> Select all paragraphs. $(“p”)
  14. 15. A Basic Example <body> <div> <p class=“red”>I m a paragraph -1</p> <p class=“red”>I m a paragraph -2</p> </div> <p class=“red”>I m another paragraph</p> </body> Select all paragraphs. Add a class to them. $(“p”).addClass(“red”);
  15. 16. Selector Basics <ul><li>Just pass a selector to $() </li></ul><ul><li>What is selector? </li></ul><ul><li>Use any CSS selector </li></ul>
  16. 17. Selector Basics <ul><li>Think about your simplest css file. </li></ul>#header{ margin : 0 auto; } div{ margin : 0px; padding : 0px } ul.menu li{ … .. }
  17. 18. Selector Basics <ul><li>The red colored items are selectors </li></ul>#header { margin : 0 auto; } div { margin : 0px; padding : 0px } ul.menu li { … .. }
  18. 19. Selector Basics <ul><li>Selecting By Id </li></ul><ul><ul><li>$(“#header”) </li></ul></ul>Selecting using selectors
  19. 20. Selector Basics <ul><li>Selecting By Id </li></ul><ul><ul><li>$(“#header”) </li></ul></ul><ul><li>Selecting By Class </li></ul><ul><ul><li>$(“.updated”) </li></ul></ul>Selecting using selectors
  20. 21. Selector Basics <ul><li>Selecting By Id </li></ul><ul><ul><li>$(“#header”) </li></ul></ul><ul><li>Selecting By Class </li></ul><ul><ul><li>$(“.updated”) </li></ul></ul><ul><li>Selecting by tag name </li></ul><ul><ul><li>$(“table”) </li></ul></ul>Selecting using selectors
  21. 22. Selector Basics <ul><li>Selecting By Id </li></ul><ul><ul><li>$(“#header”) </li></ul></ul><ul><li>Selecting By Class </li></ul><ul><ul><li>$(“.updated”) </li></ul></ul><ul><li>Selecting by tag name </li></ul><ul><ul><li>$(“table”) </li></ul></ul><ul><li>Combine them </li></ul><ul><ul><li>$(“table.user-list”) </li></ul></ul><ul><ul><li>$(“#footer ul.menu li”) </li></ul></ul>Selecting using selectors
  22. 23. Basic Selector Example <ul><li>This is my page </li></ul><ul><li><body> </li></ul><ul><li><div id=“header”> </li></ul><ul><li><span id=“logo”>Logo here…</span> </li></ul><ul><li><ul class=“menu”> </li></ul><ul><li><li>user name</li> </li></ul><ul><li>… .. </li></ul><ul><li><li>logout</li> </li></ul><ul><li></ul> </li></ul><ul><li></div> </li></ul><ul><li>…… </li></ul><ul><li></body> </li></ul>
  23. 24. Basic Selector Example <ul><li>$(“#header”) </li></ul><ul><li><body> </li></ul><ul><li><div id=“header”> </li></ul><ul><li><span id=“logo”>Logo here…</span> </li></ul><ul><li><ul class=“menu”> </li></ul><ul><li><li>user name</li> </li></ul><ul><li>… .. </li></ul><ul><li><li>logout</li> </li></ul><ul><li></ul> </li></ul><ul><li></div> </li></ul><ul><li>…… </li></ul><ul><li></body> </li></ul>
  24. 25. Basic Selector Example <ul><li>$(“ul.menu”) </li></ul><ul><li><body> </li></ul><ul><li><div id=“header”> </li></ul><ul><li><span id=“logo”>Logo here…</span> </li></ul><ul><li><ul class=“menu”> </li></ul><ul><li><li>user name</li> </li></ul><ul><li>… .. </li></ul><ul><li><li>logout</li> </li></ul><ul><li></ul> </li></ul><ul><li></div> </li></ul><ul><li>…… </li></ul><ul><li></body> </li></ul>
  25. 26. Basic Selector Example <ul><li>$(“ul.menu li”) </li></ul><ul><li><body> </li></ul><ul><li><div id=“header”> </li></ul><ul><li><span id=“logo”>Logo here…</span> </li></ul><ul><li><ul class=“menu”> </li></ul><ul><li><li>user name</li> </li></ul><ul><li>… .. </li></ul><ul><li><li>logout</li> </li></ul><ul><li></ul> </li></ul><ul><li></div> </li></ul><ul><li>…… </li></ul><ul><li></body> </li></ul>
  26. 27. Using filters for selecting <ul><li>Basic Filters </li></ul><ul><ul><li>:first, :last, :even, :odd, …... </li></ul></ul>
  27. 28. Basic Filters Example Student list table. Lets make it zebra. Name Class Roll No. Comment Raju XII 2 Good Masud IX 1 Good Apu XII 3 Mizan XII 5 Karim VI 2 Satisfactory
  28. 29. Basic Filters Example $(“#students tr:even”).css(“background-color”, “#dde”) Name Class Roll No. Comment Raju XII 2 Good Masud IX 1 Good Apu XII 3 Mizan XII 5 Karim VI 2 Satisfactory
  29. 30. Using filters for selecting <ul><li>Basic Filters </li></ul><ul><ul><li>:first, :last, :even, :odd, …... </li></ul></ul><ul><li>Content Filters: </li></ul><ul><ul><li>:empty , :contains(text), :has(selector), ….. </li></ul></ul>
  30. 31. Content Filters Example $(“#students tr:even”).css(“background-color”, “#dde”); $(“#students td.comment:empty”).text(“No Comment”); Name Class Roll No. Comment Raju XII 2 Good Masud IX 1 Good Apu XII 3 No Comment Mizan XII 5 No Comment Karim VI 2 Satisfactory
  31. 32. Using filters for selecting <ul><li>Basic Filters </li></ul><ul><ul><li>:first, :last, :even, :odd, …... </li></ul></ul><ul><li>Content Filters: </li></ul><ul><ul><li>:empty , :contains(text), :has(selector), ….. </li></ul></ul><ul><li>Attribute Filters: </li></ul><ul><ul><li>[attribute], [attribute=value], [attribute!=value], ….. </li></ul></ul>
  32. 33. Attribute Filters Example $(“#students tr:even”).css(“background-color”, “#dde”); $(“#students td.comment:empty”).text(“No Comment”); $(“#students td[align=‘center']&quot;).addClass(“ocean”); Name Class Roll No. Comment Raju XII 2 Good Masud IX 1 Good Apu XII 3 No Comment Mizan XII 5 No Comment Karim VI 2 Satisfactory
  33. 34. Using filters for selecting <ul><li>Basic Filters </li></ul><ul><ul><li>:first, :last, :even, :odd, …... </li></ul></ul><ul><li>Content Filters: </li></ul><ul><ul><li>:empty , :contains(text), :has(selector), ….. </li></ul></ul><ul><li>Attribute Filters: </li></ul><ul><ul><li>[attribute], [attribute=value], [attribute!=value], ….. </li></ul></ul><ul><li>Forms </li></ul><ul><ul><li>:input, :text, :submit, :password, ….. </li></ul></ul><ul><ul><li>:enabled, :disabled, :checked, ….. </li></ul></ul>
  34. 35. Forms Selector Example $(&quot;:submit&quot;) .click(function(e){ … }); $(&quot;input:disabled&quot;) .val(“You cannot change me&quot;); $(“#form-id input:checked”) .addClass(“selected”);
  35. 36. Now we can Select Let’s perform some action
  36. 37. jQuery Methods <ul><li>DOM Manipulation </li></ul><ul><ul><li>before(), after(), append(), appendTo(), ….. </li></ul></ul>
  37. 38. Dom Manipulation Example <ul><li>Move all paragraphs in div with id “contents” </li></ul><ul><li>$(“p”) </li></ul><ul><li><body> </li></ul><ul><li><h1>jQuery</h1> </li></ul><ul><li><p>jQuery is good</p> </li></ul><ul><li><p>jQuery is better</p> </li></ul><ul><li><div id=“contents”></div> </li></ul><ul><li><p>jQuery is the best</p> </li></ul><ul><li></body> </li></ul>
  38. 39. Dom Manipulation Example <ul><li>Move all paragraphs in div with id “contents” </li></ul><ul><li>$(“p”).appendTo(“#contents”); </li></ul><ul><li><body> </li></ul><ul><li><h1>jQuery</h1> </li></ul><ul><li><div id=“contents”> </li></ul><ul><li><p>jQuery is good</p> </li></ul><ul><li><p>jQuery is better</p> </li></ul><ul><li><p>jQuery is the best</p> </li></ul><ul><li></div> </li></ul><ul><li></body> </li></ul>
  39. 40. Dom Manipulation Example <ul><li>Move all paragraphs in div with id “contents” </li></ul><ul><li>$(“p”).appendTo(“#contents”); </li></ul><ul><li>$(“h1”).append(“ Dom Manipulation”); </li></ul><ul><li><body> </li></ul><ul><li><h1>jQuery Dom Manipulation </h1> </li></ul><ul><li><div id=“contents”> </li></ul><ul><li><p>jQuery is good</p> </li></ul><ul><li><p>jQuery is better</p> </li></ul><ul><li><p>jQuery is the best</p> </li></ul><ul><li></div> </li></ul><ul><li></body> </li></ul>
  40. 41. jQuery Methods <ul><li>DOM Manipulation </li></ul><ul><ul><li>before(), after(), append(), appendTo(), ….. </li></ul></ul><ul><li>Attributes </li></ul><ul><ul><li>css(), addClass(), attr(), html(), val(), ….. </li></ul></ul>
  41. 42. Attributes Example <ul><li>Make the texts of last paragraph bold </li></ul><ul><li>$(“#contents p:last”).css(“color”, “green”); </li></ul><ul><li><body> </li></ul><ul><li><h1>jQuery Dom Manipulation</h1> </li></ul><ul><li><div id=“contents”> </li></ul><ul><li><p >jQuery is good</p> </li></ul><ul><li><p>jQuery is better</p> </li></ul><ul><li><p style=“color:green” >jQuery is the best</p> </li></ul><ul><li></div> </li></ul><ul><li></body> </li></ul>
  42. 43. More Attributes Example <ul><li>Setting </li></ul><ul><li>$(“img.logo”) .attr(“align”, “left”); </li></ul><ul><li>$(“p.copyright”) .html(“&copy; 2009 ajaxray”); </li></ul><ul><li>$(“input#name”) .val(“Spiderman”); </li></ul>
  43. 44. More Attributes Example <ul><li>Setting </li></ul><ul><li>$(“img.logo”) .attr(“align”, “left”); </li></ul><ul><li>$(“p.copyright”) .html(“&copy; 2009 ajaxray”); </li></ul><ul><li>$(“input#name”) .val(“Spiderman”); </li></ul><ul><li>Getting </li></ul><ul><li>var allignment = $(“img.logo”).attr(“align”); </li></ul><ul><li>var copyright = $(“p.copyright”).html(); </li></ul><ul><li>var username = $(“input#name”).val(); </li></ul>
  44. 45. jQuery Methods <ul><li>DOM Manipulation </li></ul><ul><ul><li>before(), after(), append(), appendTo(), ….. </li></ul></ul><ul><li>Attributes </li></ul><ul><ul><li>css(), addClass(), attr(), html(), val(), ….. </li></ul></ul><ul><li>Events </li></ul><ul><ul><li>click(), bind(), unbind(), live(), ….. </li></ul></ul>
  45. 46. Event Example <ul><li>Start when DOM is ready </li></ul><ul><li>$(document).ready(function(){ </li></ul><ul><li>$( selector ). eventName ( function(){…} ); </li></ul><ul><li>}); </li></ul>
  46. 47. Event Example <ul><li>Bind all interactions on events. </li></ul><ul><li>$( document ). ready (function(){ </li></ul><ul><li>$(“ #message ”). click ( function(){ </li></ul><ul><li>$(this).hide(); </li></ul><ul><li>} ) </li></ul><ul><li>}); </li></ul><ul><li><span id=“message” on click =“…”> blah blah </span> </li></ul>
  47. 48. Event Example <ul><li>You can fire events manually. </li></ul><ul><li>$(document).ready(function(){ </li></ul><ul><li>$(“span#message”).click(function(){ </li></ul><ul><li>$(this).hide(); </li></ul><ul><li>}) </li></ul><ul><li>$(“#form-id:reset”).click(); </li></ul><ul><li>}); </li></ul>
  48. 49. jQuery Methods <ul><li>DOM Manipulation </li></ul><ul><ul><li>before(), after(), append(), appendTo(), ….. </li></ul></ul><ul><li>Attributes </li></ul><ul><ul><li>css(), addClass(), attr(), html(), val(), ….. </li></ul></ul><ul><li>Events </li></ul><ul><ul><li>click(), bind(), unbind(), live(), ….. </li></ul></ul><ul><li>Effects </li></ul><ul><ul><li>hide(), fadeOut(), toggle(), animate(), ….. </li></ul></ul>
  49. 50. Effects Example <ul><li>When “ show-cart ” link clicked, slide up/down “ cart ” div. </li></ul><ul><li>$(“a#show-cart”).click(function(){ </li></ul><ul><li>$(“#cart”) .slideToggle(“slow”); </li></ul><ul><li>}) </li></ul>
  50. 51. Effects Example <ul><li>Build your custom animation </li></ul><ul><li>$(“a#show-cart”).click(function(){ </li></ul><ul><li>$(“#cart”) .slideToggle(“slow”); </li></ul><ul><li>}) </li></ul><ul><li>$(&quot;#showdown&quot;).click(function(){ </li></ul><ul><li>$(&quot;#my-div&quot;).animate({ </li></ul><ul><li>width: &quot;70%&quot;, </li></ul><ul><li>opacity: 0.4, </li></ul><ul><li>fontSize: &quot;3em“ </li></ul><ul><li>}, 1200 ); </li></ul><ul><li>}); </li></ul>
  51. 52. jQuery Methods <ul><li>DOM Manipulation </li></ul><ul><ul><li>before(), after(), append(), appendTo(), ….. </li></ul></ul><ul><li>Attributes </li></ul><ul><ul><li>css(), addClass(), attr(), html(), val(), ….. </li></ul></ul><ul><li>Events </li></ul><ul><ul><li>click(), bind(), unbind(), live(), ….. </li></ul></ul><ul><li>Effects </li></ul><ul><ul><li>hide(), fadeOut(), toggle(), animate(), ….. </li></ul></ul><ul><li>Ajax </li></ul><ul><ul><li>load(), get(), ajax(), getJSON(), ….. </li></ul></ul>
  52. 53. Ajax Examples <ul><li>Load a page in a container </li></ul><ul><li>$(“#comments”).load(“/get_comments.php”); </li></ul><ul><li>$(“#comments”).load(“/get_comments.php”, {max : 5}); </li></ul>
  53. 54. Ajax Examples <ul><li>Send ajax request with data </li></ul><ul><li>$.get(“/edit_comment.php&quot;, </li></ul><ul><li>{id: 102, comment: “I m edited&quot;} </li></ul><ul><li>); </li></ul>
  54. 55. Ajax Examples <ul><li>You can send serialized form as data </li></ul><ul><li>$.get(“/edit_comment.php&quot;, </li></ul><ul><li>$(“#edit-comment”).serialize() </li></ul><ul><li>); </li></ul><ul><li>id=102&comment=I+m+edited </li></ul>
  55. 56. Ajax Examples <ul><li>Set a callback function for handling response data </li></ul><ul><li>$.get(“edit_comment.php&quot;, </li></ul><ul><li>$(“form#cmm-edit”).serialize(), </li></ul><ul><li>function( data ){ </li></ul><ul><li>if(data == “success”) </li></ul><ul><li>alert(“Comment Edited!”); </li></ul><ul><li>} </li></ul><ul><li>); </li></ul>
  56. 57. Chaining Methods <ul><li>Most jQuery methods return jQuery object </li></ul><ul><li>You can chain them together </li></ul>
  57. 58. Chaining Methods <ul><li>Most jQuery methods return jQuery object </li></ul><ul><li>You can chain them together </li></ul><ul><li>$(“#deleted”).addClass(“red”).fadeOut(“slow”); </li></ul><ul><li>$(“:button”).val(“Click Me”).click(function(){…}) </li></ul>
  58. 59. Chaining Methods <ul><li>Most jQuery methods return jQuery object </li></ul><ul><li>You can chain them together </li></ul><ul><li>$(“#deleted”).addClass(“red”).fadeOut(“slow”); </li></ul><ul><li>$(“:button”).val(“Click Me”).click(function(){…}) </li></ul><ul><li>This will not work - </li></ul><ul><li>$(“:button”). val().click(function(){…}) </li></ul>This method will return string
  59. 60. jQuery Plugins jQuery is extensible.
  60. 61. jQuery Plugins <ul><li>jQuery lightBox </li></ul><ul><li>http://leandrovieira.com/projects/jquery/lightbox/ </li></ul>
  61. 62. jQuery Plugins <ul><li>Slider Plugins </li></ul><ul><li>http://www.hieu.co.uk/blog/index.php/imageswitch/ </li></ul><ul><li>http://medienfreunde.com/lab/innerfade/ </li></ul>
  62. 63. And thousands of more… http://plugins.jquery.com/
  63. 64. jQuery UI <ul><li>Build highly interactive web applications </li></ul>
  64. 65. jQuery UI – Interactions (Draggale, Droppable, Resizable, Selectable, Sortable)
  65. 66. jQuery UI – Sortable Example <ul><li>$(&quot;#items&quot;).sortable(); </li></ul>
  66. 67. jQuery UI – Widgets (Accordion, Datepicker, Dialog, Progressbar, Slider, Tabs)
  67. 68. jQuery UI – Datepicker Example $(&quot;#date&quot;).datepicker();
  68. 69. Which one will match your site?
  69. 70. Designing a jQuery UI theme - Themeroller http://ui.jquery.com/themeroller
  70. 71. Anis uddin Ahmad Sr. Software Engineer Right Brain Solution Ltd. http://ajaxray.com
  71. 72. Questions?
  72. 73. THANK YOU
  1. A particular slide catching your eye?

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

×