0

Which one is the better way for performance to set a hover event on a div with class 'con'? Is there any difference?

  1. $('.con').hover(func(){});
  2. $('.content0.content.%etc%.con').hover(func(){});

  3. var con = $('.con'); con.hover(func(){});

    <script>
    $('.con').hover(func(){});
</script>

<div class="content0">
    <div class="content">
        <div class="fl grad">
            <div class="fl bor_rad bor_gray adver1">
                <div class="clear">
                    <div class="fl left_ot">
                        <div class="bor_orang h150">
                            <div class="w130 bgfff txc pab10 con">
                                <a href="#" class="ankor_cont bor_bot_bl w80 ot_top">More</a>
                            </div>
                            <div class="w130 bgfff txc pab10 con">
                                <a href="#" class="ankor_cont bor_bot_bl w80 ot_top">More</a>
                            </div>
                            <div class="w130 bgfff txc pab10 con">
                                <a href="#" class="ankor_cont bor_bot_bl w80 ot_top">More</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
NaYaN
  • 1,300
  • 7
  • 11
Anton
  • 129
  • 2
  • 9

2 Answers2

1

There's no significant difference between the three ways you listed, provided the two different selectors you've given select the same elements.

Note that the element lookup is done once, when you do the $("selector here") part. It's not repeated when the hover occurs.

Side note: Probably 95% of what I've seen people do in hover event handlers can, on modern browsers (e.g., not IE7 and earlier), be better achieved with CSS using the :hover pseudoclass. The other 5% can't, and you haven't said what you're doing and it may well be in that 5%, but I thought I'd point it out... :-)

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • Thank you, but what is the better way for tasks where the selector above occurs many times? – Anton Oct 18 '13 at 10:22
  • @user1312750: If you had the code in a loop, or if you had code doing `$("selector here")` in a `mousemove` handler, etc. – T.J. Crowder Oct 18 '13 at 10:41
-1
 1. $('.con').hover(func(){});
 2.   $('.content0.content.%etc%.con').hover(func(){}); var con =
 3.   $('.con'); con.hover(func(){});

all three work but they take time

because every time jQuery search in all document(DOM) then come to your selector

so use context by this we tell in jQuery that search not in all document but search form this element like below.. in your html

<div class="content0">
    <div class="content">
        <div class="fl grad">
            <div class="fl bor_rad bor_gray adver1">
                <div class="clear">
                    <div class="fl left_ot">
                        <div class="bor_orang h150">
                            <div class="w130 bgfff txc pab10 con">
                                <a href="#" class="ankor_cont bor_bot_bl w80 ot_top">More</a>
                            </div>
                            <div class="w130 bgfff txc pab10 con">
                                <a href="#" class="ankor_cont bor_bot_bl w80 ot_top">More</a>
                            </div>
                            <div class="w130 bgfff txc pab10 con">
                                <a href="#" class="ankor_cont bor_bot_bl w80 ot_top">More</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

now if you write 

$('.con').hover(func(){});

then it reach your selector by following way

first go to 

document
     |
   body
     |
   content0(class)
     |
   content (class)
     |....
    ...
    then at last your selector '.con'

so it will take time to get better result define context by this it know from where it search your selector like

 $('.con','.content0').hover(func(){});

now it reach your selector by following way

first go to 

   content0(class)
    ....
    ...
    then at last your selector '.con'

Context really helps when you have a much larger DOM that you are searching through. Searching for IDs is already very fast and context doesn't really help that much in that case. Where context can really make a difference is when you are selecting by tag name or class.

Try testing like this: http://jsbin.com/aciji4/4

you can really see the timing get better for context when you bump up number of items in the DOM like this: http://jsbin.com/aciji4/6

reference Performance of jQuery selector with context

Community
  • 1
  • 1
Rituraj ratan
  • 10,260
  • 8
  • 34
  • 55
  • No, `$('.con', '.content0')` is not faster than `$('.con')` (slower, more likely). When you do `$('.con', '.content0')`, jQuery converts that into `$('.content0').find('.con')`. The first part `$('.content0')` takes **just as long** as `$('.con')`. Then you have the added time to look through those elements and find the `.con` elements within them. – T.J. Crowder Oct 18 '13 at 17:08
  • Proof: http://jsperf.com/extra-context-is-useless As you can see, adding extra context just slows it down (nearly doubling the time it takes). Context is only useful if you can **reuse** it, so the code `$('.con', '.content0')` will *always* be slower than `$('.con')`. If you had `var context = $('.content');` and then *repeatedly* did `context.find('.con')`, you might get some benefit. – T.J. Crowder Oct 18 '13 at 17:08