jQuery - サンプル(Hello, World!)

作成日:2018-12-10

1. 概要

jQueryのサンプルです。画面に「Hello, World!」と表示します。

jQueryを使うには、
外部にあるファイルを読み込んで使う方法と、
ファイルをローカルにダウンロードして、そのファイルを読み込んで使う方法があります。
以下の<script>タグを</body>の上に挿入します。

外部にあるファイルを読み込んで使う方法
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
読み込み用のタグは、jQuery CDN などから取得できます。
リンク先の、uncompressed は未圧縮ファイル、minified は圧縮済みファイル、slim は一部の機能を含んでいないファイルとなっています。最初は minified を使用しておけば問題ないと思います。

ダウンロードしたファイルを読み込んで使う方法
<script src="jquery-3.3.1.min.js"></script>
ファイルは、公式サイトのDownloading jQueryからダウンロードできます。

2. サンプル

<div>タグ内に、動的にHTMLを設定します。
ソース
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title></head><body>

<!-- 結果表示エリア -->
<div id="msg"></div>

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

<!-- サンプル -->
<script>
  $("#msg").html("Hello, World!");
</script>
</body></html>

実行結果

3. 説明

$("#msg") は <div id="msg"> を指し、オブジェクトとして操作できます。
サンプルでは、html() を使って、HTMLを設定しています。