Your SlideShare is downloading. ×
0
J query
J query
J query
J query
J query
J query
J query
J query
J query
J query
J query
J query
J query
J query
J query
J query
J query
J query
J query
J query
J query
J query
J query
J query
J query
J query
J query
J query
J query
J query
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

J query

926

Published on

How I Learned to stop worrying and love jQuery

How I Learned to stop worrying and love jQuery

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

  • Be the first to like this

No Downloads
Views
Total Views
926
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
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
  • Sour
  • Transcript

    1. How I LearnedTo Stop Worryingand Love jQuery<br />David Giard, Sogeti USA<br /> C# MVP<br /> MCTS, MCSD, MCSE, MCDBA<br />DavidGiard.com<br />
    2. JavaScript<br />Dynamic language<br />Client-side (usually)<br />Interact with DOM<br />
    3. JavaScript in your page<br /> <script type="text/javascript"> …</script><br /> <script type="text/javascript“src=“xxx.js"> </script><br />
    4. JavaScript: The Good Parts<br />Interactive web pages<br />Fast<br />Ajax<br />
    5. JavaScript: The Bad Parts<br />Cross-browser issues<br />Cross-platform issues<br />
    6. JavaScript Frameworks<br />jQuery<br />Prototype<br />Dojo<br />Mootools<br />ExtJs<br />etc… <br />jQuery<br />
    7. jQuery<br />JavaScript Abstraction<br />Cross-Browser<br />Built-In Functions<br />Fast<br />Unobtrusive<br />Popular<br />Ships with Visual Studio 2010<br />
    8. jQuery Popularity<br />Source: http://royal.pingdom.com<br />
    9. jQuery Popularity<br />Source: http://royal.pingdom.com<br />
    10. jQuery Popularity<br />Twitter.com<br />Wikipedia.org<br />MLB.com<br />Amazon.com<br />Bing.com<br />Microsoft.com<br />Bit.ly<br />ESPN.com<br />Digg.com<br />Reddit.com<br />Netflix.com<br />WordPress.com<br />
    11. Obtrusive<a href=“” onclick=“DoSomething();”> Click Me</a><br />Unobtrusive<script type="text/javascript">$(document).ready(function(){ $(“#MyLink”).click(function(){<br />DoSomething();<br /> }); </script> <a href=“” id=“Link1”> Click Me </a><br />Unobtrusive JavaScript<br />
    12. Enable jQuery<br />Download from jQuery.com<br /><script type="text/javascript" src="jquery-1.6.1.min.js"></script><br />
    13. Content Delivery Network<br /><script type="text/javascript" src=“http://ajax.microsoft.com/ajax/jquery/jquery-1.6.1.min.js"></script><br /><script type="text/javascript" src=“http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script><br /><script type="text/javascript" src=“http://code.jquery.com/jquery-1.6.1.min.js "></script><br />
    14. Cross-Browser<br />Javascript<br />varelm = null;<br /> if (document.getElementById)<br /> {<br />elm = document.getElementById(id);<br /> }<br /> else if (document.all)<br /> {<br />elm = document.all[id];<br /> }<br /> else if (document.layers)<br /> {<br />elm = document.layers[id];<br />}<br />jQuery<br />var elm = $(“#id”);<br />
    15. jQuery Syntax<br />jQuery keyword<br />Selectors<br />Events<br />Functions / Methods<br />
    16. “jQuery” Keyword<br />jQuery<br />$<br />Represents the jQueryobject<br />Indicates what follows is jQuery<br />
    17. Selectors<br />Returns a set of objects<br />Call method on each object<br />Bind event to each object<br />
    18. CSS Selectors<br />Tag name<br />h2 {<br /> font-family: "Calibri"; font-size: 66pt; font-weight: bold;}<br />.FootNote {<br /> font-family: "Calibri"; font-size: 18pt; font-weight: bold;}<br />#MyElement { font-family: “Times New Roman";font-color: red;}<br />Div#MyDiv{ font-family: “Arial";font-size: 48pt;}<br />Class name<br />Element ID<br />Combine selectors<br />
    19. jQuery Selectors<br />$(selector)<br />where selector is:<br />
    20. (document).ready<br />$(document).ready(function(){<br /> …<br />});<br />
    21. Events<br />$(document).ready(function(){<br /> $(“#MyDiv”).click(function(){<br /> …<br /> });<br />});<br />
    22. Methods<br />$(document).ready(function(){<br /> $(“#MyDiv”).click(function(){<br /> $(“a”).attr(“target”, “_blank”);<br /> });<br />});<br />
    23. Combining Selectors<br />Containership$(‘selector1’ ‘selector2’)Ex: $(‘div a’)<br />Narrow scope$(‘Selector1Selector2’)Ex: $(‘a#MyLink’)<br />Filter$(selector1).filter(selector2)Ex: $(‘#MyDiv’).filter(‘#MyLink’)<br />
    24. Set-based Selectors<br />$(‘div:first')<br />$(‘div:last')<br />$(‘div:even')<br />$(‘div:odd')<br />
    25. Ajax<br />Call web service from jQuery<br />
    26. Plug-Ins<br />jQuery is extensible!<br />jQueryUI<br />
    27. jQuery UI<br />
    28. Help!<br />docs.jquery.com<br />api.jquery.com<br />jqueryui.com/demos<br />
    29. David Giard<br />DavidGiard.com<br />TechnologyAndFriends.com<br />DavidGiard@DavidGiard.com<br />
    30. Telerik<br />Telerik.com<br />

    ×