0

誰か助けてください、私はjqueryが初めてです。プロジェクトに 3 つの jquery プラグインを追加しました。

1 つのページに複数の jquery を含めることが可能かどうかを知りたいですか?

このファイルが何をするのか教えてください:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

これらのファイルが同じかどうか、またライブラリとバージョンの違いを明確に説明してください。違いはありますか？

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">

1.ボールバウンドの場合：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
   <script>
  $(document).ready(function() {

$("ul.menu li,ul.social_media li").mouseenter(function () {
      $(this).effect("bounce", { times:2 }, 400);
});

  });
  </script>

2.タブの内容:

<script src="javascript/jquery-1.1.3.1.pack.js" type="text/javascript"></script>
        <script src="javascript/jquery.history_remote.pack.js" type="text/javascript"></script>
        <script src="javascript/jquery.tabs.pack.js" type="text/javascript"></script>


        <link rel="stylesheet" href="css/jquery.tabs.css" type="text/css" media="print, projection, screen">

        <script type="text/javascript">
            $(function() {
              $('#container-5').tabs({ fxSlide: false, fxFade: false, fxSpeed: 'normal' });
            });
        </script>

3.スクロールの場合:

  <script src="js/jquery.thumbnailScroller.js"></script>
      <script src="js/jquery-ui-1.8.13.custom.min.js"></script>
      <link href="js/jquery.thumbnailScroller.css" rel="stylesheet" />

      <script>
(function($){
window.onload=function(){   
    $("#tS1").thumbnailScroller({       
        scrollerType:"hoverAccelerate",     
        scrollerOrientation:"horizontal",       
        scrollEasing:"easeOutCirc",         
        scrollEasingAmount:400,         
        acceleration:2,         
        scrollSpeed:400,        
        noScrollCenterSpace:4,      
        autoScrolling:0,        
        autoScrollingSpeed:1000,        
        autoScrollingEasing:"easeInOutQuad",        
        autoScrollingDelay:20 
    });
    $("#tS2").thumbnailScroller({ 
        scrollerType:"clickButtons", 
        scrollerOrientation:"horizontal", 
        scrollSpeed:2, 
        scrollEasing:"easeOutCirc", 
        scrollEasingAmount:600, 
        acceleration:4, 
        scrollSpeed:800, 
        noScrollCenterSpace:10, 
        autoScrolling:0, 
        autoScrollingSpeed:2000, 
        autoScrollingEasing:"easeInOutQuad", 
        autoScrollingDelay:500 
    });
    $("#tS3").thumbnailScroller({ 
        scrollerType:"hoverPrecise", 
        scrollerOrientation:"vertical", 
        scrollSpeed:2, 
        scrollEasing:"easeOutCirc", 
        scrollEasingAmount:800, 
        acceleration:4, 
        scrollSpeed:800, 
        noScrollCenterSpace:10, 
        autoScrolling:0, 
        autoScrollingSpeed:2000, 
        autoScrollingEasing:"easeInOutQuad", 
        autoScrollingDelay:500 
    });
}
})(jQuery);
</script>

これは私のコードです。このコードの競合を避けるのを手伝ってください。

4

1 に答える 1

3

jQuery Lib Ver 1.5 (質問に示されているように) と最新のVer 1.72の間には、いくつかの大きな違いがあります。最大のものの 1 つは、これまで人気のあるとを置き換えることを目的とした の導入です。これらの jQuery メソッドはイベントをドキュメントにバインドし、より動的なレイアウトを可能にします。違いについては多少の混乱があり、車輪の再発明はしません。詳細については、このStackOverflow Q&Aをご覧ください。また、詳細については、1.7 リリース ノートを参照してください。要するに、.on はパフォーマンスを向上させ、必要なタイピングが少し少なくなりました。.on().live().delegate()

最初の実際の質問によると、2 つのライブラリjquery.min.js&jquery-ui.min.jsは、目的と設計のみが異なります。最初に言及したのは、JavaScript に必要なすべての .Net スタイル ヘルプを提供する実際の jQuery ライブラリです。もう一方を使用するために含める必要があるのはメイン ライブラリです。

言及された2 番目のライブラリはjQueryUI ライブラリであり、jQueryのユーザー インターフェイスライブラリに近いものです。また、CSSファイルにも依存します (通常、jQuery ライブラリが呼び出される前にヘッドにロードするのが最適です) 。CSS ファイルは、jQuery ライブラリに追加される機能のパワーを実際に引き出すものです。実際にはjQueryライブラリに多く拡張されています。たとえば、「1.for ball bounce:」の例では、 jQueryのみを介して多少制限されたメソッドを使用していますが、jQueryUIを使用すると、さまざまなイージングを使用してより多くの可能性を達成することができます.effectアニメーション。

あなたの「2.for tab content:」に連れて行きます。jQueryUI ライブラリが既に含まれているという点で、これは極端に拡張されているため、実際にはtabs.pack. jQuery のさらに別のバージョンも呼び出しました。jQueryUI タブの詳細については、こちらを参照してください。追加のプラグインや別の jQuery ライブラリは必要ありません。

