close

jQuery を使用した DOM 操作- テクニックと例

jQuery を使用した DOM 操作では、DOM 構造をターゲットにして、Web ページ上のデータを変更、追加、削除、または操作することができます。 jQuery は、DOM 操作タスクを実行するための便利なメソッドと関数を提供します。

ここでは、具体的な例とともに各セクションの説明を示します。

 

要素の選択

  • $("p"): <p> ページ上のすべての要素を選択します。
  • $(".myClass"): クラスを持つすべての要素を選択します myClass。
  • $("#myElement"): ID を持つ要素を選択します myElement。
  • $("parentElement").find(".childElement") childElement:内の クラスを持つすべての子要素を選択します parentElement。

例： 

$("p").css("color", "red");

 

内容の変更

  • $("#myElement").html("<b>Hello World</b>"): ID を持つ要素の HTML コンテンツを設定します myElement。
  • $("p").text("New text"): すべての要素のテキストの内容を設定します <p>。

例： 

$("p").text("New paragraph");

 

要素の追加と削除

  • $("ul").append("<li>New item</li>"): <li> 順序なしリスト() の最後に要素を追加します <ul>。
  • $(".myClass").remove(): クラスを含むすべての要素を myClass ページから削除します。

例： 

$("ul").append("<li>Item 4</li>");

 

属性とクラスの変更

  • $("img").attr("src", "new-image.jpg"): src すべての要素の属性値を変更します <img>。
  • $("#myElement").addClass("newClass") newClass: ID を持つ要素に クラスを追加します myElement。
  • $("#myElement").removeClass("oldClass") oldClass: ID を持つ要素から クラスを削除します myElement。

例： 

$("img").attr("alt", "New Image");

 

イベント処理

$("button").click(function() { }): 要素がクリックされたときのイベントハンドラー関数を登録します <button>。

例： 

$("button").click(function() {  
  alert("Button clicked!");  
});

 

エフェクトとアニメーション

  • $("#myElement").hide(): ID を持つ要素を非表示にします myElement。
  • $("#myElement").show(): ID を持つ要素を表示します myElement。
  • $("#myElement").fadeOut(): ID の要素にフェードアウト効果を実行します myElement。
  • $("#myElement").fadeIn(): ID の要素にフェードイン効果を実行します myElement。

例： 

$("#myElement").fadeOut(1000, function() {  
  console.log("Fade out complete");  
});