<ul><li>DOM tree and main objects </li></ul><ul><li>What is jQuery </li></ul><ul><li>Selectors </li></ul><ul><li>Attribute...
<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...
<ul><li>Winodw </li></ul><ul><ul><li>Main properties and methods: </li></ul></ul><ul><ul><ul><li>Alert()   </li></ul></ul...
<ul><li>Document </li></ul><ul><ul><li>Main properties and methods: </li></ul></ul><ul><ul><ul><li>getElementById(id) </li...
<ul><li>Element  </li></ul><ul><ul><li>var imgObj = document.getElementById('img1'); </li></ul></ul><ul><ul><li>Main prope...
<ul><li>Just another framework </li></ul><ul><li>Browser compatibility </li></ul><ul><li>VS support </li></ul>
<ul><li>By ID : $('#id'); </li></ul><ul><li>By class : $(‘.id'); </li></ul><ul><li>By tag : $(‘tag')[index]; </li></ul><ul...
<ul><li>Read attribute:  $(&quot;em&quot;). attr (&quot;title&quot;);  </li></ul><ul><li>Set attribute: $(&quot;em&quot;)....
<ul><li>Read/set CSS:  </li></ul><ul><ul><li>$(this). css ({'background-color‘}); </li></ul></ul><ul><ul><li>$(this). css ...
<ul><li>Click: </li></ul><ul><ul><li>$(&quot;p&quot;).click(function () { alert($(this).text()); }); </li></ul></ul><ul><l...
<ul><li>Show </li></ul><ul><ul><li>$(&quot;button&quot;).click(function () { $(&quot;p&quot;).show(&quot;slow&quot;); }); ...
<ul><li>Document ready: </li></ul><ul><ul><li>$(document).ready(function() { </li></ul></ul><ul><ul><li>// put all your jQ...
 
<ul><li>FireBug </li></ul><ul><li>IE developer toolbar </li></ul><ul><li>VS debugging </li></ul>
<ul><li>  http://weblogs.asp.net/scottgu/archive/2008/11/21/jquery-intellisense-in-vs-2008.aspx </li></ul><ul><li>http://w...
Upcoming SlideShare
Loading in …5
×

Jquery

614
-1

Published on

Jquery hassan

Published in: Entertainment & Humor
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
614
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
20
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×