$ will do everything for us                  Naga HaRISH                  ShareOurIdeas.com
Agenda$ Few words about jQuery$ Why we need it$ Optimization tips  # Load jQuery  # Using Selectors  # And more           ...
$(jQuery)$ this is a new kind of JavaScript Library.$ It is a lightweight cross-browser (FF,GC,IE,OP,SF).$ And it is the m...
Each( features )$ LESS CODE DO MORE$ We can do Element Styling, Events Handling,  DOM manipulation, Animations and Ajax.$ ...
$(“.Tips”) - Load jQuery Script$ Load minified file, because it small in size (31k  < 229k)$ It is best to use Content Del...
Content Delivery Network
DEMO
jQuery.noConflict()$ Use no conflict method when you using other  Libraries.$ Eg:-   jQuery.noConflict()   jQuery(“#Slide6...
DEMO
Start method$ Best to use jQuery ready method.$ Because we can use it more times, where javascript  page onload is only on...
DEMO
Optimize performance, using selectors$ Optimize selectors to descend from an ID, if  possible. E.g:- $(“#id ul li”).hide()...
DEMO
Use Chaining$ Take advantage of Chaining$ Apply multiple effects and DOM manipulation  @ a time   Without Chaining        ...
DEMO
Use Caching$ Caching is a great way to limit the number of  times we need to traverse the DOM to find  elements matched by...
DEMO
Click vs Bind vs Live$ Click is to handle click event on element        $(#target).click(function() {         alert(Handle...
Click vs Bind vs Live$ Live, will work same like Bind.$ But, Bind can’t add event handler to run time  add elements.$ Live...
Event delegation$ Bind handler only once to the parent element  containing all the children meant to have  handlers.      ...
DEMO
Minimize DOM manipulation$ We have to minimize DOM operations (.append()  .prepend() .after() .wrap() and ..)Without temp ...
Minimize DOM manipulation(cont..)$   Use template for array items$   !dea from Microsoft$   jQuery add in documentation$  ...
DEMO
Use $(this) and this$ $(this) is jQuery object$ this is traditional HTML object  $(document).ready(function () {  $(ul li)...
DEMO
Use data$ Useful. It allows you to bind data to DOM  elements without modifying the DOM.$ For example:-  # $("div").data("...
DEMO
$(‘#Thanks’).show();By Naga HaRISHShareOurIdeas.comMore you share, more you gain
Upcoming SlideShare
Loading in …5
×

Jquery optimization-tips

2,313 views

Published on

jQuery Tips and Trick by NagaHarish on 21 Jan 2012... For the Demos given in this slides refer

https://github.com/anubavam-techkt/jQuery-tricks-tips-nagaharish

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

  • Be the first to like this

No Downloads
Views
Total views
2,313
On SlideShare
0
From Embeds
0
Number of Embeds
46
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Jquery optimization-tips

  1. 1. $ will do everything for us Naga HaRISH ShareOurIdeas.com
  2. 2. Agenda$ Few words about jQuery$ Why we need it$ Optimization tips # Load jQuery # Using Selectors # And more …more worth is waiting…!
  3. 3. $(jQuery)$ this is a new kind of JavaScript Library.$ It is a lightweight cross-browser (FF,GC,IE,OP,SF).$ And it is the most popular JS library in use today.$ It was released in 2006 1st Half and current version is 1.7.1 $.Next()
  4. 4. Each( features )$ LESS CODE DO MORE$ We can do Element Styling, Events Handling, DOM manipulation, Animations and Ajax.$ We can develop site rapidly. Because it was ready with cool stuff.$ It is most popular and many awesome plugins.$ Having good Support and Documentation.
  5. 5. $(“.Tips”) - Load jQuery Script$ Load minified file, because it small in size (31k < 229k)$ It is best to use Content Delivery Network(CDN) URL$ Let’s Google or Microsoft host jQuery file for U # Google src http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js # Microsoft src http://ajax.microsoft.com/ajax/jquery/jquery-1.6.2.min.js$ Forget About this if you work for local apps
  6. 6. Content Delivery Network
  7. 7. DEMO
  8. 8. jQuery.noConflict()$ Use no conflict method when you using other Libraries.$ Eg:- jQuery.noConflict() jQuery(“#Slide6”).next() (Or) var $j=jQuery.noConflict() $j(“#Slide6”).next()
  9. 9. DEMO
  10. 10. Start method$ Best to use jQuery ready method.$ Because we can use it more times, where javascript page onload is only once. $(document).ready(function() { //write your code here } (or) $(function(){ //write your code here });
  11. 11. DEMO
  12. 12. Optimize performance, using selectors$ Optimize selectors to descend from an ID, if possible. E.g:- $(“#id ul li”).hide()$ Use tag names when selecting classes E.g:- $(“p.class”).show()$ We can use comma(,) for multiple selectors E.g:- $(“p, ul li,div).css(‘color’,’#000’)More here http://api.jquery.com/?s=selector
  13. 13. DEMO
  14. 14. Use Chaining$ Take advantage of Chaining$ Apply multiple effects and DOM manipulation @ a time Without Chaining With Chaining $(document).ready(function () { $(document).ready(function () { $(#id).css(color, #143); $(#id).css(color, $(#id).html( Request); #200).html( Response) $(#id).click(function () { .click(function () { //something //something }); }); }); });“.css(), .html(…) and more” functions return a jQuery object that can be workedon instantly. So we use it right away to set the other properties like click eventhandler.
  15. 15. DEMO
  16. 16. Use Caching$ Caching is a great way to limit the number of times we need to traverse the DOM to find elements matched by the selectors. Without Caching With Caching $(document).ready(function () { $(document).ready(function () { $(#id).css(color, #143); var id=$(#id); : id.css(color, #143); If(isOk) : $(#id).html( Request); If(isOk) : id.html( Request); If(isEnable) : $(#id).click(function () { If(isEnable) //something id.click(function () { }); }); //something }); });
  17. 17. DEMO
  18. 18. Click vs Bind vs Live$ Click is to handle click event on element $(#target).click(function() { alert(Handler for .click() called.); });$ Bind is used to like same way, to add events. But not only click event. We can create our custom events too. $(#foo).bind(click, function() { $(this).toggleClass(entered); }); or $(#foo).bind(valid, function() { //Todo}); and we can fire this event like this $(‘#foo’).bind()
  19. 19. Click vs Bind vs Live$ Live, will work same like Bind.$ But, Bind can’t add event handler to run time add elements.$ Live will automatically adds handlers for new elements.
  20. 20. Event delegation$ Bind handler only once to the parent element containing all the children meant to have handlers. Using Event delegation Normal way $(document).ready(function () { $(document).ready(function () { $(ul).delegate(click, li, function (e) { $(ul li).click(function () { // if ($(e.target).is(li)) $(this).toggleClass(hig $(e.target).toggleClass(highlight); hlight); }); }); }); });$ Advantage of this is it will automatically bind click event for new(runtime add) element too.
  21. 21. DEMO
  22. 22. Minimize DOM manipulation$ We have to minimize DOM operations (.append() .prepend() .after() .wrap() and ..)Without temp variable (full Without temp variable :-DOM):- var myNumbers = $(#Numbers);var myNumbers = var myString= ;$(#Numbers); for (i = 0; i < 1000; i++) {for (i=0; i<1000; i++){ mystring += <li>Number + i + </li>; myNumbers.append(Number } + i);} myList.html(myNumbers);
  23. 23. Minimize DOM manipulation(cont..)$ Use template for array items$ !dea from Microsoft$ jQuery add in documentation$ More http://api.jquery.com/jQuery.template/$ http://api.jquery.com/jquery.tmpl/
  24. 24. DEMO
  25. 25. Use $(this) and this$ $(this) is jQuery object$ this is traditional HTML object $(document).ready(function () { $(ul li).click(function () { $(this).toggleClass(highlight); alert(this.innerHTML); }); });
  26. 26. DEMO
  27. 27. Use data$ Useful. It allows you to bind data to DOM elements without modifying the DOM.$ For example:- # $("div").data("message", "Done!"); # $("div").data("message"); OR # <div data-error=“Error! :(“>…</div> # $("div").data("error");
  28. 28. DEMO
  29. 29. $(‘#Thanks’).show();By Naga HaRISHShareOurIdeas.comMore you share, more you gain

×