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

指定した2つの異なるセレクターが同じ要素を選択する場合、リストした3つの方法の間に大きな違いはありません。

要素の検索は、パーツを実行するときに1 回$("selector here")行われることに注意してください。ホバーが発生しても繰り返されません。

補足:hoverイベント ハンドラーで人々が行っていることのおそらく 95% は、最新のブラウザー (たとえば、IE7 以前ではなく) では、疑似クラスを使用する CSS でより適切に実現できます:hover。残りの 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(){});

3つすべてが機能しますが、時間がかかります

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 に答える