jqueryのノード操作方法を深く理解する-フロントエンドQ&A-php.cn

jqueryのノード操作方法を深く理解する

Apr 07, 2023 am 09:03 AM

jQuery は、HTML DOM を操作するための便利な API を提供する人気のある JavaScript ライブラリです。 Web開発ではノードの追加、移動、削除、変更などの操作が必要になることがよくあります。この記事では、HTML DOM をより便利に操作するために、よく使われる jQuery ノードの操作方法を紹介します。

ノードの選択

jQuery では、セレクターを使用して HTML 要素を選択できます。一般的に使用されるセレクターメソッドの一部を次に示します。

$(selector): 指定されたセレクターの HTML 要素を選択します。
.class: 指定されたクラス名の HTML 要素を選択します。
#id: 指定された ID 名の HTML 要素を選択します。

サンプルコード:

$(document).ready(function() {
  // 选择所有段落元素
  $("p").css("background-color", "yellow");

  // 选择具有 "intro" 类的所有元素
  $(".intro").css("font-size", "20px");

  // 选择具有 id 名称为 "myDiv" 的元素
  $("#myDiv").css("border", "1px solid red");
});

ログイン後にコピー

ノードの追加

jQuery が提供する一連のメソッドを使用して、新しいノードを追加できます。

2.1 .before() および .after()

.before() および .after() メソッドは、指定された要素または、後で新しい要素を挿入します。以下はサンプルコードです:

$(document).ready(function() {
  // 在每个 p 元素前插入一个新的 div 元素
  $("p").before("&lt;div&gt;Hello, world!&lt;/div&gt;");

  // 在每个 p 元素后插入一个新的 span 元素
  $("p").after("&lt;span&gt;Goodbye, world!&lt;/span&gt;");
});

ログイン後にコピー

2.2 .prepend() および .append()

.prepend() および .append()メソッド新しい要素は、指定された要素の前後に挿入できます。両者の違いは、.prepend() メソッドは指定された要素の先頭に新しい要素を挿入するのに対し、.append() メソッドは最後に新しい要素を挿入することです。指定された要素の。サンプルコードは次のとおりです。

$(document).ready(function() {
  // 在每个 div 元素内部前面插入一个新的 span 元素
  $("div").prepend("&lt;span&gt;Hello, world!&lt;/span&gt;");

  // 在每个 div 元素内部后面插入一个新的 p 元素
  $("div").append("&lt;p&gt;Goodbye, world!&lt;/p&gt;");
});

ログイン後にコピー

ノードの移動

新しいノードを追加するだけでなく、jQuery を使用して既存のノードを移動することもできます。一般的に使用される 2 つのメソッドは次のとおりです:

3.1 .insertBefore() および .insertAfter()

.insertBefore() および .insertAfter() このメソッドは、指定された要素を他の要素の前面または背面に移動できます。以下はサンプルコードです:

$(document).ready(function() {
  // 将每个 p 元素移动到前一个 div 元素前面
  $("p").insertBefore("div");

  // 将每个 span 元素移动到后一个 div 元素后面
  $("span").insertAfter("div");
});

ログイン後にコピー

3.2 .prependTo() および .appendTo()

.prependTo() および .appendTo()メソッド指定した要素を別の要素の内側、その前または後ろに移動できます。以下はサンプルコードです:

$(document).ready(function() {
  // 将每个 span 元素移动到每个 p 元素内部前面
  $("span").prependTo("p");

  // 将每个 p 元素移动到每个 div 元素内部后面
  $("p").appendTo("div");
});

ログイン後にコピー

ノードの削除

.remove() と .empty() を使用できます。 jQuery によって提供されます ノードを削除するメソッド。

4.1 .remove()

.remove() メソッドは、一致する HTML 要素とそのすべての子要素を削除できます。以下はサンプルコードです。

$(document).ready(function() {
  // 删除所有具有 class 名称为 "test" 的元素
  $(".test").remove();
});

ログイン後にコピー

4.2 .empty()

.empty() メソッドは、一致する要素のすべての子要素を削除できます。以下はサンプルコードです:

$(document).ready(function() {
  // 删除所有 ul 元素的子元素
  $("ul").empty();
});

ログイン後にコピー

ノードの変更

最後に、提供された .html()、.text を使用できます。 jQuery ()、.attr()、.css() メソッドを使用して、ノードのコンテンツ、属性、またはスタイルを変更します。

5.1 .html()

.html() メソッドは、一致する要素の HTML コンテンツを設定または返すことができます。以下はサンプルコードです。

$(document).ready(function() {
  // 设置所有 p 元素的 HTML 内容
  $("p").html("&lt;b&gt;Hello, world!&lt;/b&gt;");

  // 返回第一个 div 元素的 HTML 内容
  var html = $("div").html();
  console.log(html);
});

ログイン後にコピー

5.2 .text()

.text() メソッドは、一致する要素のテキストコンテンツを設定または返すことができます。以下はサンプルコードです:

$(document).ready(function() {
  // 设置所有 p 元素的文本内容
  $("p").text("Hello, world!");

  // 返回第一个 div 元素的文本内容
  var text = $("div").text();
  console.log(text);
});

ログイン後にコピー

5.3 .attr()

.attr() このメソッドは、一致する要素の属性を設定または返すことができます。以下はサンプルコードです:

$(document).ready(function() {
  // 设置所有 img 元素的 src 属性
  $("img").attr("src", "new_image.png");

  // 返回第一个 a 元素的 href 属性
  var href = $("a").attr("href");
  console.log(href);
});

ログイン後にコピー

5.4 .css()

.css() メソッドは、一致する要素のスタイルを設定または返すことができます。以下はサンプルコードです。

$(document).ready(function() {
  // 设置所有 p 元素的背景颜色和字体大小
  $("p").css({
    "background-color": "yellow",
    "font-size": "20px"
  });

  // 返回第一个 div 元素的宽度
  var width = $("div").css("width");
  console.log(width);
});

ログイン後にコピー

概要

上記は、jQuery で一般的に使用されるノード操作メソッドであり、開発に利便性と柔軟性をもたらします。もちろん、さらに多くの jQuery API が私たちの調査と学習を待っています。初心者でも経験豊富な開発者でも、この記事が役に立つと思います。

以上がjqueryのノード操作方法を深く理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。