02 jQueryの使い方
jQueryの導入
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>タグの直前に上記のタグを読み込むことで使えるようになります。
ダウンロードして使用する場合
jQueryは公式ウェブサイトからダウンロードできます。以下のステップで進めてください。
- jQueryの公式ウェブサイトにアクセスします。
- 「Download jQuery」セクションを見つけます。通常、ページの上部にあります。
- 最新版を選択します。jQueryには通常、”compressed”（圧縮版）と”uncompressed”（非圧縮版）の2種類があります。開発中は非圧縮版を使うと、コードが読みやすくなりますが、本番環境ではパフォーマンスの観点から圧縮版を使うことを推奨します。
- リンクを右クリックし、「リンク先のファイルを保存」を選んで、ファイルをダウンロードします。
ダウンロードしたjQueryファイルをプロジェクトの適切なディレクトリに配置します。そして、HTMLファイル内で次のようにリンクします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- jQueryの読み込み(ローカルで保存したjQueryファイルを指定) -->
<script src="jquery-3.6.0.min.js"></script>
</head>
<body>
<!-- ここに内容を記述 -->
</body>
</html>jQueryを使ってみる
新しく「Lesson6_jQuery」という名前のフォルダを作成してください。
その中にindex.htmlファイルを作成しましょう。
作成できたら以下のコードをコピペしましょう。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>jQuery Start</title>
</head>
<body>
<div id="box"></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$('#box').text('Hello jQuery!');
</script>
</body>
</html>Cloud9の「Preview」から「Preview File index.html」をクリックしましょう。
画面にHello jQuery!が表示されていたらOKです。
$('#box').text('Hello jQuery!');の部分に注目してみましょう。
jQueryは先ほど言った通りJavaScriptを簡単に記述できるライブラリです。
この部分をJavaScriptで記述すると、以下のようになります。
document.getElementById('box').textContent = "Hello jQuery!";記述量がずいぶん減っていますよね？
このように記述量を減らすことができる点がjQueryのメリットの１つです。このレッスンでjQueryの記述に慣れていきましょう。
では、コードの詳細を説明します。
まず$(’#box’)の部分、$と記述するだけでなんとdocument.getElementByIdが省略できます。
jQuery の $(’#box’)
と
JavaScript の document.getElementById(’box’)
は同じ意味です。
簡単に書けますが１つ気を付けないといけないことがあります。
()の中にidを指定する場合はid名の前に「#（シャープ）」をつけます。classを指定する場合は「.（ドット）」をつけます。
// idを指定する場合
$('#box')
// classを指定する場合
$('.box')「#」と「.」 は忘れがちなので気を付けましょう。
jQueryには様々な便利メソッドが用意されています。
例を下の表にまとめます。
| メソッド | 意味 | パラメータ追加時 |
| .css() | CSSの値を取得 or 書き換え | 指定のCSSスタイルに変更 |
| .html() | 要素の値をHTMLとして取得 or 書き換え | 指定のhtmlに書き換える |
| .text() | 要素の値をテキストとして取得 or 書き換え | 指定のテキストに書き換える |
| .prepend() | 要素内の先頭にHTMLを挿入 | 【必須】 挿入するhtmlの指定 |
| .append() | 要素内の末尾にHTMLを挿入 | 【必須】 挿入するhtmlの指定 |
| .attr() | 属性値の取得 or 設定 | 指定の値に設定・変更 |
| .hide() | 要素を非表示にする | ミリ秒でスピードを指定 |
| .show() | 非表示要素を表示する | ミリ秒でスピードを指定 |
一部のメソッドですが、これだけでもJavaScriptよりも大幅に少ない記述で同じコードを実装できます。
ちなみにですがtext() = textContent です。
JavaScriptと同じようなメソッドも使うことができます。
コメントを残す