JavaScriptでWebページの要素（DOM）を動かしたり、ボタンが押されたときの処理を簡単に記述できるライブラリが「jQuery（ジェイクエリ）」です。
本記事では、jQueryの基本である「CDNでの読み込み」「DOM操作」「クリックイベント」「フォーム送信制御」「CSSクラスのつけ外し」を実用的なサンプルコード付きで分かりやすく解説します！
【サンプルコード】jQuery基本動作コード全文
以下のサンプルコード（整形済みテキスト枠）は、HTML内にjQueryの読み込み、CSSスタイル、JavaScript処理をすべて含んだ完成コードです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery学習</title>
<!-- jQueryの読み込み（CDN） -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.highlight {
background-color: yellow;
padding: 5px;
}
#result {
margin: 10px 0;
padding: 10px;
border: 1px solid #ccc;
}
.myClass {
color: blue;
margin: 5px 0;
}
#itemList {
list-style-type: none;
padding: 0;
}
#itemList li {
padding: 5px;
border-bottom: 1px solid #eee;
}
</style>
<!-- 自作のJavaScript処理 -->
<script>
$(document).ready(function() {
// クリックイベントの処理
$('#clickBtn').click(function() {
$('#result').text('ボタンがクリックされました！');
});
// フォーム送信の処理
$('#myForm').submit(function(e) {
e.preventDefault();
var inputValue = $('#inputText').val();
alert('入力値: ' + inputValue);
});
// 要素の追加
$('#itemList').append('<li>新しい項目</li>');
// クラスの追加と削除
$('.myClass').addClass('highlight')
.removeClass('oldClass');
});
</script>
</head>
<body>
<!-- セレクタの例 -->
<div id="myId">ID要素</div>
<div class="myClass">クラス要素</div>
<!-- イベント処理の例 -->
<button id="clickBtn">クリックしてください</button>
<div id="result"></div>
<!-- 要素の追加例 -->
<ul id="itemList">
<li>項目1</li>
<li>項目2</li>
</ul>
<!-- フォームの例 -->
<form id="myForm">
<input type="text" id="inputText">
<button type="submit">送信</button>
</form>
</body>
</html>
コードの重要ポイントと書き方解説
上記のサンプルコードで使われている主要な処理と文法を詳しく見ていきましょう。
jQueryの読み込みと準備 ($(document).ready())
HTMLの <head> 内でCDNを使ってjQuery本体（jquery-3.6.0.min.js）を読み込んでいます。
JavaScript内の $(document).ready(function() { ... }); は、「HTMLの読み込みが完了してから処理を実行する」ための記述です。これにより、要素が存在しない状態でスクリプトが動いてエラーになるのを防ぎます。
クリックイベントとテキストの書き換え (.click(), .text())
$('#clickBtn').click(function() {
$('#result').text('ボタンがクリックされました！');
});$('#clickBtn') でID名が「clickBtn」のボタンを指定し、クリックされた際に #result の中身を新しいテキストへ書き換えています。
フォームの送信キャンセルと入力値の取得 (e.preventDefault(), .val())
$('#myForm').submit(function(e) {
e.preventDefault();
var inputValue = $('#inputText').val();
alert('入力値: ' + inputValue);
});e.preventDefault(); を実行することで、フォーム送信によるページの再読み込み（画面遷移）を防止します。その後、$('#inputText').val() でテキストボックスに入力された文字列を取得しています。
HTML要素の動的追加 (.append())
$('#itemList').append('<li>新しい項目</li>');指定した要素（#itemList）の末尾に、新しいHTML要素（<li>）を動的に追加しています。
CSSクラスの追加と削除 (.addClass(), .removeClass())
$('.myClass').addClass('highlight')
.removeClass('oldClass');要素に対して動的にCSSクラスを付与・削除するメソッドです。ドット（.）で繋げる「メソッドチェーン」を使うことで、複数の処理を連続して記述できます。
動作確認の手順（簡単3ステップ）
- ステップ1： テキストエディタ（VS Codeやメモ帳など）を開きます。
- ステップ2： 上記のサンプルコードを貼り付け、ファイル名を
index.htmlとして保存します。 - ステップ3： 保存した
index.htmlをダブルクリックしてブラウザ（ChromeやEdge等）で開きます。ボタンをクリックしたり文字を入力して動きを確認してみましょう。
まとめ
jQueryを使うと、少ないコード量でHTMLの操作やイベント処理をシンプルに記述することができます。
まずは基本文法と主要なメソッド（click, text, append, addClass など）をマスターして、動きのあるWebサイト制作に役立ててみてください！
