jQuery Tips & Tricks

924 views

Published on

These slides are from CodeCamp2009 Belgrade. In my session "jQuery Tips & Tricks" I talked about jQuery basics, but focus was on creating Ajax-enabled web applications with jQuery and ASP.NET

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

No Downloads
Views
Total views
924
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
27
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

jQuery Tips & Tricks

  1. 1. jQuerytips&tricks<br />Janko Jovanović<br />
  2. 2. Ne volite JavaScript i koristiteupdate panele i Ajax control toolkit?<br />
  3. 3. jQuery je drugačiji<br /><ul><li> Jednostavan kod
  4. 4. Brzina
  5. 5. Cross browser kompatibilnost
  6. 6. Plugin-ovi
  7. 7. Support
  8. 8. Fenomenalan community</li></li></ul><li>
  9. 9. Intellisense<br />za Visual Studio 2008<br />
  10. 10. Jednostavan?<br />
  11. 11. &lt;script type=&quot;text/javascript“ src=“jquery.js&quot;&gt;<br />&lt;/script&gt;<br />
  12. 12. Load ili Ready?<br />$(document).ready(function(){<br />alert(“Brži sam od load!”);<br />});<br />
  13. 13. &lt;div&gt;<br />&lt;imgsrc=“logo.png” alt=“Logo” /&gt;<br />&lt;a href=“#” target=“_blank”&gt;Link&lt;/a&gt;<br />&lt;p&gt;Loremipsum, itd…&lt;/p&gt;<br /> &lt;a href=“#” target=“_blank”&gt;Još jedan link&lt;/a&gt;<br />&lt;/div&gt;<br />&lt;div&gt;<br />&lt;imgsrc=“logo.png” alt=“Logo” /&gt;<br />&lt;a href=“#”&gt;Link&lt;/a&gt;<br />&lt;p&gt;Loremipsum, itd…&lt;/p&gt;<br /> &lt;a href=“#”&gt;Još jedan link&lt;/a&gt;<br />&lt;/div&gt;<br />Pronađi sve linkove<br />Podesi da se linkovi otvaraju u novom prozoru<br />
  14. 14. Kako?<br />$(“a”).attr(“target”, “_blank”);<br />Pronađi (CSS selektor)<br />Uradi nešto (metode)<br />Selektor$(“a”)vraća jQuery objekat koji sadrži listu svih pronađenih elemenata<br />&lt;a href=“#”&gt;Link&lt;/a&gt;<br />&lt;a href=“#”&gt;Još jedan&lt;/a&gt;<br />
  15. 15. Chaining<br />$(“div”).addClass(“new”) <br /> .append(“&lt;p&gt;&lt;/p&gt;”) <br /> .css(“color”,”#fff”)<br /> .hide(400)<br />.click(function(){<br />alert(“OK!”);<br /> });<br />
  16. 16. $(“#container”)<br />Vraća element sa ID-jem “container”<br />$(“li:first”)<br />Vraća prvi listitem u nizu<br />$(“table tr:odd”)<br />Vraća sve neparne redove u tabeli<br />$(“input[type=text]”)<br />Vraća sve “TextBox” elemente<br />Šta god poželite<br />da nađete<br />
  17. 17. Manipulacija<br />.before() .after() .append()<br />Atributi<br />.css() .attr() .val() .html()<br />Događaji<br />.click() .focus() .toggle()<br />“Traversing”<br />.find() .next() .children()<br />Šta god poželite<br />da uradite<br />
  18. 18. Ajax, praviajax<br />$(document).ready(function(){<br /> $.ajax({ type: &quot;POST&quot;, <br />url:&quot;Default.aspx/GetClient&quot;, <br /> data: &quot;{‘id’:’17’}&quot;, <br />contentType: &quot;application/json”; <br />dataType:&quot;json&quot;,<br /> success:function(msg){<br />// Uradi nešto sa rezultatom<br /> },<br /> error: function(msg) {<br />// prikaži poruku<br /> }<br /> }); <br />});<br />
  19. 19. jQuery UI<br />
  20. 20. Teorijanijezanimljiva, demojeste<br />
  21. 21. Pitanja<br />(iodgovori)<br />
  22. 22. JankoJovanović<br />Web: www.jankoatwarpspeed.com<br />Email: this@jankoatwarpspeed.com<br />Twitter: @jankowarpspeed<br />

×