Introducing jQuery


Published on

Published in: Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Introducing jQuery

  1. 1. Wildan Maulana | wildan [at] #1 Introducing jQuery Doc. v. 0.1 - 06/03/09
  2. 2. Why we should use jQuery <script type=&quot;text/javascript&quot;> $(function() { $(&quot;table tr:nth-child(even)&quot;).addClass(&quot;striped&quot;); }); </script> The real power in this jQuery statement comes from the selector, an expression for identifying target elements on a page that allows us to easily identify and grab the elements we need;
  3. 3. What Unobtrusive JavaScript means <ul><li>Unobtrusive JavaScript means behavior is separated from structure, think of it as MVC paradigm for JavaScript </li></ul>
  4. 4. An Example of Unobtrusive JavaScript <button type=&quot;button&quot; onclick=&quot;document.getElementById('xyz').style.color='red';&quot;> Click Me </button> <head> <script type=&quot;text/javascript&quot;> window.onload = function() { document.getElementById('testButton').onclick = makeItRed; }; function makeItRed() { document.getElementById('xyz').style.color = 'red'; } </script> </head> <body> <button type=&quot;button&quot; id=&quot;testButton&quot;>Click Me</button> </body>
  5. 5. The Fundamental Elements and concepts of jQuery <ul><li>At its core, jQuery focuses on retrieving elements from our HTML pages and per-forming operations upon them.
  6. 6. Selector ..selector .., selector ..! </li></ul>
  7. 7. The jQuery Wapper <ul><li>To collect a group of elements, we use the simple syntax : $(selector) or jQuery(selector)
  8. 8. $(&quot;p a&quot;) means , retrieve a group of links nested inside a <p> element </li></ul>
  9. 9. Query Chain <ul><li>$(&quot;div.notLongForThisWorld&quot;).fadeOut();
  10. 10. Query Chain : $(&quot;div.notLongForThisWorld&quot;).fadeOut().addClass(&quot;removed&quot;);
  11. 11. $(&quot;#someElement&quot;).html(&quot;I have added some text to an element&quot;); same with $(&quot;#someElement&quot;)[0].innerHTML = &quot;I have added some text to an element&quot;); </li></ul>
  12. 12. Query Chain - cont <ul><li>$(&quot;div.fillMeIn&quot;).html(&quot;I have added some text to a group of nodes&quot;); same with var elements = $(&quot;div.fillMeIn&quot;); for(i=0;i<elements.length;i++) elements[i].innerHTML = &quot;I have added some text to a group of nodes&quot;; </li></ul>
  13. 13. Advanced Selector <ul><li>This selector is identical to the selector in CSS
  14. 14. $(&quot;p:even&quot;); means selects all even <p> elements
  15. 15. $(&quot;tr:nth-child(1)&quot;); means selects the first row of each table
  16. 16. $(&quot;body > div&quot;); means selects direct <div> children of <body>.
  17. 17. $(&quot;a[href$=pdf]&quot;); means selects link to PDF files
  18. 18. $(&quot;body > div:has(a)&quot;) means selects direct <div> children of <body> - containing links Powerfull stuff right ?!! You can see for full list of selector here : </li></ul>
  19. 19. About $ and jQuery() <ul><li>$ is alias of jQuery()
  20. 20. $.trim(someString); is same with jQuery.trim(someString); </li></ul>
  21. 21. The document ready handler <ul><li>To operate on a page jQuery have to wait until all DOM elements are fully loaded
  22. 22. Traditionally we use the onload handler window.onload = function() { $(&quot;table tr:nth-child(even)&quot;).addClass(&quot;even&quot;); }; But if we are using this method, browser will execute the load function after the DOM tree created and also waits until after all images and external resources are fully loaded and the page is displayed in the browser window </li></ul>
  23. 23. A Better Approach <ul><li>A much better approach would be to wait only until the document structure is fully parsed and the browser has converted the HTML into its DOM tree form before executing the script to apply the rich behaviors.
  24. 24. JQuery Way : $(document).ready(function() { $(&quot;table tr:nth-child( even)&quot;).addClass(&quot;even&quot;); }); or using the shorthand : $(function() { $(&quot;table tr:nth-child(even)&quot;).addClass(&quot;even&quot;); }); </li></ul>
  25. 25. Another use of $() Function <ul><li>Making DOM elements </li></ul><html> <head> <title>Follow me!</title> <script type=&quot;text/javascript&quot; src=&quot;../scripts/jquery-1.2.1.js&quot;> </script> <script type=&quot;text/javascript&quot;> $(function(){ $(&quot;<p>Hi there!</p>&quot;).insertAfter(&quot;#followMe&quot;); }); </script> </head> <body> <p id=&quot;followMe&quot;>Follow me!</p> </body> </html> Ready handler that creates HTML element Existing element tobe followed
  26. 26. Extending jQuery $.fn.disable = function() { return this.each(function() { if (typeof this.disabled != &quot;undefined&quot;) this.disabled = true; }); } So we can use ..... $(&quot;form#myForm input.special&quot;).disable(); $(&quot;form#myForm input.special&quot;).disable().addClass(&quot;moreSpecial&quot;); $.fn.disable means that we’re extending the $ wrapper with a function called disable.
  27. 27. Using jQuery in Conjunction with Other JavaScript libraries <ul><li>If use jQuery with other library such as Prototype, just call : jQuery.noConflict() </li></ul>
  28. 28. Reference <ul><li>Jquery in Action, Bear Bibeault, Yehuda Katz , Manning </li></ul>
  29. 29. Q&A