jQuery チュートリアル => jQueryを使い始める

備考

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

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 のセレクタの詳細については、セレクタのタイプを参照してください。

入門

次の内容の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!

コードの説明

jQueryのCDNからjQueryライブラリをロードします。
```
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
```
これは$グローバル変数、 jQuery関数と名前空間のエイリアスを導入します。
jQueryをインクルードする際によくある間違いの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() { ... });

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ページを参照してください。

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

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

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

フルコードをコピー（またはコピーアイコンをクリック）し、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.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/

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が呼び出されるたびに、 $()または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（ .each 、 children 、 filterなど）がどのように公開されているか）に加えて、内部的にjQueryはセレクタの結果と一致する配列のような構造を作成します何も指定されていないもの、 undefined 、 null 、または類似のものが引数として渡されました）。単一のアイテムの場合、この配列のような構造はそのアイテムだけを保持します。

簡単なデモンストレーションは、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

名前空間の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コードの混乱や問題を避けるために、参照を分けておく方が良いでしょう。

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

jQuery チュートリアル
jQueryを使い始める

サーチ…

備考