Your SlideShare is downloading. ×
0
Introducing jQuery
Introducing jQuery
Introducing jQuery
Introducing jQuery
Introducing jQuery
Introducing jQuery
Introducing jQuery
Introducing jQuery
Introducing jQuery
Introducing jQuery
Introducing jQuery
Introducing jQuery
Introducing jQuery
Introducing jQuery
Introducing jQuery
Introducing jQuery
Introducing jQuery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introducing jQuery

4,568

Published on

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

No Downloads
Views
Total Views
4,568
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
21
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  1. Wildan Maulana | wildan [at] tobethink.com #1 Introducing jQuery Doc. v. 0.1 - 06/03/09
  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. 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. 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. 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. Selector ..selector .., selector ..! </li></ul>
  7. The jQuery Wapper <ul><li>To collect a group of elements, we use the simple syntax : $(selector) or jQuery(selector)
  8. $(&quot;p a&quot;) means , retrieve a group of links nested inside a <p> element </li></ul>
  9. Query Chain <ul><li>$(&quot;div.notLongForThisWorld&quot;).fadeOut();
  10. Query Chain : $(&quot;div.notLongForThisWorld&quot;).fadeOut().addClass(&quot;removed&quot;);
  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. 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. Advanced Selector <ul><li>This selector is identical to the selector in CSS
  14. $(&quot;p:even&quot;); means selects all even <p> elements
  15. $(&quot;tr:nth-child(1)&quot;); means selects the first row of each table
  16. $(&quot;body > div&quot;); means selects direct <div> children of <body>.
  17. $(&quot;a[href$=pdf]&quot;); means selects link to PDF files
  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 : http://docs.jquery.com/Selectors. </li></ul>
  19. About $ and jQuery() <ul><li>$ is alias of jQuery()
  20. $.trim(someString); is same with jQuery.trim(someString); </li></ul>
  21. The document ready handler <ul><li>To operate on a page jQuery have to wait until all DOM elements are fully loaded
  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. 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. 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. 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. 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. 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. Reference <ul><li>Jquery in Action, Bear Bibeault, Yehuda Katz , Manning </li></ul>
  29. Q&A

×