Your SlideShare is downloading. ×
jQueryTips, tricks and hints
   for better development and performance




Jonas De Smet - @glamorous_be - BarcampGhent 20...
Who am I ?!
Jonas De Smet
-   23 years “old” developer
-   Fan of PHP, jQuery and JSON
-   Barcamp virgin


-   Lives in Waregem
-   P...
Why are you
 here ?!
Todays Schedule
✓ What is jQuery?
✓ 10 Usefull tips for better development
✓ 10 Performance tips
✓ Some Q’s & hopefully so...
What is jQuery?
-   JavaScript Library
-   Easy document traversing
-   Easy event handling
-   Rapid web development
-   ...
What is jQuery?
var elems = document.getElementsByTagName(“p”);
for(var i=0;i<elems.length;i++){
    if(elems[i].className...
What is jQuery?
$(“p.example”).click(function(){
      $(this).addClass(“clicked”);
      alert(“this example rocks!”);
  ...
Usefull tips
 for better development
Usefull tips - #1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-str...
Usefull tips - #2
function testFunction()
{
   console.time(‘test this cool function’);
   var testString = “”;
   for(i=0...
Usefull tips - #3
<script type=”text/javascript” src=”http://www.google.com/jsapi”></script>
<script type=”text/javascript...
Usefull tips - #4
<div class=”expanded”>                     <div>
  <p>Some lorem ipsum</p>                    <p>Some lo...
Usefull tips - #5
$.expr[“:”]:extlinks = function(element){
   var link = $(element).attr(“href ”);
   var reg = new RegEx...
Usefull tips - #6
function uglyObject()
{
   //some object stuff
}

var example = new uglyObject();

$(example).bind(‘addF...
Usefull tips - #7
if ($(“div”).length){
    //code here
}

if ($(“div”)[0]){
    // code here
}

// Alternatively
$(“div”)...
Usefull tips - #8
// List bound events:
console.dir( $(“#elem”).data(“events”) );


// Log ALL handlers for ALL events:
$....
Usefull tips - #9
$(“a”).bind(“click.myNamespace”, function() {
    // Some code for the click event with namespace “myNam...
Usefull tips - #10
$(“p”).click(somefunction);

$(“p span”).click(somefunction);

$(“p a”).click(somefunction);


// You c...
Performance
    Tips
Performance tips - #1
var $specialdiv = $(“#specialdiv”);

$specialdiv.filter(function(){
    return $(this).hasClass(“clic...
Performance tips - #2
                           1. Use id’s before tags
$(“#mydiv”).addClass(“test”);


                 ...
Performance tips - #3
var items = $(“.coolDivs”, $(“#anotherDiv”) );

// or

var items = $(“#anotherDiv .coolDivs”);

// o...
Performance tips - #4
var $bigInputs = $(“#exampleForm input.big”);
$bigInputs.bind(“click”, clickfunction);
$bigInputs.ad...
Performance tips - #5
var $myElement = $(“#element”);

$myElement.css(“border”, “1px solid orange”).addClass(“bordered”).f...
Performance tips - #6
                                       //Wrap everything in one element

var $list = $(“#mylist”);  ...
Performance tips - #7
var $myList = $(“#navigation”);

$myList.click(function(evt){
    $target = $(evt.target);
    if($t...
Performance tips - #8
var arr = [ "one", "two", "three", "four", "five" ];

$.each(arr, function() {
    $("#" + this).text...
Performance tips - #9
         Use shorthand for $(document).ready()
$(function () {
    // your code
});


            Us...
Performance tips - #10


Pack and minify your custom scripts (in one)

           http://javascriptcompressor.com
        ...
Q &A
Thank you for listening!
Twitter @glamorous_be


Github http://github.com/glamorous
Slideshare http://www.slideshare.net/g...
jQuery: Tips, tricks and hints for better development and Performance
Upcoming SlideShare
Loading in...5
×

jQuery: Tips, tricks and hints for better development and Performance

7,369

Published on

10 Usefull tips for better development and 10 Performance tips

Published in: Technology, Design
2 Comments
24 Likes
Statistics
Notes
  • i will like u to tell me what u like and what u dislike, tell me everything i need to know about u i will also tell you about my self in the next mail if i eventually see your reply.please if you are interested write me back at (( alicedavids72@yahoo.com ))
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • great
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
7,369
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
2
Likes
24
Embeds 0
No embeds

No notes for slide
  • zo ook meer functies beschikbaar: log, debug, warn, info, error
  • 2de methode de voorkeur!
  • jQuery internals =&gt; zo ook removeData() beschikbaar
  • Zeer belangrijk voor plugin development!
  • Zo ook goed te gebruiken bij verschillende events, event samen gaan binden met &amp;#xE9;&amp;#xE9;nzelfde functie als &amp;#x201C;te uit te voeren&amp;#x201D;
  • 1. getElementById
    2. getElementsByTagName
    3. getElementsByClassName
  • bij aanmaak van nieuwe objecten, cachen =&gt; geen .live() nodig

    nooit een jQuery selectie herhalen, cache uw objecten!
  • avoid DOM Manipulation (geen .append() maar .html()) eventueel parent node erbij en .replaceWith()
  • geen .live() nodig

    maar &amp;#xE9;&amp;#xE9;n bind, &amp;#xE9;&amp;#xE9;n event noodzakelijk
  • $(document).ready() wordt uitgevoerd tijdens het downloaden van nog enkele elementen en kan uw pagina &amp;#x201C;ophouden&amp;#x201D;/&amp;#x201D;uitstellen&amp;#x201D; van laden

    $(window).load() wordt aangeroepen wanneer alle HTML opgeroepen is (zo ook iframes)
  • msh ook combineren van je scripts in &amp;#xE9;&amp;#xE9;n file, eventueel via php de verschillende inladen (denk aan updatebaarheid plugins)
  • Transcript of "jQuery: Tips, tricks and hints for better development and Performance"

    1. 1. jQueryTips, tricks and hints for better development and performance Jonas De Smet - @glamorous_be - BarcampGhent 2009
    2. 2. Who am I ?!
    3. 3. Jonas De Smet - 23 years “old” developer - Fan of PHP, jQuery and JSON - Barcamp virgin - Lives in Waregem - Plays rugby with RC Curtrycke - In love with Eline, the girl of his life
    4. 4. Why are you here ?!
    5. 5. Todays Schedule ✓ What is jQuery? ✓ 10 Usefull tips for better development ✓ 10 Performance tips ✓ Some Q’s & hopefully some A’s
    6. 6. What is jQuery? - JavaScript Library - Easy document traversing - Easy event handling - Rapid web development - ... “jQuery is designed to change the way that you write JavaScript” (from jQuery.com)
    7. 7. What is jQuery? var elems = document.getElementsByTagName(“p”); for(var i=0;i<elems.length;i++){ if(elems[i].className == “example”){ elems[i].onclick = function(){ alert(“this example doesn’t rocks!”); this.className += “ clicked”; return false; } }
    8. 8. What is jQuery? $(“p.example”).click(function(){ $(this).addClass(“clicked”); alert(“this example rocks!”); return false; });
    9. 9. Usefull tips for better development
    10. 10. Usefull tips - #1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Title of the page</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="text/javascript">document.documentElement.className = 'js';</script> <link rel="stylesheet" href="/style.css" type="text/css" media="screen" /> </head> Avoid flashing content
    11. 11. Usefull tips - #2 function testFunction() { console.time(‘test this cool function’); var testString = “”; for(i=0; i<1000; i++) { testString += “item ” + i; } console.timeEnd(‘test this cool function’); } //time will be logged in milliseconds Use Firebug’s console loggings facilities
    12. 12. Usefull tips - #3 <script type=”text/javascript” src=”http://www.google.com/jsapi”></script> <script type=”text/javascript”> google.load(“jquery”, “1.3.2”); google.setOnLoadCallback(function() { //init your javascript code }); </script> <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/ jquery.min.js”></script> Load jQuery from Google Code
    13. 13. Usefull tips - #4 <div class=”expanded”> <div> <p>Some lorem ipsum</p> <p>Some lorem ipsum</p> <span class=”btn”>Close</span> <span class=”btn”>Close</span> </div> </div> $(“.btn”).click(function() { $(“.btn”).click(function() { var parent = $(this).parent(); var parent = $(this).parent(); if ( parent.hasClass(“expanded”) ) { if ( parent.data(“expanded”) ) { parent.removeClass(“expanded”); parent.data(“expanded”, false); } } else { else { parent.addClass(“expanded”); parent.data(“expanded”, true); } } } } Storing states in classes or even better in .data()
    14. 14. Usefull tips - #5 $.expr[“:”]:extlinks = function(element){ var link = $(element).attr(“href ”); var reg = new RegExp('^(?:f|ht)tp(?:s)?://([^/]+)', 'im'); var link_host = (link.match(re) != null) ? link.match(re)[1].toString() : “”; var host = window.location.host; return (link_host != host); } $(“a:extlinks”).attr(“target”,”_blank”); <h3>Some links</h3> <a href=”http://example.com”>Example</a> <a href=”/intern/folder/”>Example</a> Write custom filter selectors
    15. 15. Usefull tips - #6 function uglyObject() { //some object stuff } var example = new uglyObject(); $(example).bind(‘addFancy’, function() { // Custom event handling for when the event ‘addFrancy’ is triggered }); $(example).trigger(‘addFancy’); Bind custom events to custom objects
    16. 16. Usefull tips - #7 if ($(“div”).length){ //code here } if ($(“div”)[0]){ // code here } // Alternatively $(“div”).get(); $(“div”).get(0); $(“div”).get()[0]; Check if an element exists
    17. 17. Usefull tips - #8 // List bound events: console.dir( $(“#elem”).data(“events”) ); // Log ALL handlers for ALL events: $.each($(“#elem”).data(“events”), function(i, event) { jQuery.each(event, function(i, handler){ console.log( handler.toString() ); }); }); // source: http://james.padolsey.com Use jQuery’s event storage
    18. 18. Usefull tips - #9 $(“a”).bind(“click.myNamespace”, function() { // Some code for the click event with namespace “myNamespace” }); // Unbind all events with namespace “myNamespace” $(“a”).bind(“click.my2ndNamespace”, function(){ // Some code for the click event with namespace “my2ndNamespace” }); // Unbind events with namespace “myNamespace”, not events with “my2ndNamespace” $(“a”).unbind(“.myNamespace”); $(“#example”).data(“nameValue.aNameSpace”, “teststring”); Namespace your events and stored data
    19. 19. Usefull tips - #10 $(“p”).click(somefunction); $(“p span”).click(somefunction); $(“p a”).click(somefunction); // You can do the above easily in one line $(“p, p a, p span”).click(somefunction); Try to group your queries
    20. 20. Performance Tips
    21. 21. Performance tips - #1 var $specialdiv = $(“#specialdiv”); $specialdiv.filter(function(){ return $(this).hasClass(“clicked”); // Must return a Boolean }); $specialdiv.filter(“.clicked”); var $specialdiv = $(“#specialdiv”); // before var $specialspan = $(“#specialdiv span.on”); // much better var $specialspan = $specialdiv.find(“span.on”); Use .find() or .filter() instead of a new selector
    22. 22. Performance tips - #2 1. Use id’s before tags $(“#mydiv”).addClass(“test”); 2. Use tags before classes $(“p”).addClass(“test”); 3. Use classes with a tag $(“p.example”).addClass(“test”);
    23. 23. Performance tips - #3 var items = $(“.coolDivs”, $(“#anotherDiv”) ); // or var items = $(“#anotherDiv .coolDivs”); // or even better var items = $(“#anotherDiv div.coolDivs”); //or var items = $(“div.coolDivs”, $(“#anotherDiv”) ); Give selectors a context
    24. 24. Performance tips - #4 var $bigInputs = $(“#exampleForm input.big”); $bigInputs.bind(“click”, clickfunction); $bigInputs.addClass(“finished”); // You can define an object in the global scope and access it later window.$myobject = { test: $(“#divWithId”) }; $myobject.test.addClass(“yes”); // Cache added elements to access them later instead of using .live() var $newDiv = $(“<div />”).appendTo(“#anotherDiv”); $newDiv.bind(“click”, clickfunction); Cache jQuery objects and use a $-prefix
    25. 25. Performance tips - #5 var $myElement = $(“#element”); $myElement.css(“border”, “1px solid orange”).addClass(“bordered”).fadeIn(“fast”); // another example $myElement.find(“p”).addClass(“yellow”).end().find(“span”).css(“border”,”1px”); // Make you plugins chainable! $.fn.myPlugin = function() { return $(this).addClass(“coolstuff ”); }; Chaining FTW, especially for plugin-development
    26. 26. Performance tips - #6 //Wrap everything in one element var $list = $(“#mylist”); var $list = $(“#mylist”); var str = “”; var wrapped = “<ul>”; for (i=0; i < 100; i++) for (i=0; i < 100; i++) { { str += “<li>item “ + i + ”</li>”; wrapped += “<li>item “ + i + ”</li>”; } } $list.html(str); wrapped += “</ul>”; $list.replaceWith(wrapped); Avoid DOM manipulation & keep it to a minimum
    27. 27. Performance tips - #7 var $myList = $(“#navigation”); $myList.click(function(evt){ $target = $(evt.target); if($target.is(“li”) ) { doSomethingWhenListItemIsClicked(); } return false; }); // more about jQuery events on http://docs.jquery.com/Events/jQuery.Event Event delegation / bubbling
    28. 28. Performance tips - #8 var arr = [ "one", "two", "three", "four", "five" ]; $.each(arr, function() { $("#" + this).text("My id is " + this + "."); }); var arr = [ "one", "two", "three", "four", "five" ]; for ( i=0; i < arr.length; i++ ) { $("#" + i).text("My id is " + i + "."); }); Use a for-loop instead of .each()
    29. 29. Performance tips - #9 Use shorthand for $(document).ready() $(function () { // your code }); Use $(window).load() when possible $(window).load( function () { // your code to be excuted when every HTML element is loaded } $(document).ready occurs during page render while objects are downloading $(window).load() event occurs after all objects are called by the HTML
    30. 30. Performance tips - #10 Pack and minify your custom scripts (in one) http://javascriptcompressor.com http://dean.edwards.name/packer
    31. 31. Q &A
    32. 32. Thank you for listening! Twitter @glamorous_be Github http://github.com/glamorous Slideshare http://www.slideshare.net/glamorous LinkedIn http://be.linkedin.com/in/glamorous

    ×