Which one is the better way for performance to set a hover event on a div?

Question

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> 

Answer 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 (eg, 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... :-)

Answer 2

 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