jQueryのインストール
jQuery インストール
WebページにjQueryを追加する
jQueryをWebページに追加するには、さまざまな方法があります。 次の方法を使用できます:
- jquery.com から jQuery ライブラリをダウンロードします
- Google から jQuery をロードするなど、CDN から jQuery をロードします
jQuery をダウンロードします
ダウンロードできる jQuery には 2 つのバージョンがあります。
- 製品バージョン - 実際の Web サイトで使用され、合理化され、圧縮されています。
- 開発バージョン - テストおよび開発用 (非圧縮、読み取り可能なコード)
上記の両方のバージョンは、jquery.com からダウンロードできます。
jQuery ライブラリは、HTML の <script> タグを使用して参照できる JavaScript ファイルです:
<script src="jquery-1.10.2.min.js">< script>
</head>
ヒント: jQuery を使用するには、ダウンロードしたファイルを Web ページと同じディレクトリに置きます。
 | なぜ <script> タグで type="text/javascript" を使用しないのか疑問に思いませんか? HTML5 では、その必要はありません。 JavaScript は、HTML5 およびすべての最新ブラウザのデフォルトのスクリプト言語です。 |
|---|
代替案
jQuery をダウンロードしてホストしたくない場合は、CDN (コンテンツ配信ネットワーク) を通じて参照することもできます。
Baidu、Youpaiyun、Sina、Google、Microsoft はすべてサーバーに jQuery を搭載しています。
サイトのユーザーが国内の場合は、Baidu、Youpaiyun、Sina などの国内の CDN アドレスを使用することをお勧めします。サイトのユーザーが外国の場合は、Google と Microsoft を使用できます。
注: このサイトのすべての例では、Baidu jQuery CDN ライブラリを使用しています。
Baidu、Youpaiyun、Sina、Google、または Microsoft から jQuery を参照するには、次のコードのいずれかを使用してください:
Baidu CDN:
Instance
<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>Run Instance»
「Click」をクリックオンライン インスタンスを表示するには [インスタンスの実行] ボタン
Youpaiyun CDN:
インスタンス
<!DOCTYPE html>
<html>
<head>
<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>インスタンスの実行»
[インスタンスの実行] ボタンをクリックしてオンライン インスタンスを表示します
Sina CD N :
インスタンス
<!DOCTYPE html>
<html>
<head>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>インスタンスの実行»
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
Google CDN:
| Google CDN を通じて利用可能な最新バージョンを入手します: の使用は推奨されませんGoogle 製品は中国で非常に人気があるため、バージョンを取得するには Google CDN が不安定です。 Google URL の内容を確認すると、URL には jQuery バージョン (1.8.0) が指定されています。最新バージョンの jQuery を使用したい場合は、バージョン文字列の末尾から数字を削除することもできます (この例では 1.8 など)。Google は 1.8 シリーズの利用可能な最新バージョン (1.8.0、1.8) を返します。 .1 など）、または最初の番号だけを残すことも可能で、Google は 1 シリーズで利用可能な最新バージョン（1.1.0 ～ 1.9.9）を返します。 |
|---|
Microsoft CDN:
インスタンス
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>インスタンスの実行»
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
| | 百度を使用してください、Youpaiyun 、Sina、Google、または Microsoft の jQuery には大きな利点があります: 多くのユーザーは、他のサイトにアクセスするときに、Baidu、Youpaiyun、Sina、Google、または Microsoft の jQuery をすでにロードしています。その結果、ユーザーがサイトにアクセスすると、jQuery がキャッシュから読み込まれ、読み込み時間が短縮されます。同時に、ほとんどの CDN は、ユーザーがファイルを要求すると、ユーザーに最も近いサーバーから応答が返されることを保証するため、読み込み速度も向上します。 |
|---|
