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.

Jquery

827 views

Published on

Jquery hassan

Published in: Entertainment & Humor
  • Be the first to comment

Jquery

  1. 2. <ul><li>DOM tree and main objects </li></ul><ul><li>What is jQuery </li></ul><ul><li>Selectors </li></ul><ul><li>Attributes </li></ul><ul><li>CSS </li></ul><ul><li>Events </li></ul><ul><li>Animation </li></ul><ul><li>Other helper functions </li></ul><ul><li>plug-ins </li></ul><ul><li>Tools and inspectors </li></ul><ul><li>links </li></ul>
  2. 3. <ul><li><p title=&quot;The test paragraph&quot;>This is a sample of some <b>HTML you might<br>have</b> in your document</p> </li></ul><ul><li>To access Dom tree nodes </li></ul><ul><ul><li>document.getElementById('id of paragraph') </li></ul></ul><ul><ul><li>document.getElementsByTagName('p')[indexOfParagraph] </li></ul></ul><ul><ul><li>window.document.childNodes[0].childNodes[1].childNodes[4] </li></ul></ul>
  3. 4. <ul><li>Winodw </li></ul><ul><ul><li>Main properties and methods: </li></ul></ul><ul><ul><ul><li>Alert()  </li></ul></ul></ul><ul><ul><ul><li>Close() </li></ul></ul></ul><ul><ul><ul><li>Document </li></ul></ul></ul><ul><ul><ul><li>Location </li></ul></ul></ul><ul><ul><ul><li>Open() </li></ul></ul></ul><ul><ul><ul><li>Print() </li></ul></ul></ul><ul><ul><ul><li>resizeTo() </li></ul></ul></ul><ul><ul><ul><li>scrollTo() </li></ul></ul></ul><ul><ul><ul><li>innerWidth, innerHeight </li></ul></ul></ul>
  4. 5. <ul><li>Document </li></ul><ul><ul><li>Main properties and methods: </li></ul></ul><ul><ul><ul><li>getElementById(id) </li></ul></ul></ul><ul><ul><ul><li>getElementsByName(name) </li></ul></ul></ul><ul><ul><ul><li>getElementsByTagName(name) </li></ul></ul></ul><ul><ul><ul><li>Forms </li></ul></ul></ul><ul><ul><ul><li>Images </li></ul></ul></ul>
  5. 6. <ul><li>Element </li></ul><ul><ul><li>var imgObj = document.getElementById('img1'); </li></ul></ul><ul><ul><li>Main properties and methods: </li></ul></ul><ul><ul><li>attributes[] </li></ul></ul><ul><ul><li>childNodes[] </li></ul></ul><ul><ul><li>className </li></ul></ul><ul><ul><li>innerHTML </li></ul></ul>
  6. 7. <ul><li>Just another framework </li></ul><ul><li>Browser compatibility </li></ul><ul><li>VS support </li></ul>
  7. 8. <ul><li>By ID : $('#id'); </li></ul><ul><li>By class : $(‘.id'); </li></ul><ul><li>By tag : $(‘tag')[index]; </li></ul><ul><li>By property: (“tag[property=‘value']&quot;) </li></ul><ul><li>More: </li></ul><ul><ul><li>http://docs.jquery.com/Selectors </li></ul></ul>
  8. 9. <ul><li>Read attribute: $(&quot;em&quot;). attr (&quot;title&quot;); </li></ul><ul><li>Set attribute: $(&quot;em&quot;). attr (&quot;title”,”hello”); </li></ul><ul><li>Set multimple attributes: </li></ul><ul><li>$(&quot;img&quot;). attr ({ src: &quot;/images/hat.gif&quot;, title: &quot;jQuery&quot;, alt: &quot;jQuery Logo&quot; }); </li></ul><ul><li>Set class: $(&quot;p:last&quot;).addClass(&quot;selected&quot;); </li></ul><ul><li>Read/set html: $ (“#id”). html (); - $ (“#id”). html (‘html value’); </li></ul><ul><li>Read/set text: $ (“#id”). text (); - $ (“#id”). text (‘text value’); </li></ul>
  9. 10. <ul><li>Read/set CSS: </li></ul><ul><ul><li>$(this). css ({'background-color‘}); </li></ul></ul><ul><ul><li>$(this). css ({'background-color' : 'yellow', 'font-weight' : 'bolder'}); </li></ul></ul><ul><li>Offset: </li></ul><ul><ul><li>$(this).offset().left , $(this).offset().top </li></ul></ul><ul><li>position: </li></ul><ul><ul><li>$(this).position().left , $(this). position().top </li></ul></ul>
  10. 11. <ul><li>Click: </li></ul><ul><ul><li>$(&quot;p&quot;).click(function () { alert($(this).text()); }); </li></ul></ul><ul><li>Toggle: </li></ul><ul><ul><li>$(&quot;li&quot;).toggle( </li></ul></ul><ul><ul><li>function () { </li></ul></ul><ul><ul><li>$(this).css({&quot;list-style-type&quot;:&quot;disc&quot;, &quot;color&quot;:&quot;blue&quot;}); </li></ul></ul><ul><ul><li>}, </li></ul></ul><ul><ul><li>function () { </li></ul></ul><ul><ul><li>$(this).css({&quot;list-style-type&quot;:&quot;disc&quot;, &quot;color&quot;:&quot;red&quot;}); </li></ul></ul><ul><ul><li>}, </li></ul></ul><ul><ul><li>function () { </li></ul></ul><ul><ul><li>$(this).css({&quot;list-style-type&quot;:&quot;&quot;, &quot;color&quot;:&quot;&quot;}); </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>); </li></ul></ul>
  11. 12. <ul><li>Show </li></ul><ul><ul><li>$(&quot;button&quot;).click(function () { $(&quot;p&quot;).show(&quot;slow&quot;); }); </li></ul></ul><ul><li>Hide </li></ul><ul><ul><li>$(&quot; button&quot;).click(function () { </li></ul></ul><ul><ul><li>$(this).hide(); }); </li></ul></ul><ul><li>Animate: </li></ul><ul><ul><li>$(&quot;button&quot;).click(function () { </li></ul></ul><ul><ul><li> $(&quot; button &quot;).animate({ </li></ul></ul><ul><ul><li>width: &quot;70%&quot;, </li></ul></ul><ul><ul><li>opacity: 0.4, </li></ul></ul><ul><ul><li>marginLeft: &quot;0.6in&quot;, </li></ul></ul><ul><ul><li>fontSize: &quot;3em&quot;, </li></ul></ul><ul><ul><li>borderWidth: &quot;10px&quot; </li></ul></ul><ul><ul><li>}, 1500 );}); </li></ul></ul><ul><li>More: http://docs.jquery.com/Effects </li></ul>
  12. 13. <ul><li>Document ready: </li></ul><ul><ul><li>$(document).ready(function() { </li></ul></ul><ul><ul><li>// put all your jQuery goodness in here. </li></ul></ul><ul><ul><li>}); </li></ul></ul><ul><li>Foreach </li></ul><ul><ul><li>jQuery.each(arr, function() { </li></ul></ul><ul><ul><li>$(&quot;#&quot; + this).text(&quot;My id is &quot; + this + &quot;.&quot;); </li></ul></ul><ul><ul><li>return (this != &quot;four&quot;); // will stop running to skip &quot;five&quot; </li></ul></ul><ul><ul><li>}); </li></ul></ul>
  13. 15. <ul><li>FireBug </li></ul><ul><li>IE developer toolbar </li></ul><ul><li>VS debugging </li></ul>
  14. 16. <ul><li>  http://weblogs.asp.net/scottgu/archive/2008/11/21/jquery-intellisense-in-vs-2008.aspx </li></ul><ul><li>http://www.learningjquery.com/ </li></ul><ul><li>http://docs.jquery.com </li></ul><ul><li>http://jquery.com/plugins/ </li></ul><ul><li>http://getfirebug.com/ </li></ul><ul><li>http://www.microsoft.com/downloadS/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en </li></ul>

×