jQueryの簡単な使い方

Web ページに jQuery を追加する

Web ページに jQuery を追加するには、さまざまな方法があります。 次の方法を使用できます:

  • jquery.com から jQuery ライブラリをダウンロード

  • Google から jQuery をロードするなど、CDN から jQuery をロード

jQuery をダウンロード

ダウンロードできる jQuery には 2 つのバージョンがあります:
製品バージョン - 実際の Web サイトで使用され、合理化され、圧縮されています。

    開発バージョン - テストおよび開発用 (非圧縮、読み取り可能なコード)
  • 上記の両方のバージョンは、jquery.com からダウンロードできます。
  • jQuery ライブラリは、HTML <script> タグを使用して参照できる JavaScript ファイルです:

  • <head>
<script src="jquery-1.10.2.min.js"></ script>

</head>

注: jQuery を使用するには、ダウンロードしたファイルを Web ページと同じディレクトリに配置します。 jQuery をダウンロードしてホストしたくない場合は、CDN (コンテンツ配信ネットワーク) 経由で参照することもできます。

Baidu、Youpaiyun、Sina、Google、Microsoft はすべてサーバーに jQuery を搭載しています。

サイトのユーザーが国内の場合は、Baidu、Youpaiyun、Sina などの国内の CDN アドレスを使用することをお勧めします。サイトのユーザーが外国の場合は、Google と Microsoft を使用できます。

注: このサイトのすべての例は、Baidu jQuery CDN ライブラリを使用しています。

<head><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">

</script>

</head>


例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
 <script>
 $(document).ready(function(){
 $("#hide").click(function(){
 $("p").hide();
 });
 $("#show").click(function(){
 $("p").show();
 });
 });
 </script>
</head>
<body>
 <p>欢迎大家来到php.cn</p>
 <button id="hide">隐藏</button>
 <button id="show">显示</button>
</body>
</html>
学び続ける
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); }); </script> </head> <body> <p>欢迎大家来到php.cn</p> <button id="hide">隐藏</button> <button id="show">显示</button> </body> </html>
  • おすすめコース
  • コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