jQueryjQueryを使い始める


備考

jQueryは、DOM操作、イベント処理、AJAX、およびアニメーションを簡素化するJavaScriptライブラリです。また、基礎となるDOMやJavaScriptエンジンで多くのブラウザ互換性の問題を処理します。

jQueryの各バージョンは、圧縮された(圧縮された)形式と圧縮されていない形式の両方でhttps://code.jquery.com/jquery/からダウンロードできます。

バージョン

バージョンノート発売日
1.0 最初の安定版 2006-08-26
1.1 2007-01-14
1.2 2007-09-10
1.3 シズルがコアに導入されました 2009-01-14
1.4 2010-01-14
1.5 遅延コールバック管理、Ajaxモジュールの書き換え 2011-01-31
1.6 attr() val()メソッドとval()メソッドで大幅なパフォーマンス向上 2011-05-03
1.7 新しいイベントAPI: on()off() 2011-11-03
1.8 シズル、書き直されたアニメーション、 $(html, props)柔軟性。 2012-08-09
1.9 廃止予定のインターフェイスの削除とコードクリーンアップ 2013-01-15
1.10 1.9と2.0の両方のベータサイクルから報告されたバグ修正と相違点の組み込み 2013-05-24
1.11 2014-01-24
1.12 2016年1月8日
2.0 パフォーマンスの向上とサイズの縮小のためのIE 6-8サポートの廃止 2013年4月18日
2.1 2014-01-24
2.2 2016年1月8日
3.0 いくつかのjQueryカスタムセレクタの大幅な高速化 2016-06-09
3.1 サイレントエラーは発生しません 2016-07-07

入門

次の内容のhello.html ファイルを作成します。

<!DOCTYPE html>
<html>
<head>
    <title>Hello, World!</title>
</head>
<body>
    <div>
        <p id="hello">Some random text</p>
    </div>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#hello').text('Hello, World!');
        });
    </script>
</body>
</html>
 

JSBinのライブデモ

このファイルをWebブラウザで開きます。その結果Hello, World! というテキストのページが表示されますHello, World!

コードの説明

  1. jQueryのCDNからjQueryライブラリをロードします。

    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
     

    これは$ グローバル変数、 jQuery 関数と名前空間のエイリアスを導入します。

    jQueryをインクルードする際によくある間違いの1つは、それに依存するか使用する他のスクリプトやライブラリよりも前にライブラリをロードすることに失敗していることに注意してください。

  1. jQueryによってDOM( Document Object Model )が「準備完了」であると検出されたときに実行される関数をディファレンスします。

    // When the `document` is `ready`, execute this function `...`
    $(document).ready(function() { ... });
     
    // A commonly used shorthand version (behaves the same as the above)
    $(function() { ... });
     
  1. DOMの準備ができたら、jQueryは上記のコールバック関数を実行します。私たちの機能の中には、2つの主要なことをする呼び出しが1つしかありません:

    1. id 属性がhelloセレクターの #hello )に等しい要素を取得します。渡された引数としてセレクタを使用することは、jQueryの機能と命名の中核です。本質的にdocument.querySelectorAll MDNの拡張から進化しました。

    2. 選択した要素内のtext() Hello, World! 設定しtext() Hello, World!

      #    ↓ - Pass a `selector` to `$` jQuery, returns our element
      $('#hello').text('Hello, World!');
      #             ↑ - Set the Text on the element
       

詳細については、 jQuery - Documentationページを参照してください。

名前空間の衝突を避ける

jQuery以外のライブラリでも$ をエイリアスとして使用できます。これにより、これらのライブラリとjQueryとの間で干渉が発生する可能性があります。

他のライブラリで使用するために$ をリリースするには:

jQuery.noConflict();
 

この関数を呼び出した後、 $jQuery エイリアスではなくなりました。ただし、変数jQuery 自体を使用してjQuery関数にアクセスすることはできます。

jQuery('#hello').text('Hello, World!');
 

