// クラスで選択 $(".myClass") //

// タグで選択 $("p") // すべての

要素 // 属性で選択 $("[data-role='button']") // data-role="button"を持つ要素 // 複合セレクター $("div.myClass") // class="myClass"を持つdiv要素 $("#container p") // id="container"内のすべてのp要素 $("li:first") // 最初のli要素 $("li:last") // 最後のli要素 $("li:eq(2)") // 3番目のli要素（0から開始） }); ``` ## DOM操作 ### テキストとHTMLの操作 ```html

元のメッセージ

``` ```javascript $(function() { // テキストの取得と設定 $("#changeText").click(function() { // テキストの取得 var currentText = $("#message").text(); console.log("現在のテキスト: " + currentText); // テキストの設定 $("#message").text("新しいメッセージに変更されました！"); }); // HTMLの取得と設定 $("#addHTML").click(function() { // HTMLの設定 $("#info").html("重要: これはHTMLです"); // HTMLの追加 $("#info").append("
追加のテキスト"); $("#info").prepend("先頭に追加: "); }); }); ``` ### 属性とCSSの操作 ```html

``` ```javascript $(function() { // 属性の操作 $("#changeImage").click(function() { // 属性の取得 var currentSrc = $("#myImage").attr("src"); console.log("現在の画像: " + currentSrc); // 属性の設定 $("#myImage").attr({ "src": "image2.jpg", "alt": "画像2" }); }); // CSS操作 $("#toggleStyle").click(function() { // CSSクラスの追加/削除 $("#myImage").toggleClass("highlight"); // 直接CSSスタイルの設定 $("#myImage").css({ "border-radius": "10px", "transition": "all 0.3s ease" }); }); }); ``` ### 要素の作成と削除 ```html

アイテム1
アイテム2

``` ```javascript $(function() { // 要素の追加 $("#addItem").click(function() { var newText = $("#newItem").val(); if (newText.trim() !== "") { // 新しいli要素を作成して追加 var newLi = $("

").text(newText); $("#itemList").append(newLi); // 入力欄をクリア $("#newItem").val(""); } }); // 要素の削除 $("#removeItem").click(function() { $("#itemList li:last").remove(); }); // リストアイテムをクリックで削除 $(document).on("click", "#itemList li", function() { $(this).fadeOut(function() { $(this).remove(); }); }); }); ``` ## イベント処理 ### 基本的なイベント ```html

マウスイベントエリア

``` ```javascript $(function() { // クリックイベント $("#clickBtn").click(function() { $("#output").append("

ボタンがクリックされました！

"); }); // 入力イベント $("#textInput").on("input", function() { var inputValue = $(this).val(); $("#output").html("

入力中: " + inputValue + "

"); }); // マウスイベント $("#mouseArea") .mouseenter(function() { $(this).css("background-color", "yellow"); $("#output").append("

マウスが入りました

"); }) .mouseleave(function() { $(this).css("background-color", "lightblue"); $("#output").append("

マウスが出ました

"); }); // フォーカスイベント $("#textInput") .focus(function() { $(this).css("border", "2px solid green"); }) .blur(function() { $(this).css("border", "1px solid #ccc"); }); }); ``` ### フォームイベント ```html

``` ```javascript $(function() { // フォーム送信イベント $("#myForm").submit(function(e) { e.preventDefault(); // デフォルトの送信動作を防ぐ // フォームデータの取得 var formData = { name: $("#name").val(), email: $("#email").val(), age: $("#age").val() }; // バリデーション if (formData.name === "" || formData.email === "") { $("#formOutput").html("

名前とメールは必須です

"); return; } // 送信成功時の処理 $("#formOutput").html( "

送信されたデータ:

" + "

名前: " + formData.name + "

" + "

メール: " + formData.email + "

" + "

年齢: " + formData.age + "

" ); // フォームをリセット this.reset(); }); // 選択変更イベント $("#age").change(function() { var selectedAge = $(this).val(); if (selectedAge) { $("#formOutput").append("

年齢層が選択されました: " + selectedAge + "

"); } }); }); ``` ## アニメーション ### 基本的なアニメーション ```html

アニメーション

``` ```javascript $(function() { // フェードイン/フェードアウト $("#fadeToggle").click(function() { $("#animationBox").fadeToggle(1000); // 1000ms = 1秒 }); // スライドアップ/スライドダウン $("#slideToggle").click(function() { $("#animationBox").slideToggle("slow"); }); // カスタムアニメーション $("#customAnimate").click(function() { $("#animationBox").animate({ width: "200px", height: "200px", opacity: 0.5, marginLeft: "50px" }, 2000, function() { // アニメーション完了後のコールバック alert("アニメーションが完了しました！"); // 元に戻す $(this).animate({ width: "100px", height: "100px", opacity: 1, marginLeft: "0px" }, 1000); }); }); }); ``` ### 連続アニメーション（チェーン） ```html

チェーン

``` ```javascript $(function() { $("#startChain").click(function() { $("#chainBox") .animate({left: "200px"}, 1000) // 右に移動 .animate({top: "100px"}, 1000) // 下に移動 .animate({left: "0px"}, 1000) // 左に移動 .animate({top: "0px"}, 1000) // 上に移動 .fadeOut(500) // フェードアウト .fadeIn(500); // フェードイン }); }); ``` ## Ajax通信 ### 基本的なAjax ```html

``` ```javascript $(function() { // GET リクエスト $("#loadData").click(function() { $.ajax({ url: "https://jsonplaceholder.typicode.com/posts/1", method: "GET", dataType: "json", beforeSend: function() { $("#ajaxResult").html("

読み込み中...

"); }, success: function(data) { $("#ajaxResult").html( "

取得したデータ:

" + "

タイトル: " + data.title + "

" + "

内容: " + data.body + "

" ); }, error: function(xhr, status, error) { $("#ajaxResult").html("

エラーが発生しました: " + error + "

"); } }); }); // POST リクエスト $("#sendData").click(function() { var postData = { title: "jQueryからの投稿", body: "これはjQueryのAjaxで送信されたデータです", userId: 1 }; $.ajax({ url: "https://jsonplaceholder.typicode.com/posts", method: "POST", data: JSON.stringify(postData), contentType: "application/json; charset=utf-8", dataType: "json", success: function(response) { $("#ajaxResult").html( "

送信成功:

" + "

作成されたID: " + response.id + "

" + "

タイトル: " + response.title + "

" ); }, error: function(xhr, status, error) { $("#ajaxResult").html("

送信エラー: " + error + "

"); } }); }); }); ``` ### 簡略化されたAjaxメソッド ```javascript $(function() { // $.get() - GETリクエストの簡略形 $("#simpleGet").click(function() { $.get("https://jsonplaceholder.typicode.com/users/1") .done(function(data) { console.log("成功:", data); }) .fail(function() { console.log("失敗"); }); }); // $.post() - POSTリクエストの簡略形 $("#simplePost").click(function() { $.post("https://jsonplaceholder.typicode.com/posts", { title: "簡単な投稿", body: "$.post()を使用", userId: 1 }) .done(function(data) { console.log("投稿成功:", data); }); }); // $.getJSON() - JSON取得の簡略形 $("#getJson").click(function() { $.getJSON("https://jsonplaceholder.typicode.com/posts/1", function(data) { console.log("JSONデータ:", data); }); }); }); ``` ## 実践的な例：ToDoアプリ ```html jQuery ToDoアプリ

ToDoアプリ

総タスク数: 0

完了済み: 0

``` ## よく使うjQueryメソッド一覧 ### 基本操作 ```javascript // 要素選択 $("selector") // セレクターで要素選択 $(this) // 現在の要素 $(document) // ドキュメント全体 // 内容操作 .text() // テキストの取得/設定 .html() // HTMLの取得/設定 .val() // フォーム要素の値取得/設定 .attr() // 属性の取得/設定 .removeAttr() // 属性の削除 // CSS操作 .css() // CSSスタイルの取得/設定 .addClass() // クラス追加 .removeClass() // クラス削除 .toggleClass() // クラス切り替え .hasClass() // クラス存在確認 // DOM操作 .append() // 末尾に追加 .prepend() // 先頭に追加 .after() // 要素の後に追加 .before() // 要素の前に追加 .remove() // 要素削除 .empty() // 子要素をすべて削除 // イベント .click() // クリックイベント .on() // イベント登録 .off() // イベント削除 .trigger() // イベント発火 // アニメーション .show() // 表示 .hide() // 非表示 .fadeIn() // フェードイン .fadeOut() // フェードアウト .slideUp() // スライドアップ .slideDown() // スライドダウン .animate() // カスタムアニメーション ``` ## まとめ jQueryは、JavaScriptをより簡単に書けるようにする強力なライブラリです。この章で学習した内容： - **jQueryの導入**: CDNまたはローカルファイルでの読み込み方法 - **基本構文**: セレクターと$(document).ready()の使い方 - **DOM操作**: 要素の選択、内容変更、属性操作 - **イベント処理**: クリック、フォーム、マウスイベントの処理 - **アニメーション**: フェード、スライド、カスタムアニメーション - **Ajax通信**: サーバーとの非同期通信 - **実践例**: ToDoアプリの実装 jQueryをマスターすることで、インタラクティブなWebページを効率的に作成できるようになります。まずは基本的な操作から始めて、徐々に複雑な機能に挑戦してみてください。 ## 次のステップ 1. **jQueryプラグイン**: 既存のプラグインを使って機能を拡張 2. **jQuery UI**: ユーザーインターフェース要素の実装 3. **モダンJavaScript**: ES6+やReact、Vue.jsなどの学習 4. **パフォーマンス最適化**: jQueryコードの効率化現代のWeb開発では、ReactやVue.jsなどのフレームワークが主流になっていますが、jQueryで学んだ概念は他の技術でも応用できる重要な基礎知識となります。

jQuery入門

送信されたデータ:

取得したデータ:

送信成功:

ToDoアプリ