最後に、最後の例では、必要以上のものを再度含めました。最初の例のインクルードでは、jQuery を再度追加する必要はありません。以下では、完全な書き直しを示し、余分な「ゴミ」を一切使わずに、持っているものすべてを含めるようにします。

<!DOCTYPE html>
<html lang="en">
    <head>
        <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/ui-lightness/jquery-ui.css">
        <!--
            Key Note:
                The following implies that you HAVE downloaded the Thumbnail Scroller plugin and placed its CSS
                File in a directory named "css" on the project directory.
                As far as I can tell it only extends the CSS of jQueryUI and therefor
                should be inserted just after the link for jQueryUI's CSS.
        -->
        <link href="css/jquery.thumbnailScroller.css" rel="stylesheet" type="text/css" />

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
        <!--
            Key Note:
                The following link ALSO implies that you downloaded this library and placed it
                in a directory named "js" on your project directory's home.
                In his blog article he show you placing this at the end and adding no conflict.
                If you are not using other Library rivals of jQuery (Prototype, MooTools, etc...),
                you don't really need to include noConflict.
                Also, adding the "framework" at the end of your HTML is a common and OLD practice.
                It's no longer the most effecient way to handle your "framework".
                It may be good still, to include your exterior work (aka, everything not in a library)
                to the end, but the framework should be the first thing that loads now a days, unless
                you like seeing weird 2 second pauses as you page is "built" after it's loaded.
        -->
        <script src="js/jquery.thumbnailScroller.js"></script>

        <script type="text/javascript">
            $(function() {
                $(".menu li, .social_media li").mouseenter(function () {
                    // altho, i'm not sure this will achieve the effect you want,
                    // yoiu might consider wrapping your list objects in a div
                    // with a class to call like:
                    // <li><div class="bounce-me">content</div></li>
                    // then simply change the previous line too:
                    // $(".bounce-me").mouseenter(...
                    $(this).effect("bounce", { times:2 }, 400);
                });

                $('#container-5').tabs({
                    fx: [{ // this basically calls jQuery's .animate command each time a tab is clicked
                        //  see http://api.jquery.com/animate/ for more info
                        duration: 'normal'
                    }]
                });

                $("#tS1").thumbnailScroller({      
                    scrollerType:"hoverAccelerate",     
                    scrollerOrientation:"horizontal",       
                    scrollEasing:"easeOutCirc",         
                    scrollEasingAmount:400,         
                    acceleration:2,         
                    scrollSpeed:400,        
                    noScrollCenterSpace:4,      
                    autoScrolling:0,        
                    autoScrollingSpeed:1000,        
                    autoScrollingEasing:"easeInOutQuad",        
                    autoScrollingDelay:20 
                });
                $("#tS2").thumbnailScroller({
                    scrollerType:"clickButtons", 
                    scrollerOrientation:"horizontal", 
                    scrollSpeed:2, 
                    scrollEasing:"easeOutCirc", 
                    scrollEasingAmount:600, 
                    acceleration:4, 
                    scrollSpeed:800, 
                    noScrollCenterSpace:10, 
                    autoScrolling:0, 
                    autoScrollingSpeed:2000, 
                    autoScrollingEasing:"easeInOutQuad", 
                    autoScrollingDelay:500 
                });
                $("#tS3").thumbnailScroller({
                    scrollerType:"hoverPrecise", 
                    scrollerOrientation:"vertical", 
                    scrollSpeed:2, 
                    scrollEasing:"easeOutCirc", 
                    scrollEasingAmount:800, 
                    acceleration:4, 
                    scrollSpeed:800, 
                    noScrollCenterSpace:10, 
                    autoScrolling:0, 
                    autoScrollingSpeed:2000, 
                    autoScrollingEasing:"easeInOutQuad", 
                    autoScrollingDelay:500 
                });
            });
        </script>
    </head>
    <body>
        <!-- CONTENT GOES HERE -->
    </body>
</html>

最後に役立つヒント

Google Chromeでビューを「テスト」する場合は、ctrl+shift+j を押して「firebug のような」コンソール ウィンドウを表示し、すべてが正しく読み込まれることを確認します。[コンソール] タブをクリックして、すべてのエラー メッセージと警告を表示し、次のような独自のテストを実行します。

$(".click-me").click(function(e) { 
    // the following will show in console when an element 
    // having the class "click-me" is clicked
    console.log("I've been Clicked!"); 
});

余談ですが

エラーと警告のメッセージテキストを「Google」に送信して、問題の回答を得ることができます。Google だけでなく、次回エラーに遭遇した場合は、次のことを試してください。

最後に非常に役立つヒントがあるので、以下を最後まで読んでください。

  • ctrl+shift+jで Google Chrome のコンソールを開く
  • [コンソール] タブをクリックして、エラー メッセージを表示します。
  • メッセージ テキストを強調表示し、ctrl+cを押してコピーします
  • Googleにアクセスし、検索バーをクリックします
  • ctrl+vを押してメッセージを検索フィールドに貼り付けます
  • このテキストの最後に「スペース」を入れて、「 site: http://stackoverflow.com」 と入力します。
    • これにより、正確なエラー メッセージを StackOverflow サイトでのみ検索できるようになるため、正確なエラーに関する多くの Q&A が得られます。
于 2012-06-02T16:38:36.717 に答える