必要に応じて、別の変数をjQueryの別名として割り当てることができます。

var jqy = jQuery.noConflict();
jqy('#hello').text('Hello, World!');
 

逆に、他のライブラリがjQueryを妨害しないようにするには直ちに呼び出される関数式(IIFE)に jQueryコードをラップし、引数としてjQuery を渡します。

(function($) {
    $(document).ready(function() {
        $('#hello').text('Hello, World!');
    });
})(jQuery);
 

このIIFEの内部では、 $ はjQueryのエイリアスです。

jQueryの$ エイリアス保護し、DOMが準備完了であることを確認するもう一つの簡単な方法:

jQuery(function( $ ) { // DOM is ready
   // You're now free to use $ alias
   $('#hello').text('Hello, World!');
});
 

要約する、

  • jQuery.noConflict()$ はもはやjQueryを参照するのではなく、変数jQuery が参照します。
  • var jQuery2 = jQuery.noConflict() - $ はもはやjQueryを参照しませんが、変数jQuery は変数jQuery2 ます。

今、第3のシナリオが存在しますjQuery2 のみ使用できるようにしたい場合はどうなりますか?つかいます、

var jQuery2 = jQuery.noConflict(true)

これは、 jQuery を参照する$jQuery どちらも意味しません。

これは、複数のバージョンのjQueryを同じページにロードする場合に便利です。

<script src='https://code.jquery.com/jquery-1.12.4.min.js'></script>
<script>
    var jQuery1 = jQuery.noConflict(true);
</script>
<script src='https://code.jquery.com/jquery-3.1.0.min.js'></script>
<script>
    // Here, jQuery1 refers to jQuery 1.12.4 while, $ and jQuery refers to jQuery 3.1.0.
</script>
 

https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

HTMLページの先頭にスクリプトタグを含める

公式のCDNからjQueryをロードするには、jQueryのWebサイトにアクセスしてください 。利用できるさまざまなバージョンとフォーマットのリストが表示されます。

利用可能なjQueryのバージョンを示すjQuery CDNページ

今、ロードしたいjQueryのバージョンのソースをコピーします。たとえば、 jQuery 2.Xをロードする場合、 非圧縮または縮小タグをクリックすると、次のように表示されます。

jQueryバージョンでポップアップされたスクリプトタグが選択されています

フルコードをコピー(またはコピーアイコンをクリック)し、htmlの<head> または<body> に貼り付けます。

ベストプラクティスは、 async 属性を持つheadタグに外部JavaScriptライブラリをロードすることです。ここにデモがあります:

<!DOCTYPE html>
    <html>
      <head>
         <title>Loading jquery-2.2.4</title>
         <script src="https://code.jquery.com/jquery-2.2.4.min.js" async></script>
      </head>
      <body>
          <p>This page is loaded with jquery.</p>
      </body>
   </html>
 

async 属性を使用する場合は、JavaScriptライブラリが非同期にロードされ、使用可能な限りすぐに実行されるので、意識してください。 2つ目のライブラリが最初のライブラリに依存する2つのライブラリが含まれている場合は、2番目のライブラリがロードされて最初のライブラリの前に実行されると、エラーが発生し、アプリケーションが壊れる可能性があります。

jQueryネームスペース( "jQuery"と "$")

jQuery は、あらゆるjQueryコードを書くための出発点です。これは、関数jQuery(...) または変数jQuery.foo として使用できます。

$jQuery のエイリアスであり、通常は相互に交換できます( jQuery.noConflict(); が使用されている場合を除く - 「 名前空間の衝突の回避参照)。

このHTMLスニペットがあると仮定すると、

<div id="demo_div" class="demo"></div>
 

このdivにテキストコンテンツを追加するためにjQueryを使用することができます。これを行うには、jQueryのtext() 関数を使用します。これはjQuery$ を使って書くことができます。すなわち、

jQuery("#demo_div").text("Demo Text!");
 

