Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
phpXperts - 09
What is jQuery

 Javascript Library
 Fast and concise
 Simplifies the interaction between HTML and JavaScript




        ...
Why jQuery?

 Lightweight : 19KB in size (Minified and Gzipped)
 CSS1 - 3 Complaint
 Cross Browser
     (IE 6.0+, FF 2+, ...
Why jQuery?

 Lightweight : 19KB in size (Minified and Gzipped)
 CSS1 - 3 Complaint
 Cross Browser
     (IE 6.0+, FF 2+, ...
A ajax and DOM manipulation example
if (!document.ELEMENT_NODE) { document.ELEMENT_NODE = 1;
   document.ATTRIBUTE_NODE = ...
It’s just a single line in jQuery
$(“#content”).load(“page.html #content”);




                                    phpXpe...
Who’s using jQuery?




     http://docs.jquery.com/Sites_Using_jQuery


                                        phpXperts...
Dominating the world

Google trends comparison of last JS framework 12 months




http://www.google.com/trends?q=jQuery%2C...
Let’s Start




                    Download jQuery
         http://docs.jquery.com/Downloading_jQuery




               ...
Embed in you page
<html>
  <head>
  <script src=“path/to/jquery-x.x.jsquot;></script>
  </head>
  <body> … </body>
</html>...
Embed in you page
<html>
  <head>
  <script src=quot;path/to/jquery-x.x.jsquot;></script>
  <script>
     $(document).read...
jQuery philosophy
Find Some Elements
  {
 $(“div”).addClass(“xyz”);

                     }
                  Do something...
A Basic Example



 <body>
    <div>
      <p>I m a paragraph 1</p>
      <p>I m a paragraph 2</p>
    </div>
    <p>I m a...
A Basic Example
Select all paragraphs.
$(“p”)

 <body>
    <div>
      <p>I m a paragraph 1</p>
      <p>I m a paragraph 2...
A Basic Example
Select all paragraphs. Add a class to them.
$(“p”).addClass(“red”);

 <body>
    <div>
       <p class=“re...
Selector Basics

       Just pass a selector to $()

                      What is   selector?


       Use any CSS select...
Selector Basics
            Think about your simplest css file.

#header{
    margin : 0 auto;
}
div{
    margin : 0px;
  ...
Selector Basics
             The red colored items are selectors

#header{
    margin : 0 auto;
}
div{
    margin : 0px;
 ...
Selector Basics
                 Selecting using selectors
 Selecting By Id
     $(“#header”)




                       ...
Selector Basics
                  Selecting using selectors
 Selecting By Id
     $(“#header”)
 Selecting By Class
     ...
Selector Basics
                   Selecting using selectors
 Selecting By Id
     $(“#header”)
 Selecting By Class
    ...
Selector Basics
                   Selecting using selectors
 Selecting By Id
     $(“#header”)
 Selecting By Class
    ...
Basic Selector Example
This is my page


<body>
  <div id=“header”>
      <span id=“logo”>Logo here…</span>
      <ul clas...
Basic Selector Example
$(“#header”)


<body>
  <div id=“header”>
      <span id=“logo”>Logo here…</span>
      <ul class=“...
Basic Selector Example
$(“ul.menu”)


<body>
  <div id=“header”>
      <span id=“logo”>Logo here…</span>
      <ul class=“...
Basic Selector Example
$(“ul.menu li”)


<body>
  <div id=“header”>
      <span id=“logo”>Logo here…</span>
      <ul clas...
Using filters for selecting

  Basic Filters
     :first, :last, :even, :odd, …...




                                  ...
Basic Filters Example

Student list table. Lets make it zebra.




        Name             Class            Roll No.     ...
Basic Filters Example

$(“#students tr:even”).css(“background-color”, “#dde”)




        Name       Class         Roll No...
Using filters for selecting

  Basic Filters
     :first, :last, :even, :odd, …...
  Content Filters:
     :empty , :con...
Content Filters Example

$(“#students tr:even”).css(“background-color”, “#dde”);
$(“#students td.comment:empty”).text(“No ...
Using filters for selecting

  Basic Filters
     :first, :last, :even, :odd, …...
  Content Filters:
     :empty , :con...
Attribute Filters Example

$(“#students tr:even”).css(“background-color”, “#dde”);
$(“#students td.comment:empty”).text(“N...
Using filters for selecting

  Basic Filters
     :first, :last, :even, :odd, …...
  Content Filters:
     :empty , :con...
Forms Selector Example

$(quot;:submitquot;).click(function(e){ … });

$(quot;input:disabledquot;).val(“You cannot change ...
Now we can Select
Let’s perform some action




                            phpXperts - 09
jQuery Methods

 DOM Manipulation
     before(), after(), append(), appendTo(), …..




                                 ...
Dom Manipulation Example

Move all paragraphs in div with id “contents”

$(“p”)


<body>
  <h1>jQuery</h1>
  <p>jQuery is ...
Dom Manipulation Example

Move all paragraphs in div with id “contents”

$(“p”).appendTo(“#contents”);


<body>
  <h1>jQue...
Dom Manipulation Example

Move all paragraphs in div with id “contents”

$(“p”).appendTo(“#contents”);
$(“h1”).append(“ Do...
jQuery Methods

 DOM Manipulation
     before(), after(), append(), appendTo(), …..
 Attributes
     css(), addClass(), ...
Attributes Example

Make the texts of last paragraph bold

$(“#contents p:last”).css(“color”, “green”);

<body>
  <h1>jQue...
More Attributes Example

                     Setting

 $(“img.logo”).attr(“align”, “left”);
 $(“p.copyright”).html(“&copy...
More Attributes Example

                     Setting

 $(“img.logo”).attr(“align”, “left”);
 $(“p.copyright”).html(“&copy...
jQuery Methods

 DOM Manipulation
     before(), after(), append(), appendTo(), …..
 Attributes
     css(), addClass(), ...
Event Example

Start when DOM is ready

$(document).ready(function(){

  $(selector).eventName(function(){…});

});




  ...
Event Example
Bind all interactions on events.

$(document).ready(function(){

  $(“#message”).click(function(){
      $(t...
Event Example
You can fire events manually.

$(document).ready(function(){

  $(“span#message”).click(function(){
      $(...
jQuery Methods

 DOM Manipulation
     before(), after(), append(), appendTo(), …..
 Attributes
     css(), addClass(), ...
Effects Example

When “show-cart” link clicked, slide up/down “cart” div.

$(“a#show-cart”).click(function(){
   $(“#cart”...
Effects Example

Build your custom animation

$(“a#show-cart”).click(function(){
   $(“#cart”).slideToggle(“slow”);
})

$(...
jQuery Methods

 DOM Manipulation
     before(), after(), append(), appendTo(), …..
 Attributes
     css(), addClass(), ...
Ajax Examples

Load a page in a container

$(“#comments”).load(“/get_comments.php”);

$(“#comments”).load(“/get_comments.p...
Ajax Examples

Send ajax request with data

$.get(“/edit_comment.phpquot;,
      {id: 102, comment: “I m editedquot;}
);

...
Ajax Examples

You can send serialized form as data

$.get(“/edit_comment.phpquot;,
      $(“#edit-comment”).serialize()
)...
Ajax Examples

Set a callback function for handling response data

$.get(“edit_comment.phpquot;,
      $(“form#cmm-edit”)....
Chaining Methods

 Most jQuery methods return jQuery object
 You can chain them together




                             ...
Chaining Methods

  Most jQuery methods return jQuery object
  You can chain them together


$(“#deleted”).addClass(“red”)...
Chaining Methods

  Most jQuery methods return jQuery object
  You can chain them together


$(“#deleted”).addClass(“red”)...
jQuery Plugins
jQuery is extensible.




                        phpXperts - 09
jQuery Plugins

                    jQuery lightBox




    http://leandrovieira.com/projects/jquery/lightbox/




       ...
jQuery Plugins

                    Slider Plugins




   http://www.hieu.co.uk/blog/index.php/imageswitch/
        http:/...
And thousands of more…
http://plugins.jquery.com/




                             phpXperts - 09
jQuery UI
Build highly interactive web applications




                                            phpXperts - 09
jQuery UI – Interactions
      (Draggale, Droppable, Resizable, Selectable, Sortable)




                                ...
jQuery UI – Sortable Example


$(quot;#itemsquot;).sortable();




                               phpXperts - 09
jQuery UI – Widgets
     (Accordion, Datepicker, Dialog, Progressbar, Slider, Tabs)




                                  ...
jQuery UI – Datepicker Example

$(quot;#datequot;).datepicker();




                                 phpXperts - 09
Which one will match your site?




                                  phpXperts - 09
Designing a jQuery UI theme - Themeroller




         http://ui.jquery.com/themeroller

                                 ...
Anis uddin Ahmad
Sr. Software Engineer
Right Brain Solution Ltd.
http://ajaxray.com




                            phpXpe...
Questions?




             phpXperts - 09
THANK YOU




            phpXperts - 09
Upcoming SlideShare
Loading in …5
×

of

jQuery from the very beginning Slide 1 jQuery from the very beginning Slide 2 jQuery from the very beginning Slide 3 jQuery from the very beginning Slide 4 jQuery from the very beginning Slide 5 jQuery from the very beginning Slide 6 jQuery from the very beginning Slide 7 jQuery from the very beginning Slide 8 jQuery from the very beginning Slide 9 jQuery from the very beginning Slide 10 jQuery from the very beginning Slide 11 jQuery from the very beginning Slide 12 jQuery from the very beginning Slide 13 jQuery from the very beginning Slide 14 jQuery from the very beginning Slide 15 jQuery from the very beginning Slide 16 jQuery from the very beginning Slide 17 jQuery from the very beginning Slide 18 jQuery from the very beginning Slide 19 jQuery from the very beginning Slide 20 jQuery from the very beginning Slide 21 jQuery from the very beginning Slide 22 jQuery from the very beginning Slide 23 jQuery from the very beginning Slide 24 jQuery from the very beginning Slide 25 jQuery from the very beginning Slide 26 jQuery from the very beginning Slide 27 jQuery from the very beginning Slide 28 jQuery from the very beginning Slide 29 jQuery from the very beginning Slide 30 jQuery from the very beginning Slide 31 jQuery from the very beginning Slide 32 jQuery from the very beginning Slide 33 jQuery from the very beginning Slide 34 jQuery from the very beginning Slide 35 jQuery from the very beginning Slide 36 jQuery from the very beginning Slide 37 jQuery from the very beginning Slide 38 jQuery from the very beginning Slide 39 jQuery from the very beginning Slide 40 jQuery from the very beginning Slide 41 jQuery from the very beginning Slide 42 jQuery from the very beginning Slide 43 jQuery from the very beginning Slide 44 jQuery from the very beginning Slide 45 jQuery from the very beginning Slide 46 jQuery from the very beginning Slide 47 jQuery from the very beginning Slide 48 jQuery from the very beginning Slide 49 jQuery from the very beginning Slide 50 jQuery from the very beginning Slide 51 jQuery from the very beginning Slide 52 jQuery from the very beginning Slide 53 jQuery from the very beginning Slide 54 jQuery from the very beginning Slide 55 jQuery from the very beginning Slide 56 jQuery from the very beginning Slide 57 jQuery from the very beginning Slide 58 jQuery from the very beginning Slide 59 jQuery from the very beginning Slide 60 jQuery from the very beginning Slide 61 jQuery from the very beginning Slide 62 jQuery from the very beginning Slide 63 jQuery from the very beginning Slide 64 jQuery from the very beginning Slide 65 jQuery from the very beginning Slide 66 jQuery from the very beginning Slide 67 jQuery from the very beginning Slide 68 jQuery from the very beginning Slide 69 jQuery from the very beginning Slide 70 jQuery from the very beginning Slide 71 jQuery from the very beginning Slide 72 jQuery from the very beginning Slide 73
Upcoming SlideShare
Learning jQuery in 30 minutes
Next
Download to read offline and view in fullscreen.

66 Likes

Share

Download to read offline

jQuery from the very beginning

Download to read offline

Presented at phpXperts seminar 2009, Bangladesh.
A real quick start for jQuery learners.
http://tech.groups.yahoo.com/group/phpexperts/message/11888

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

jQuery from the very beginning

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

    Mar. 2, 2020
  • VikramRawat33

    Feb. 3, 2018
  • LukasPlewnia1

    Jan. 27, 2018
  • ShwetaMacwan

    Jan. 19, 2018
  • manishmonu4

    Nov. 17, 2017
  • kyawsoenyan

    Oct. 11, 2017
  • BabuRathinam

    Oct. 8, 2017
  • FoysalCtg

    Aug. 6, 2017
  • naveenreddyb9

    Jul. 16, 2017
  • JavedMalik25

    Jun. 1, 2017
  • MahesaIqbal

    Feb. 27, 2017
  • williammdavis

    Feb. 19, 2017
  • MuhammadKashifAbbas

    Nov. 25, 2016
  • RajeshKumarYadav21

    Jul. 29, 2016
  • nicholascyho

    Jul. 27, 2016
  • AlphieFok

    May. 5, 2016
  • Yashika1234

    Apr. 2, 2016
  • rnavaneethan

    Mar. 10, 2016
  • tatis3

    Jan. 12, 2016
  • GilbertGuo

    Nov. 10, 2015

Presented at phpXperts seminar 2009, Bangladesh. A real quick start for jQuery learners. http://tech.groups.yahoo.com/group/phpexperts/message/11888

Views

Total views

27,780

On Slideshare

0

From embeds

0

Number of embeds

8,266

Actions

Downloads

2,294

Shares

0

Comments

0

Likes

66

×