0

哪一种是在带有“con”的情况下设置悬停事件的更好性能方式？有什么区别吗？divclass

  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>
4

2 回答 2

1

您列出的三种方式之间没有显着差异，只要您提供的两个不同的选择器选择相同的元素。

请注意，当您执行该部分时，元素查找会完成一次。$("selector here")悬停发生时不会重复。

旁注：hover在现代浏览器（例如，不是 IE7 和更早版本）上，我所看到的人们在事件处理程序中所做的大概 95% 可以通过使用:hover伪类的 CSS 更好地实现。其他 5% 不能，你还没有说你在做什么，很可能在 5% 中，但我想我会指出来...... :-)

于 2013-10-18T10:15:44.133 回答
-1 
 1. $('.con').hover(func(){});
 2.   $('.content0.content.%etc%.con').hover(func(){}); var con =
 3.   $('.con'); con.hover(func(){});

这三个工作，但他们需要时间

因为每次jQuery在所有文档(DOM)中搜索然后来到你的选择器

所以使用上下文我们在 jQuery 中告诉我们不是在所有文档中搜索，而是 在你的 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>

现在如果你写

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

然后它通过以下方式到达您的选择器

先去

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

所以它需要时间来获得更好的结果定义上下文，它知道它从哪里搜索你的选择器

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

现在它通过以下方式到达您的选择器

先去

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

当您正在搜索一个更大的 DOM 时，上下文确实很有帮助。搜索 ID 已经非常快了，在这种情况下，上下文并没有太大帮助。当您通过标签名称或类进行选择时，上下文真正可以发挥作用的地方。

尝试这样的测试：http: //jsbin.com/aciji4/4

当您像这样增加 DOM 中的项目数量时，您可以真正看到上下文的时机变得更好：http: //jsbin.com/aciji4/6

带上下文的 jQuery 选择器的参考性能

于 2013-10-18T10:29:59.827 回答