jQuery - サンプル(Hello, World!)
公開日：2018-12-10 更新日：2019-05-14
[jQuery]
1. 概要
jQueryのサンプルです。画面に「Hello, World!」と表示します。
jQueryを使うには、
外部にあるファイルを読み込んで使う方法と、
ファイルをローカルにダウンロードして、そのファイルを読み込んで使う方法があります。
以下の<script>タグを</body>の上に挿入します。
外部にあるファイルを読み込んで使う方法
リンク先の、uncompressed は未圧縮ファイル、minified は圧縮済みファイル、slim は一部の機能を含んでいないファイルとなっています。最初は minified を使用しておけば問題ないと思います。
ダウンロードしたファイルを読み込んで使う方法
jQueryを使うには、
外部にあるファイルを読み込んで使う方法と、
ファイルをローカルにダウンロードして、そのファイルを読み込んで使う方法があります。
以下の<script>タグを</body>の上に挿入します。
外部にあるファイルを読み込んで使う方法
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
リンク先の、uncompressed は未圧縮ファイル、minified は圧縮済みファイル、slim は一部の機能を含んでいないファイルとなっています。最初は minified を使用しておけば問題ないと思います。
ダウンロードしたファイルを読み込んで使う方法
<script src="jquery-3.3.1.min.js"></script>
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を設定しています。
サンプルでは、html() を使って、HTMLを設定しています。