または -

$("#demo_div").text("Demo Text!");
 

両方とも同じ最終的なHTMLをもたらすでしょう -

<div id="demo_div" class="demo">Demo Text!</div>
 

$jQuery よりも簡潔であるため、一般的にjQueryコードを書くのに望ましい方法です。

jQueryはCSSセレクタを使用し、上記の例ではIDセレクタが使用されていました。 jQuery のセレクタの詳細については、セレクタのタイプを参照してください。

jQueryを持っていないページにコンソール経由でjQueryをロードしています。

jQuery を使用していないページで作業する必要がある場合がありますが、ほとんどの開発者はjQuery 便利に使用しています。

このような状況では、 Chrome Developer Tools コンソール( F12 )を使用して、次のjQuery を実行して、ロードされたページにjQuery を手動で追加できます。

var j = document.createElement('script');
j.onload = function(){ jQuery.noConflict(); };
j.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(j);
 

必要なバージョンが上記( 1.12.4 )と異なる場合、 ここに必要なバージョンのリンクが表示されます

名前空間のjQueryプラグインの読み込み

通常、プラグインを読み込むときは、必ずjQueryの後にプラグイン含めてください。

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="some-plugin.min.js"></script>
 

複数のバージョンのjQueryを使用する必要がある場合は、必要なバージョンのjQueryの後にプラグインをロードしてからjQuery.noConflict(true) を設定するコードをjQuery.noConflict(true) 。次のバージョンのjQueryとそれに関連するプラグインをロードします。

<script src="https://code.jquery.com/jquery-1.7.0.min.js"></script>
<script src="plugin-needs-1.7.min.js"></script>
<script>
// save reference to jQuery v1.7.0
var $oldjq = jQuery.noConflict(true);
</script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="newer-plugin.min.js"></script>
 

プラグインを初期化するときは、関連するjQueryバージョンを使用する必要があります

<script>
// newer jQuery document ready
jQuery(function($){
  // "$" refers to the newer version of jQuery
  // inside of this function

  // initialize newer plugin
  $('#new').newerPlugin();
});

// older jQuery document ready
$oldjq(function($){
  // "$" refers to the older version of jQuery
  // inside of this function

  // initialize plugin needing older jQuery
  $('#old').olderPlugin();
});
</script>
 

両方のプラグインを初期化するために1つのドキュメント準備関数しか使用できませんが、ドキュメント準備関数内の余分なjQueryコードの混乱や問題を避けるために、参照を分けておく方が良いでしょう。

jQueryオブジェクト

jQueryが呼び出されるたびに、 $() またはjQuery() 、内部的にjQuery new インスタンスが作成されます。これは新しいインスタンスを示すソースコードです

// Define a local copy of jQuery
jQuery = function( selector, context ) {

    // The jQuery object is actually just the init constructor 'enhanced'
    // Need init if jQuery is called (just allow error to be thrown if not included)
    return new jQuery.fn.init( selector, context );
}
 

内部的にjQueryはそのプロトタイプを.fn として参照しており、jQueryオブジェクトを内部的にインスタンス化するためにここで使用されているスタイルは、呼び出し元がnew 明示的に使用しなくてもそのプロトタイプを公開できるようにします。

インスタンス(jQuery API( .eachchildrenfilter など)がどのように公開されているか)に加えて、内部的にjQueryはセレクタの結果と一致する配列のような構造を作成します何も指定されていないもの、 undefinednull 、または類似のものが引数として渡されました)。単一のアイテムの場合、この配列のような構造はそのアイテムだけを保持します。

簡単なデモンストレーションは、idを持つ要素を見つけて、jQueryオブジェクトにアクセスして基礎となるDOM要素を返すことです(これは、複数の要素が一致または存在する場合にも機能します)。

var $div = $("#myDiv");//populate the jQuery object with the result of the id selector
var div = $div[0];//access array-like structure of jQuery object to get the DOM Element