Design
Coding
Setting
jQueryとは
05:04
WEBデザインを下層まで探せるWEBギャラリー・リンク集。
WEBサイト・LPを毎日更新していきます!
WEBデザインを下層まで探せるWEBギャラリー・リンク集。
WEBサイト・LPを毎日更新していきます!
jQueryには、決まった記述方法（基本構文）があります。
この基本構文を理解することで、jQueryのコードを効果的に記述できるようになります。
jQueryは「イベント」「セレクタ」「メソッド」「パラメータ」の4つの要素で構成されます。
基本的な記述では、イベント内で「セレクタ」を使って対象を指定し、次に「メソッド」と「パラメータ」で動作を決めます。
$（エイリアス）は、jQueryでよく使われる短縮記法です。
jQueryでは「jQuery」と記述する代わりに「$」と記述することで、jQueryの機能を簡単に使用することができます。
// jQueryを使う方法
jQuery("p").css("color", "red");
// 短縮形で書く方法
$("p").css("color", "red");イベントとは、ユーザーの操作やブラウザの動作によって発生するアクションのことです。
例えば、「ボタンをクリックする」「マウスを動かす」などがイベントに該当します。
$("#btn").click(function() {
alert("ボタンがクリックされました！");
});| イベント | 説明 | 使用例 |
| click | 要素がクリックされたとき | ボタンをクリックしたときにメッセージを表示 |
| mouseover | マウスが要素の上に乗ったとき | ボタンの色を変更 |
| mouseout | マウスが要素から離れたとき | 元の色に戻す |
| scroll | ページをスクロールしたとき | 一定のスクロール量でボタンを表示 |
| resize | ウィンドウのサイズが変更されたとき | レイアウトを調整 |
| load | ページや画像の読み込みが完了したとき | ローディング画面を非表示にする |
セレクタは、操作したいHTMLの要素を指定する方法で、CSSのセレクタに似ています。
jQueryでは、$(“セレクタ”) の形で記述します。
| セレクタ | 説明 | 指定するもの | 例 |
| ID | $(“#id名”) | idを持つ要素 | $(“#btn”) |
| クラス | $(“.class名”) | classを持つ要素 | $(“.box”) |
| タグ名 | $(“タグ名”) | 指定したタグの要素 | $(“p”) |
| 子要素 | $(“親 > 子”) | 親の直下にある子要素 | $(“ul > li”) |
| 子孫要素 | $(“親 子”) | 親の中にあるすべての子要素 | $(“div span”) |
| 複数指定 | $(“A, B”) | 複数の要素をまとめて指定 | $(“h1, h2, p”) |
jQueryのメソッドは、セレクタで指定した要素に対して処理を実行するための命令です。
例えば、「ボタンをクリックして文字を変更する」「画像を非表示にする」「背景色を変える」など、動作を簡単に設定できます。
| メソッド | できること | 例 |
| .addClass(“クラス名”) | クラスを追加 | $(“#box”).addClass(“active”); |
| .removeClass(“クラス名”) | クラスを削除 | $(“#box”).removeClass(“active”); |
| .toggleClass(“クラス名”) | クラスを切り替え | $(“#box”).toggleClass(“active”); |
| .hide() | 要素を非表示にする | $(“#box”).hide(); |
| .show() | 要素を表示にする | $(“#box”).show(); |
| .toggle() | 表示/非表示を切り替える | $(“#box”).toggle(); |
| .css(“プロパティ”, “値”) | CSSを変更 | $(“#box”).css(“color”, “red”); |
| .html(“<b>文字</b>”) | HTMLを変更 | $(“#box”).html(“<b>こんにちは</b>”); |
| .text(“文字”) | 要素のテキストを変更 | $(“#box”).text(“こんにちは”); |
| .height() | 高さを取得 | $(“#box”).height(); |
| .width() | 幅を取得 | $(“#box”).width(); |
| .fadeIn(speed) | フェードイン表示 | $(“#box”).fadeIn(1000); |
| .fadeOut(speed) | フェードアウト非表示 | $(“#box”).fadeOut(1000); |
jQuery公式ドキュメント：https://api.jquery.com/
パラメータとは、メソッドの動作を細かく指定するための値です。
メソッドによって、数値・文字列・オブジェクト などさまざまな種類のパラメータを設定できます。
$("#box").height(200); // 高さを200pxに設定
$("#box").width(300); // 幅を300pxに設定$("#title").text("こんにちは！"); // テキストを変更$("#box").css({
"background-color": "blue",
"width": "200px",
"height": "100px"
});<script>タグを使ってjQueryコードを記述する方法や、外部JSファイルに記述してそのファイルを読み込む方法について説明します。
JavaScriptやjQueryコードをHTMLファイル内に直接書く方法です。
通常、<script>タグを使用して、コードを記述します。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// jQueryコードを書く
$("#btn").click(function() {
alert("ボタンがクリックされました");
});
});
</script>
</body><head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// jQueryコードを書く
$("#btn").click(function() {
alert("ボタンがクリックされました");
});
});
</script>
</head>
<body>
<button id="btn">クリック</button>
</body>$(document).ready()は、HTMLの要素がすべて読み込まれた状態になったときに実行されるjQueryの書き方です。
HTMLファイルは上から順に読み込まれるため、<head>タグ内に<script>タグを記述すると、まだ<body>タグの要素が読み込まれる前にjQueryコードが実行されてしまいます。
その結果、jQueryコードが対象の要素を見つけられず、エラーが発生することがあります。
$(document).ready(function() {
// ここに処理を書く
});jQuery 3.0 以降では、以下のように短く記述することもできます。
$(function() {
// ここに処理を書く;
});
jQueryコードを別のファイル（.jsファイル）に分けて記述し、HTMLからそのファイルを読み込む方法です。
// script.js
$(document).ready(function() {
$("#btn").click(function() {
alert("ボタンがクリックされました");
});
});<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>外部JSファイルの例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="btn">クリック</button>
<!-- 外部JSファイルを読み込む -->
<script src="script.js"></script>
</body>
</html>
以上が「jQueryの書き方」の説明でした。
次のレッスンは、「実用的なjqueryのコーディング」について説明していきます。
このレッスンでは、実際にコードを書きながら、jQueryの機能を試して理解を深めていきましょう。
jQuery
全 4 動画
