JQUERY

413 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
413
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JQUERY

  1. 1. Tuesday, July 30, 13
  2. 2. jQuery Tuesday, July 30, 13
  3. 3. jQuery Tuesday, July 30, 13
  4. 4. jQuery JavaScript Library Tuesday, July 30, 13
  5. 5. jQuery JavaScript Library simplifies JavaScript programming Tuesday, July 30, 13
  6. 6. jQuery JavaScript Library simplifies JavaScript programming easy to learn Tuesday, July 30, 13
  7. 7. jQuery write  less,  do  more   JavaScript Library simplifies JavaScript programming easy to learn Tuesday, July 30, 13
  8. 8. J Q U E R Y Tuesday, July 30, 13
  9. 9. WHAT J Q U E R Y Tuesday, July 30, 13
  10. 10. WHAT J Q U E R Y Lightweight Footprint Tuesday, July 30, 13
  11. 11. WHAT J Q U E R Y Lightweight Footprint Only 32kB minified and gzipped. Tuesday, July 30, 13
  12. 12. WHAT J Q U E R Y jQuery is a lightweight, "write less, do more", JavaScript library. Tuesday, July 30, 13
  13. 13. WHAT J Q U E R Y jQuery is a lightweight, "write less, do more", JavaScript library. CSS3 Compliant Tuesday, July 30, 13
  14. 14. WHAT J Q U E R Y jQuery is a lightweight, "write less, do more", JavaScript library. CSS3 Compliant Supports CSS3 selectors to find elements Tuesday, July 30, 13
  15. 15. WHAT J Q U E R Y jQuery is a lightweight, "write less, do more", JavaScript library. Tuesday, July 30, 13
  16. 16. WHAT J Q U E R Y jQuery is a lightweight, "write less, do more", JavaScript library. Cross-Browser Tuesday, July 30, 13
  17. 17. WHAT J Q U E R Y jQuery is a lightweight, "write less, do more", JavaScript library. Cross-Browser IE, Chrome, Firefox, Safari, Tuesday, July 30, 13
  18. 18. WHAT J Q U E R Y jQuery is a lightweight, "write less, do more", JavaScript library. Tuesday, July 30, 13
  19. 19. WHAT J Q U E R Y jQuery is a lightweight, "write less, do more", JavaScript library. jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation. Tuesday, July 30, 13
  20. 20. WHAT J Q U E R Y jQuery is a lightweight, "write less, do more", JavaScript library. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code. jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation. Tuesday, July 30, 13
  21. 21. WHAT J Q U E R Y Tuesday, July 30, 13
  22. 22. WHAT J Q U E R Y jQuery library contains the following features: HTML/DOM manipulation Tuesday, July 30, 13
  23. 23. WHAT J Q U E R Y jQuery library contains the following features: HTML/DOM manipulation CSS manipulation Tuesday, July 30, 13
  24. 24. WHAT J Q U E R Y jQuery library contains the following features: HTML/DOM manipulation CSS manipulation HTML event methods Tuesday, July 30, 13
  25. 25. WHAT J Q U E R Y jQuery library contains the following features: HTML/DOM manipulation CSS manipulation HTML event methods Effects and animations Tuesday, July 30, 13
  26. 26. WHAT J Q U E R Y jQuery library contains the following features: HTML/DOM manipulation CSS manipulation HTML event methods Effects and animations AJAX Tuesday, July 30, 13
  27. 27. WHAT J Q U E R Y jQuery library contains the following features: HTML/DOM manipulation CSS manipulation HTML event methods Effects and animations AJAX Utilities Tuesday, July 30, 13
  28. 28. J Q U E R Y Tuesday, July 30, 13
  29. 29. WHY J Q U E R Y Tuesday, July 30, 13
  30. 30. WHY J Q U E R Y There are a lots of other JavaScript frameworks out there, but jQuery seems to be the most popular, and also the most extendable. Tuesday, July 30, 13
  31. 31. WHY J Q U E R Y Many of the biggest companies on the web use jQuery, such as: There are a lots of other JavaScript frameworks out there, but jQuery seems to be the most popular, and also the most extendable. Tuesday, July 30, 13
  32. 32. WHY J Q U E R Y Many of the biggest companies on the web use jQuery, such as: Google There are a lots of other JavaScript frameworks out there, but jQuery seems to be the most popular, and also the most extendable. Tuesday, July 30, 13
  33. 33. WHY J Q U E R Y Many of the biggest companies on the web use jQuery, such as: Google Microsoft There are a lots of other JavaScript frameworks out there, but jQuery seems to be the most popular, and also the most extendable. Tuesday, July 30, 13
  34. 34. WHY J Q U E R Y Many of the biggest companies on the web use jQuery, such as: Google Microsoft IBM There are a lots of other JavaScript frameworks out there, but jQuery seems to be the most popular, and also the most extendable. Tuesday, July 30, 13
  35. 35. WHY J Q U E R Y Many of the biggest companies on the web use jQuery, such as: Google Microsoft IBM Netflix There are a lots of other JavaScript frameworks out there, but jQuery seems to be the most popular, and also the most extendable. Tuesday, July 30, 13
  36. 36. WHY J Q U E R Y Many of the biggest companies on the web use jQuery, such as: Google Microsoft IBM Netflix There are a lots of other JavaScript frameworks out there, but jQuery seems to be the most popular, and also the most extendable. The jQuery team knows all about cross-browser issues, and they have written this knowledge into the jQuery library. jQuery will run exactly the same in all major browsers, including Internet Explorer 6! Will jQuery work in all? Tuesday, July 30, 13
  37. 37. J Q U E R Y Tuesday, July 30, 13
  38. 38. J Q U E R Y HTML CSS JAVASCRIPT Before you start studying jQuery, you should have a basic knowledge of: What You Should Already Know Tuesday, July 30, 13
  39. 39. J Q U E R Y INSTALL Adding jQuery to Your Web Pages Tuesday, July 30, 13
  40. 40. J Q U E R Y INSTALL Adding jQuery to Your Web Pages There are several ways to start using jQuery on your web site. You can: Download the jQuery library from jQuery.com Tuesday, July 30, 13
  41. 41. J Q U E R Y INSTALL Adding jQuery to Your Web Pages There are several ways to start using jQuery on your web site. You can: Download the jQuery library from jQuery.com There are two versions of jQuery available for downloading: • Production version - this is for your live website because it has been minified and compressed • Development version - this is for testing and development (uncompressed and readable code) Both versions can be downloaded from jQuery.com. Tuesday, July 30, 13
  42. 42. J Q U E R Y INSTALL Adding jQuery to Your Web Pages There are several ways to start using jQuery on your web site. You can: Download the jQuery library from jQuery.com There are two versions of jQuery available for downloading: • Production version - this is for your live website because it has been minified and compressed • Development version - this is for testing and development (uncompressed and readable code) Both versions can be downloaded from jQuery.com. The jQuery library is a single JavaScript file, and you reference it with the HTML <script> tag (notice that the <script> tag should be inside the <head> section): <head> <script src="jquery-1.10.2.min.js"></script> </head> Tuesday, July 30, 13
  43. 43. J Q U E R Y INSTALL Adding jQuery to Your Web Pages Tuesday, July 30, 13
  44. 44. J Q U E R Y INSTALL Include jQuery from a CDN, like Google Adding jQuery to Your Web Pages Tuesday, July 30, 13
  45. 45. J Q U E R Y INSTALL Include jQuery from a CDN, like Google If you don't want to download and host jQuery yourself, Adding jQuery to Your Web Pages Tuesday, July 30, 13
  46. 46. J Q U E R Y INSTALL Include jQuery from a CDN, like Google If you don't want to download and host jQuery yourself, you can include it from a CDN (Content Delivery Network). Adding jQuery to Your Web Pages Tuesday, July 30, 13
  47. 47. J Q U E R Y INSTALL Include jQuery from a CDN, like Google If you don't want to download and host jQuery yourself, you can include it from a CDN (Content Delivery Network). Both Google and Microsoft host jQuery. Adding jQuery to Your Web Pages Tuesday, July 30, 13
  48. 48. J Q U E R Y INSTALL Include jQuery from a CDN, like Google If you don't want to download and host jQuery yourself, you can include it from a CDN (Content Delivery Network). Both Google and Microsoft host jQuery. To use jQuery from Google or Microsoft, use one of the following: Adding jQuery to Your Web Pages Tuesday, July 30, 13
  49. 49. J Q U E R Y INSTALL Include jQuery from a CDN, like Google If you don't want to download and host jQuery yourself, you can include it from a CDN (Content Delivery Network). Both Google and Microsoft host jQuery. To use jQuery from Google or Microsoft, use one of the following: GOOGLE CDN <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/ jquery.min.js"> </script> </head> Adding jQuery to Your Web Pages Tuesday, July 30, 13
  50. 50. J Q U E R Y INSTALL Include jQuery from a CDN, like Google If you don't want to download and host jQuery yourself, you can include it from a CDN (Content Delivery Network). Both Google and Microsoft host jQuery. To use jQuery from Google or Microsoft, use one of the following: GOOGLE CDN <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/ jquery.min.js"> </script> </head> MICROSOFT CDN <head> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"> </script> </head> Adding jQuery to Your Web Pages Tuesday, July 30, 13
  51. 51. J Q U E R Y Tuesday, July 30, 13
  52. 52. J Q U E R Y SYNTAX Tuesday, July 30, 13
  53. 53. J Q U E R Y SYNTAX jQuery syntax is tailor made for selecting HTML elements and performing some action on the element(s). Tuesday, July 30, 13
  54. 54. J Q U E R Y SYNTAX jQuery syntax is tailor made for selecting HTML elements and performing some action on the element(s). Basic syntax is: Tuesday, July 30, 13
  55. 55. J Q U E R Y SYNTAX jQuery syntax is tailor made for selecting HTML elements and performing some action on the element(s). Basic syntax is: (selector).action()$ Tuesday, July 30, 13
  56. 56. J Q U E R Y SYNTAX jQuery syntax is tailor made for selecting HTML elements and performing some action on the element(s). Basic syntax is: $ sign to define/access jQuery (selector).action()$ Tuesday, July 30, 13
  57. 57. J Q U E R Y SYNTAX jQuery syntax is tailor made for selecting HTML elements and performing some action on the element(s). Basic syntax is: $ sign to define/access jQuery (selector) to "query (or find)" HTML elements (selector).action()$ Tuesday, July 30, 13
  58. 58. J Q U E R Y SYNTAX jQuery syntax is tailor made for selecting HTML elements and performing some action on the element(s). Basic syntax is: jQuery action() to be performed on the element(s) $ sign to define/access jQuery (selector) to "query (or find)" HTML elements (selector).action()$ Tuesday, July 30, 13
  59. 59. J Q U E R Y SYNTAX jQuery syntax is tailor made for selecting HTML elements and performing some action on the element(s). Basic syntax is: jQuery action() to be performed on the element(s) $ sign to define/access jQuery (selector) to "query (or find)" HTML elements$(this).hide() - hides the current element. $("p").hide() - hides all <p> elements. $(".test").hide() - hides all elements with class="test". $("#test").hide() - hides the element with id="test". EXAMPLES (selector).action()$ Tuesday, July 30, 13
  60. 60. J Q U E R Y SYNTAX Document Ready Event jQuery syntax is tailor made for selecting HTML elements and performing some action on the element(s). prevent any jQuery code from running before the document is finished loading (is ready). $(document).ready(function(){    // jQuery methods go here... }); Basic syntax is: jQuery action() to be performed on the element(s) $ sign to define/access jQuery (selector) to "query (or find)" HTML elements$(this).hide() - hides the current element. $("p").hide() - hides all <p> elements. $(".test").hide() - hides all elements with class="test". $("#test").hide() - hides the element with id="test". EXAMPLES (selector).action()$ Tuesday, July 30, 13
  61. 61. J Q U E R Y SYNTAX Document Ready Event jQuery syntax is tailor made for selecting HTML elements and performing some action on the element(s). prevent any jQuery code from running before the document is finished loading (is ready). $(document).ready(function(){    // jQuery methods go here... }); Basic syntax is: jQuery action() to be performed on the element(s) $ sign to define/access jQuery (selector) to "query (or find)" HTML elements$(this).hide() - hides the current element. $("p").hide() - hides all <p> elements. $(".test").hide() - hides all elements with class="test". $("#test").hide() - hides the element with id="test". EXAMPLES It is good practice to wait for the document to be fully loaded and ready before working with it. This also allows you to have your JavaScript code before the body of your document, in the head section. Document ready event is easier to understand when reading the code. (selector).action()$ Tuesday, July 30, 13
  62. 62. J Q U E R Y Tuesday, July 30, 13
  63. 63. J Q U E R Y SELECTORS Tuesday, July 30, 13
  64. 64. J Q U E R Y SELECTORS allows you to select and manipulate HTML element(s). Tuesday, July 30, 13
  65. 65. J Q U E R Y SELECTORS allows you to select and manipulate HTML element(s). used to "find" (or select) HTML elements based on their id, classes, types, attributes, Tuesday, July 30, 13
  66. 66. J Q U E R Y SELECTORS allows you to select and manipulate HTML element(s). used to "find" (or select) HTML elements based on their id, classes, types, attributes, values of attributes and much more. Tuesday, July 30, 13
  67. 67. J Q U E R Y SELECTORS allows you to select and manipulate HTML element(s). used to "find" (or select) HTML elements based on their id, classes, types, attributes, values of attributes and much more. based on the existing CSS Selectors, and in addition, it has some own custom selectors. Tuesday, July 30, 13
  68. 68. J Q U E R Y SELECTORS allows you to select and manipulate HTML element(s). used to "find" (or select) HTML elements based on their id, classes, types, attributes, values of attributes and much more. based on the existing CSS Selectors, and in addition, it has some own custom selectors. All selectors in jQuery start with the dollar sign and parentheses: $(). Tuesday, July 30, 13
  69. 69. J Q U E R Y SELECTORS allows you to select and manipulate HTML element(s). used to "find" (or select) HTML elements based on their id, classes, types, attributes, values of attributes and much more. based on the existing CSS Selectors, and in addition, it has some own custom selectors. All selectors in jQuery start with the dollar sign and parentheses: $(). SELECTORS Tuesday, July 30, 13
  70. 70. J Q U E R Y SELECTORS allows you to select and manipulate HTML element(s). used to "find" (or select) HTML elements based on their id, classes, types, attributes, values of attributes and much more. based on the existing CSS Selectors, and in addition, it has some own custom selectors. All selectors in jQuery start with the dollar sign and parentheses: $(). SELECTORS EXAMPLE: Tuesday, July 30, 13
  71. 71. J Q U E R Y SELECTORS allows you to select and manipulate HTML element(s). used to "find" (or select) HTML elements based on their id, classes, types, attributes, values of attributes and much more. based on the existing CSS Selectors, and in addition, it has some own custom selectors. All selectors in jQuery start with the dollar sign and parentheses: $(). SELECTORS When a user clicks on a button, selected elements will be hidden: EXAMPLE: Tuesday, July 30, 13
  72. 72. J Q U E R Y SELECTORS #ID SELECTOR <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p id="test">This is another paragraph.</p> <button>Click me</button> </body> </html> allows you to select and manipulate HTML element(s). used to "find" (or select) HTML elements based on their id, classes, types, attributes, values of attributes and much more. based on the existing CSS Selectors, and in addition, it has some own custom selectors. All selectors in jQuery start with the dollar sign and parentheses: $(). SELECTORS When a user clicks on a button, selected elements will be hidden: EXAMPLE: Tuesday, July 30, 13
  73. 73. J Q U E R Y SELECTORS #ID SELECTOR <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p id="test">This is another paragraph.</p> <button>Click me</button> </body> </html> allows you to select and manipulate HTML element(s). used to "find" (or select) HTML elements based on their id, classes, types, attributes, values of attributes and much more. based on the existing CSS Selectors, and in addition, it has some own custom selectors. All selectors in jQuery start with the dollar sign and parentheses: $(). When a user clicks on a button, selected elements will be hidden: EXAMPLE: Tuesday, July 30, 13
  74. 74. J Q U E R Y SELECTORS #ID SELECTOR <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p id="test">This is another paragraph.</p> <button>Click me</button> </body> </html> allows you to select and manipulate HTML element(s). used to "find" (or select) HTML elements based on their id, classes, types, attributes, values of attributes and much more. based on the existing CSS Selectors, and in addition, it has some own custom selectors. All selectors in jQuery start with the dollar sign and parentheses: $(). When a user clicks on a button, selected elements will be hidden: EXAMPLE: Tuesday, July 30, 13
  75. 75. J Q U E R Y SELECTORS #ID SELECTOR <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p id="test">This is another paragraph.</p> <button>Click me</button> </body> </html> allows you to select and manipulate HTML element(s). used to "find" (or select) HTML elements based on their id, classes, types, attributes, values of attributes and much more. based on the existing CSS Selectors, and in addition, it has some own custom selectors. All selectors in jQuery start with the dollar sign and parentheses: $(). When a user clicks on a button, selected elements will be hidden: EXAMPLE: Tuesday, July 30, 13
  76. 76. J Q U E R Y Tuesday, July 30, 13
  77. 77. J Q U E R Y EVENTS Tuesday, July 30, 13
  78. 78. J Q U E R Y EVENTS All the different visitor's actions that a web page can respond to are called events. Presents the precise moment when something happens. The term "fires" is often used with events. Example: "The keypress event fires the moment you press a key". Tuesday, July 30, 13
  79. 79. J Q U E R Y EVENTS All the different visitor's actions that a web page can respond to are called events. Presents the precise moment when something happens. The term "fires" is often used with events. Example: "The keypress event fires the moment you press a key". Here are some common DOM events:  Tuesday, July 30, 13
  80. 80. J Q U E R Y EVENTS All the different visitor's actions that a web page can respond to are called events. Presents the precise moment when something happens. The term "fires" is often used with events. Example: "The keypress event fires the moment you press a key". jQuery Syntax For Event Methods Here are some common DOM events:  Tuesday, July 30, 13
  81. 81. J Q U E R Y EVENTS All the different visitor's actions that a web page can respond to are called events. Presents the precise moment when something happens. The term "fires" is often used with events. Example: "The keypress event fires the moment you press a key". jQuery Syntax For Event Methods Here are some common DOM events:  To assign a click event to all paragraphs on a page, you can do this: Tuesday, July 30, 13
  82. 82. J Q U E R Y EVENTS All the different visitor's actions that a web page can respond to are called events. Presents the precise moment when something happens. The term "fires" is often used with events. Example: "The keypress event fires the moment you press a key". jQuery Syntax For Event Methods Here are some common DOM events:  To assign a click event to all paragraphs on a page, you can do this: $("p").click(); Tuesday, July 30, 13
  83. 83. J Q U E R Y EVENTS All the different visitor's actions that a web page can respond to are called events. Presents the precise moment when something happens. The term "fires" is often used with events. Example: "The keypress event fires the moment you press a key". jQuery Syntax For Event Methods Here are some common DOM events:  To assign a click event to all paragraphs on a page, you can do this: $("p").click(); The next step is to define what should happen when the event fires. You must pass a function to the event: Tuesday, July 30, 13
  84. 84. J Q U E R Y EVENTS All the different visitor's actions that a web page can respond to are called events. Presents the precise moment when something happens. The term "fires" is often used with events. Example: "The keypress event fires the moment you press a key". jQuery Syntax For Event Methods Here are some common DOM events:  To assign a click event to all paragraphs on a page, you can do this: $("p").click(); The next step is to define what should happen when the event fires. You must pass a function to the event: $("p").click(function(){ // action goes here!! }); Tuesday, July 30, 13
  85. 85. J Q U E R Y EVENTS Tuesday, July 30, 13
  86. 86. J Q U E R Y EVENTS Commonly Used jQuery Event Methods Tuesday, July 30, 13
  87. 87. J Q U E R Y EVENTS Commonly Used jQuery Event Methods click()  Tuesday, July 30, 13
  88. 88. J Q U E R Y EVENTS Commonly Used jQuery Event Methods click()  attaches an event handler function to an HTML element. The function is executed when the user clicks on the HTML element. Tuesday, July 30, 13
  89. 89. J Q U E R Y EVENTS Commonly Used jQuery Event Methods click()  attaches an event handler function to an HTML element. The function is executed when the user clicks on the HTML element. $("p").click(function(){ $(this).hide(); }); Tuesday, July 30, 13
  90. 90. J Q U E R Y EVENTS Commonly Used jQuery Event Methods click()  attaches an event handler function to an HTML element. The function is executed when the user clicks on the HTML element. $("p").click(function(){ $(this).hide(); }); mouseenter()  Tuesday, July 30, 13
  91. 91. J Q U E R Y EVENTS Commonly Used jQuery Event Methods click()  attaches an event handler function to an HTML element. The function is executed when the user clicks on the HTML element. $("p").click(function(){ $(this).hide(); }); function is executed when the mouse pointer enters the HTML element: mouseenter()  Tuesday, July 30, 13
  92. 92. J Q U E R Y EVENTS Commonly Used jQuery Event Methods click()  attaches an event handler function to an HTML element. The function is executed when the user clicks on the HTML element. $("p").click(function(){ $(this).hide(); }); function is executed when the mouse pointer enters the HTML element: $("#p1").mouseenter(function(){ alert("You entered p1!"); }); mouseenter()  Tuesday, July 30, 13
  93. 93. J Q U E R Y EVENTS Commonly Used jQuery Event Methods click()  attaches an event handler function to an HTML element. The function is executed when the user clicks on the HTML element. $("p").click(function(){ $(this).hide(); }); function is executed when the mouse pointer enters the HTML element: $("#p1").mouseenter(function(){ alert("You entered p1!"); }); mouseenter()  mousedown()  Tuesday, July 30, 13
  94. 94. J Q U E R Y EVENTS Commonly Used jQuery Event Methods click()  attaches an event handler function to an HTML element. The function is executed when the user clicks on the HTML element. $("p").click(function(){ $(this).hide(); }); function is executed when the mouse pointer enters the HTML element: $("#p1").mouseenter(function(){ alert("You entered p1!"); }); mouseenter()  function is executed, when the left mouse button is pressed down, while the mouse is over the HTML element: mousedown()  Tuesday, July 30, 13
  95. 95. J Q U E R Y EVENTS Commonly Used jQuery Event Methods click()  attaches an event handler function to an HTML element. The function is executed when the user clicks on the HTML element. $("p").click(function(){ $(this).hide(); }); function is executed when the mouse pointer enters the HTML element: $("#p1").mouseenter(function(){ alert("You entered p1!"); }); mouseenter()  function is executed, when the left mouse button is pressed down, while the mouse is over the HTML element: $("#p1").mousedown(function(){ alert("Mouse down over p1!"); }); mousedown()  Tuesday, July 30, 13
  96. 96. J Q U E R Y EVENTS Commonly Used jQuery Event Methods Tuesday, July 30, 13
  97. 97. J Q U E R Y EVENTS Commonly Used jQuery Event Methods mouseup()  Tuesday, July 30, 13
  98. 98. J Q U E R Y EVENTS Commonly Used jQuery Event Methods mouseup()  function is executed, when the left mouse button is released, while the mouse is over the HTML element: Tuesday, July 30, 13
  99. 99. J Q U E R Y EVENTS Commonly Used jQuery Event Methods mouseup()  function is executed, when the left mouse button is released, while the mouse is over the HTML element: $("#p1").mouseup(function(){ alert("Mouse up over p1!"); }); Tuesday, July 30, 13
  100. 100. J Q U E R Y EVENTS Commonly Used jQuery Event Methods mouseup()  function is executed, when the left mouse button is released, while the mouse is over the HTML element: $("#p1").mouseup(function(){ alert("Mouse up over p1!"); }); hover()  Tuesday, July 30, 13
  101. 101. J Q U E R Y EVENTS Commonly Used jQuery Event Methods mouseup()  function is executed, when the left mouse button is released, while the mouse is over the HTML element: $("#p1").mouseup(function(){ alert("Mouse up over p1!"); }); first function is executed when the mouse enters the HTML element, and the second function is executed when the mouse leaves the HTML element: hover()  Tuesday, July 30, 13
  102. 102. J Q U E R Y EVENTS Commonly Used jQuery Event Methods mouseup()  function is executed, when the left mouse button is released, while the mouse is over the HTML element: $("#p1").mouseup(function(){ alert("Mouse up over p1!"); }); first function is executed when the mouse enters the HTML element, and the second function is executed when the mouse leaves the HTML element: $("#p1").hover(function(){ alert("You entered p1!"); }, function(){ alert("Bye! You now leave p1!"); }); hover()  Tuesday, July 30, 13
  103. 103. J Q U E R Y EVENTS Commonly Used jQuery Event Methods mouseup()  function is executed, when the left mouse button is released, while the mouse is over the HTML element: $("#p1").mouseup(function(){ alert("Mouse up over p1!"); }); first function is executed when the mouse enters the HTML element, and the second function is executed when the mouse leaves the HTML element: $("#p1").hover(function(){ alert("You entered p1!"); }, function(){ alert("Bye! You now leave p1!"); }); hover()  Tuesday, July 30, 13
  104. 104. J Q U E R Y EVENTS Commonly Used jQuery Event Methods mouseup()  function is executed, when the left mouse button is released, while the mouse is over the HTML element: $("#p1").mouseup(function(){ alert("Mouse up over p1!"); }); first function is executed when the mouse enters the HTML element, and the second function is executed when the mouse leaves the HTML element: $("#p1").hover(function(){ alert("You entered p1!"); }, function(){ alert("Bye! You now leave p1!"); }); hover()  Tuesday, July 30, 13
  105. 105. J Q U E R Y EVENTS Commonly Used jQuery Event Methods mouseup()  function is executed, when the left mouse button is released, while the mouse is over the HTML element: $("#p1").mouseup(function(){ alert("Mouse up over p1!"); }); first function is executed when the mouse enters the HTML element, and the second function is executed when the mouse leaves the HTML element: $("#p1").hover(function(){ alert("You entered p1!"); }, function(){ alert("Bye! You now leave p1!"); }); hover()  dblclick()  Tuesday, July 30, 13
  106. 106. J Q U E R Y EVENTS Commonly Used jQuery Event Methods mouseup()  function is executed, when the left mouse button is released, while the mouse is over the HTML element: $("#p1").mouseup(function(){ alert("Mouse up over p1!"); }); first function is executed when the mouse enters the HTML element, and the second function is executed when the mouse leaves the HTML element: $("#p1").hover(function(){ alert("You entered p1!"); }, function(){ alert("Bye! You now leave p1!"); }); hover()  function is executed when the user double- clicks on the HTML element: dblclick()  Tuesday, July 30, 13
  107. 107. J Q U E R Y EVENTS Commonly Used jQuery Event Methods mouseup()  function is executed, when the left mouse button is released, while the mouse is over the HTML element: $("#p1").mouseup(function(){ alert("Mouse up over p1!"); }); first function is executed when the mouse enters the HTML element, and the second function is executed when the mouse leaves the HTML element: $("#p1").hover(function(){ alert("You entered p1!"); }, function(){ alert("Bye! You now leave p1!"); }); hover()  function is executed when the user double- clicks on the HTML element: $("p").dblclick(function(){ $(this).hide(); }); dblclick()  Tuesday, July 30, 13
  108. 108. J Q U E R Y EVENTS Commonly Used jQuery Event Methods mouseup()  function is executed, when the left mouse button is released, while the mouse is over the HTML element: $("#p1").mouseup(function(){ alert("Mouse up over p1!"); }); first function is executed when the mouse enters the HTML element, and the second function is executed when the mouse leaves the HTML element: $("#p1").hover(function(){ alert("You entered p1!"); }, function(){ alert("Bye! You now leave p1!"); }); hover()  function is executed when the user double- clicks on the HTML element: $("p").dblclick(function(){ $(this).hide(); }); dblclick()  Tuesday, July 30, 13
  109. 109. J Q U E R Y EVENTS Commonly Used jQuery Event Methods mouseup()  function is executed, when the left mouse button is released, while the mouse is over the HTML element: $("#p1").mouseup(function(){ alert("Mouse up over p1!"); }); first function is executed when the mouse enters the HTML element, and the second function is executed when the mouse leaves the HTML element: $("#p1").hover(function(){ alert("You entered p1!"); }, function(){ alert("Bye! You now leave p1!"); }); hover()  function is executed when the user double- clicks on the HTML element: $("p").dblclick(function(){ $(this).hide(); }); dblclick()  Tuesday, July 30, 13
  110. 110. J Q U E R Y Tuesday, July 30, 13
  111. 111. J Q U E R Y EFFECTS Tuesday, July 30, 13
  112. 112. J Q U E R Y EFFECTS HIDE AND SHOW Tuesday, July 30, 13
  113. 113. J Q U E R Y EFFECTS SYNTAX: HIDE AND SHOW Tuesday, July 30, 13
  114. 114. J Q U E R Y EFFECTS SYNTAX: HIDE AND SHOW $(selector).hide(speed,callback); $(selector).show(speed,callback); optional speed parameter specifies the speed of the hiding/showing, and can take the following values: "slow", "fast", or milliseconds. optional callback parameter is a function to be executed after the hide() or show() method completes Tuesday, July 30, 13
  115. 115. J Q U E R Y EFFECTS SYNTAX: HIDE AND SHOW $(selector).hide(speed,callback); $(selector).show(speed,callback); optional speed parameter specifies the speed of the hiding/showing, and can take the following values: "slow", "fast", or milliseconds. optional callback parameter is a function to be executed after the hide() or show() method completes TOGGLE Tuesday, July 30, 13
  116. 116. J Q U E R Y EFFECTS SYNTAX: HIDE AND SHOW $(selector).hide(speed,callback); $(selector).show(speed,callback); optional speed parameter specifies the speed of the hiding/showing, and can take the following values: "slow", "fast", or milliseconds. optional callback parameter is a function to be executed after the hide() or show() method completes TOGGLE SYNTAX: Tuesday, July 30, 13
  117. 117. J Q U E R Y EFFECTS SYNTAX: HIDE AND SHOW $(selector).hide(speed,callback); $(selector).show(speed,callback); optional speed parameter specifies the speed of the hiding/showing, and can take the following values: "slow", "fast", or milliseconds. optional callback parameter is a function to be executed after the hide() or show() method completes TOGGLE SYNTAX: $(selector).toggle(speed,callback); Tuesday, July 30, 13
  118. 118. J Q U E R Y EFFECTS SYNTAX: HIDE AND SHOW $(selector).hide(speed,callback); $(selector).show(speed,callback); optional speed parameter specifies the speed of the hiding/showing, and can take the following values: "slow", "fast", or milliseconds. optional callback parameter is a function to be executed after the hide() or show() method completes TOGGLE SYNTAX: $(selector).toggle(speed,callback); optional speed parameter can take the following values: "slow", "fast", or milliseconds. Tuesday, July 30, 13
  119. 119. J Q U E R Y EFFECTS SYNTAX: HIDE AND SHOW $(selector).hide(speed,callback); $(selector).show(speed,callback); optional speed parameter specifies the speed of the hiding/showing, and can take the following values: "slow", "fast", or milliseconds. optional callback parameter is a function to be executed after the hide() or show() method completes TOGGLE SYNTAX: $(selector).toggle(speed,callback); optional speed parameter can take the following values: "slow", "fast", or milliseconds. optional callback parameter is a function to be executed after toggle() completes. Tuesday, July 30, 13
  120. 120. J Q U E R Y EFFECTS Tuesday, July 30, 13
  121. 121. J Q U E R Y EFFECTS FADING Tuesday, July 30, 13
  122. 122. J Q U E R Y EFFECTS FADING fadeIn() Tuesday, July 30, 13
  123. 123. J Q U E R Y EFFECTS SYNTAX: FADING $(selector).fadeIn(speed,callback); fadeIn() Tuesday, July 30, 13
  124. 124. J Q U E R Y EFFECTS SYNTAX: FADING $(selector).fadeIn(speed,callback); fadeIn() fadeOut() Tuesday, July 30, 13
  125. 125. J Q U E R Y EFFECTS SYNTAX: FADING $(selector).fadeIn(speed,callback); fadeIn() SYNTAX: $(selector).fadeOut(speed,callback); fadeOut() Tuesday, July 30, 13
  126. 126. J Q U E R Y EFFECTS SYNTAX: FADING $(selector).fadeIn(speed,callback); fadeIn() SYNTAX: $(selector).fadeOut(speed,callback); fadeOut() fadeToggle() Tuesday, July 30, 13
  127. 127. J Q U E R Y EFFECTS SYNTAX: FADING $(selector).fadeIn(speed,callback); fadeIn() SYNTAX: $(selector).fadeOut(speed,callback); fadeOut() SYNTAX: $(selector).fadeToggle(speed,callback); fadeToggle() Tuesday, July 30, 13
  128. 128. J Q U E R Y EFFECTS SYNTAX: FADING $(selector).fadeIn(speed,callback); fadeIn() SYNTAX: $(selector).fadeOut(speed,callback); fadeOut() SYNTAX: $(selector).fadeToggle(speed,callback); fadeToggle() fadeTo() Tuesday, July 30, 13
  129. 129. J Q U E R Y EFFECTS SYNTAX: FADING $(selector).fadeIn(speed,callback); optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. optional required opacity parameter in the fadeTo() method specifies fading to a given opacity (value between 0 and 1). fadeIn() SYNTAX: $(selector).fadeOut(speed,callback); fadeOut() SYNTAX: $(selector).fadeToggle(speed,callback); fadeToggle() SYNTAX: $(selector).fadeOut(speed,opacity,callback); fadeTo() Tuesday, July 30, 13
  130. 130. J Q U E R Y EFFECTS SYNTAX: FADING $(selector).fadeIn(speed,callback); optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. optional required opacity parameter in the fadeTo() method specifies fading to a given opacity (value between 0 and 1). fadeIn() SYNTAX: $(selector).fadeOut(speed,callback); fadeOut() SYNTAX: $(selector).fadeToggle(speed,callback); fadeToggle() SYNTAX: $(selector).fadeOut(speed,opacity,callback); fadeTo() optional callback parameter is a function to be executed after the function completes. Tuesday, July 30, 13
  131. 131. J Q U E R Y EFFECTS SYNTAX: FADING $(selector).fadeIn(speed,callback); optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. optional required opacity parameter in the fadeTo() method specifies fading to a given opacity (value between 0 and 1). fadeIn() SYNTAX: $(selector).fadeOut(speed,callback); fadeOut() SYNTAX: $(selector).fadeToggle(speed,callback); fadeToggle() SYNTAX: $(selector).fadeOut(speed,opacity,callback); fadeTo() optional callback parameter is a function to be executed after the function completes. SLIDE Tuesday, July 30, 13
  132. 132. J Q U E R Y EFFECTS SYNTAX: FADING $(selector).fadeIn(speed,callback); optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. optional required opacity parameter in the fadeTo() method specifies fading to a given opacity (value between 0 and 1). fadeIn() SYNTAX: $(selector).fadeOut(speed,callback); fadeOut() SYNTAX: $(selector).fadeToggle(speed,callback); fadeToggle() SYNTAX: $(selector).fadeOut(speed,opacity,callback); fadeTo() optional callback parameter is a function to be executed after the function completes. SLIDE slideDown() Tuesday, July 30, 13
  133. 133. J Q U E R Y EFFECTS SYNTAX: FADING $(selector).fadeIn(speed,callback); optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. optional required opacity parameter in the fadeTo() method specifies fading to a given opacity (value between 0 and 1). fadeIn() SYNTAX: $(selector).fadeOut(speed,callback); fadeOut() SYNTAX: $(selector).fadeToggle(speed,callback); fadeToggle() SYNTAX: $(selector).fadeOut(speed,opacity,callback); fadeTo() optional callback parameter is a function to be executed after the function completes. SLIDE SYNTAX: $(selector).slideDown(speed,callback); slideDown() Tuesday, July 30, 13
  134. 134. J Q U E R Y EFFECTS SYNTAX: FADING $(selector).fadeIn(speed,callback); optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. optional required opacity parameter in the fadeTo() method specifies fading to a given opacity (value between 0 and 1). fadeIn() SYNTAX: $(selector).fadeOut(speed,callback); fadeOut() SYNTAX: $(selector).fadeToggle(speed,callback); fadeToggle() SYNTAX: $(selector).fadeOut(speed,opacity,callback); fadeTo() optional callback parameter is a function to be executed after the function completes. SLIDE SYNTAX: $(selector).slideDown(speed,callback); slideDown() slideUp() Tuesday, July 30, 13
  135. 135. J Q U E R Y EFFECTS SYNTAX: FADING $(selector).fadeIn(speed,callback); optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. optional required opacity parameter in the fadeTo() method specifies fading to a given opacity (value between 0 and 1). fadeIn() SYNTAX: $(selector).fadeOut(speed,callback); fadeOut() SYNTAX: $(selector).fadeToggle(speed,callback); fadeToggle() SYNTAX: $(selector).fadeOut(speed,opacity,callback); fadeTo() optional callback parameter is a function to be executed after the function completes. SLIDE SYNTAX: $(selector).slideDown(speed,callback); slideDown() SYNTAX: $(selector).slideUp(speed,callback); slideUp() Tuesday, July 30, 13
  136. 136. J Q U E R Y EFFECTS SYNTAX: FADING $(selector).fadeIn(speed,callback); optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. optional required opacity parameter in the fadeTo() method specifies fading to a given opacity (value between 0 and 1). fadeIn() SYNTAX: $(selector).fadeOut(speed,callback); fadeOut() SYNTAX: $(selector).fadeToggle(speed,callback); fadeToggle() SYNTAX: $(selector).fadeOut(speed,opacity,callback); fadeTo() optional callback parameter is a function to be executed after the function completes. SLIDE SYNTAX: $(selector).slideDown(speed,callback); slideDown() SYNTAX: $(selector).slideUp(speed,callback); slideUp() SlideToggle() Tuesday, July 30, 13
  137. 137. J Q U E R Y EFFECTS SYNTAX: FADING $(selector).fadeIn(speed,callback); optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. optional required opacity parameter in the fadeTo() method specifies fading to a given opacity (value between 0 and 1). fadeIn() SYNTAX: $(selector).fadeOut(speed,callback); fadeOut() SYNTAX: $(selector).fadeToggle(speed,callback); fadeToggle() SYNTAX: $(selector).fadeOut(speed,opacity,callback); fadeTo() optional callback parameter is a function to be executed after the function completes. SLIDE SYNTAX: $(selector).slideDown(speed,callback); slideDown() SYNTAX: $(selector).slideUp(speed,callback); slideUp() SYNTAX: $(selector).slideToggle(speed,callback); SlideToggle() Tuesday, July 30, 13
  138. 138. J Q U E R Y EFFECTS Tuesday, July 30, 13
  139. 139. J Q U E R Y EFFECTS ANIMATIONS Tuesday, July 30, 13
  140. 140. J Q U E R Y EFFECTS SYNTAX: ANIMATIONS $(selector).animate({params},speed,callback); required params parameter defines the CSS properties to be animated. optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. Tuesday, July 30, 13
  141. 141. J Q U E R Y EFFECTS SYNTAX: ANIMATIONS $(selector).animate({params},speed,callback); required params parameter defines the CSS properties to be animated. optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. optional callback parameter is a function to be executed after the animation completes. Tuesday, July 30, 13
  142. 142. J Q U E R Y EFFECTS SYNTAX: ANIMATIONS $(selector).animate({params},speed,callback); required params parameter defines the CSS properties to be animated. optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. optional callback parameter is a function to be executed after the animation completes. EXAMPLES: $("button").click(function(){ $("div").animate({left:'250px'}); }); Tuesday, July 30, 13
  143. 143. J Q U E R Y EFFECTS SYNTAX: ANIMATIONS $(selector).animate({params},speed,callback); required params parameter defines the CSS properties to be animated. optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. optional callback parameter is a function to be executed after the animation completes. EXAMPLES: $("button").click(function(){ $("div").animate({left:'250px'}); }); $("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); }); Tuesday, July 30, 13
  144. 144. J Q U E R Y EFFECTS SYNTAX: ANIMATIONS $(selector).animate({params},speed,callback); required params parameter defines the CSS properties to be animated. optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. optional callback parameter is a function to be executed after the animation completes. EXAMPLES: $("button").click(function(){ $("div").animate({left:'250px'}); }); $("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); }); Tuesday, July 30, 13
  145. 145. J Q U E R Y EFFECTS SYNTAX: ANIMATIONS $(selector).animate({params},speed,callback); required params parameter defines the CSS properties to be animated. optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. optional callback parameter is a function to be executed after the animation completes. $("button").click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); }); animate() - Using Relative Values EXAMPLES: $("button").click(function(){ $("div").animate({left:'250px'}); }); $("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); }); Tuesday, July 30, 13
  146. 146. J Q U E R Y EFFECTS SYNTAX: ANIMATIONS $(selector).animate({params},speed,callback); required params parameter defines the CSS properties to be animated. optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. optional callback parameter is a function to be executed after the animation completes. $("button").click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); }); animate() - Using Relative Values EXAMPLES: $("button").click(function(){ $("div").animate({left:'250px'}); }); $("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); }); animate() - Using Pre-defined Values $("button").click(function(){ $("div").animate({ height:'toggle' }); }); Tuesday, July 30, 13
  147. 147. J Q U E R Y EFFECTS SYNTAX: ANIMATIONS $(selector).animate({params},speed,callback); required params parameter defines the CSS properties to be animated. optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. optional callback parameter is a function to be executed after the animation completes. $("button").click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); }); animate() - Using Relative Values EXAMPLES: $("button").click(function(){ $("div").animate({left:'250px'}); }); $("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); }); animate() - Using Pre-defined Values $("button").click(function(){ $("div").animate({ height:'toggle' }); }); animate() - Using Queue Functionality $("button").click(function(){ var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow"); }); Tuesday, July 30, 13
  148. 148. J Q U E R Y EFFECTS SYNTAX: ANIMATIONS $(selector).animate({params},speed,callback); required params parameter defines the CSS properties to be animated. optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. optional callback parameter is a function to be executed after the animation completes. $("button").click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); }); animate() - Using Relative Values EXAMPLES: $("button").click(function(){ $("div").animate({left:'250px'}); }); $("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); }); animate() - Using Pre-defined Values $("button").click(function(){ $("div").animate({ height:'toggle' }); }); animate() - Using Queue Functionality $("button").click(function(){ var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow"); }); This means that if you write multiple animate() calls after each other, jQuery creates an "internal" queue with these method calls. Then it runs the animate calls ONE by ONE. Tuesday, July 30, 13
  149. 149. J Q U E R Y EFFECTS SYNTAX: ANIMATIONS $(selector).animate({params},speed,callback); required params parameter defines the CSS properties to be animated. optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. optional callback parameter is a function to be executed after the animation completes. $("button").click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); }); animate() - Using Relative Values EXAMPLES: $("button").click(function(){ $("div").animate({left:'250px'}); }); $("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); }); animate() - Using Pre-defined Values $("button").click(function(){ $("div").animate({ height:'toggle' }); }); animate() - Using Queue Functionality $("button").click(function(){ var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow"); }); This means that if you write multiple animate() calls after each other, jQuery creates an "internal" queue with these method calls. Then it runs the animate calls ONE by ONE. stop() Tuesday, July 30, 13
  150. 150. J Q U E R Y EFFECTS SYNTAX: ANIMATIONS $(selector).animate({params},speed,callback); required params parameter defines the CSS properties to be animated. optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. optional callback parameter is a function to be executed after the animation completes. $("button").click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); }); animate() - Using Relative Values EXAMPLES: $("button").click(function(){ $("div").animate({left:'250px'}); }); $("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); }); animate() - Using Pre-defined Values $("button").click(function(){ $("div").animate({ height:'toggle' }); }); animate() - Using Queue Functionality $("button").click(function(){ var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow"); }); This means that if you write multiple animate() calls after each other, jQuery creates an "internal" queue with these method calls. Then it runs the animate calls ONE by ONE. stop() SYNTAX: $(selector).stop(stopAll,goToEnd); The optional stopAll parameter specifies whether also the animation queue should be cleared or not. Default is false, which means that only the active animation will be stopped, allowing any queued animations to be performed afterwards. The optional goToEnd parameter specifies whether or not to complete the current animation immediately. Default is false. Tuesday, July 30, 13
  151. 151. J Q U E R Y EFFECTS Tuesday, July 30, 13
  152. 152. J Q U E R Y EFFECTS CHAINING Chaining allows us to run multiple jQuery methods (on the same element) within a single statement. Tuesday, July 30, 13
  153. 153. J Q U E R Y EFFECTS CHAINING Chaining allows us to run multiple jQuery methods (on the same element) within a single statement. EXAMPLES: $("#p1").css("color","red").slideUp(2000).slideDown(2000); Tuesday, July 30, 13
  154. 154. J Q U E R Y EFFECTS CHAINING Chaining allows us to run multiple jQuery methods (on the same element) within a single statement. EXAMPLES: $("#p1").css("color","red").slideUp(2000).slideDown(2000); OR $("#p1").css("color","red") .slideUp(2000) .slideDown(2000); Tuesday, July 30, 13
  155. 155. J Q U E R Y EFFECTS CHAINING Chaining allows us to run multiple jQuery methods (on the same element) within a single statement. EXAMPLES: $("#p1").css("color","red").slideUp(2000).slideDown(2000); OR $("#p1").css("color","red") .slideUp(2000) .slideDown(2000); Tip: This way, browsers do not have to find the same element(s) more than once. Tuesday, July 30, 13
  156. 156. J Q U E R Y Tuesday, July 30, 13
  157. 157. J Q U E R Y HTML Tuesday, July 30, 13
  158. 158. J Q U E R Y HTML GET Tuesday, July 30, 13
  159. 159. J Q U E R Y HTML GET Three simple, but useful, jQuery methods for DOM manipulation are: • text() - Sets or returns the text content of selected elements • html() - Sets or returns the content of selected elements (including HTML markup) • val() - Sets or returns the value of form fields Tuesday, July 30, 13
  160. 160. J Q U E R Y HTML GET EXAMPLES: $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); }); Three simple, but useful, jQuery methods for DOM manipulation are: • text() - Sets or returns the text content of selected elements • html() - Sets or returns the content of selected elements (including HTML markup) • val() - Sets or returns the value of form fields Tuesday, July 30, 13
  161. 161. J Q U E R Y HTML GET EXAMPLES: $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); }); Three simple, but useful, jQuery methods for DOM manipulation are: • text() - Sets or returns the text content of selected elements • html() - Sets or returns the content of selected elements (including HTML markup) • val() - Sets or returns the value of form fields Get Attributes - attr() $("button").click(function(){ alert($("#w3s").attr("href")); }); Tuesday, July 30, 13
  162. 162. J Q U E R Y HTML GET EXAMPLES: $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); }); Three simple, but useful, jQuery methods for DOM manipulation are: • text() - Sets or returns the text content of selected elements • html() - Sets or returns the content of selected elements (including HTML markup) • val() - Sets or returns the value of form fields Get Attributes - attr() $("button").click(function(){ alert($("#w3s").attr("href")); }); SET Tuesday, July 30, 13
  163. 163. J Q U E R Y HTML GET EXAMPLES: $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); }); Three simple, but useful, jQuery methods for DOM manipulation are: • text() - Sets or returns the text content of selected elements • html() - Sets or returns the content of selected elements (including HTML markup) • val() - Sets or returns the value of form fields Get Attributes - attr() $("button").click(function(){ alert($("#w3s").attr("href")); }); SET $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>"); }); $("#btn3").click(function(){ $("#test3").val("Dolly Duck"); }); Tuesday, July 30, 13
  164. 164. J Q U E R Y HTML Tuesday, July 30, 13
  165. 165. J Q U E R Y HTML REMOVE Tuesday, July 30, 13
  166. 166. J Q U E R Y HTML REMOVE remove() - Removes the selected element (and its child elements) Tuesday, July 30, 13
  167. 167. J Q U E R Y HTML REMOVE EXAMPLE $("#div1").remove(); remove() - Removes the selected element (and its child elements) Tuesday, July 30, 13
  168. 168. J Q U E R Y HTML REMOVE EXAMPLE $("#div1").remove(); EMPTY remove() - Removes the selected element (and its child elements) Tuesday, July 30, 13
  169. 169. J Q U E R Y HTML REMOVE EXAMPLE $("#div1").remove(); EMPTY remove() - Removes the selected element (and its child elements) empty() - Removes the child elements from the selected element Tuesday, July 30, 13
  170. 170. J Q U E R Y HTML REMOVE EXAMPLE $("#div1").remove(); EMPTY remove() - Removes the selected element (and its child elements) empty() - Removes the child elements from the selected element EXAMPLE $("#div1").remove(); Tuesday, July 30, 13
  171. 171. Tuesday, July 30, 13
  172. 172. SOURCES: Tuesday, July 30, 13
  173. 173. SOURCES: • www.w3schools.com/jquery • www.jquery.com Tuesday, July 30, 13
  174. 174. Tuesday, July 30, 13
  175. 175. created by: Eunice Tanamor Tuesday, July 30, 13

×