jQuery要素を追加および削除する方法-jsチュートリアル-php.cn

jQuery要素を追加および削除する方法

yulia

リリース： 2018-09-17 15:43:40

オリジナル

1162 人が閲覧しました

仕事の都合上、要素の追加、削除、変更、検索が必要になることがよくありますが、その方法は何ですか?この記事では、jQuery 要素を追加および削除する方法を説明します。困っている友達は参考にしていただければ幸いです。

DOM は Document Object Module の略称で、一般に DOM の操作は 3 つの側面に分けられます。

1. DOM コア

DOM コアは JavaScript に限定されたものではなく、DOM をサポートするあらゆるプログラミング言語で使用でき、その用途は Web ページだけではありません。 XML などのマークアップ言語で記述されたドキュメントを処理するためにも使用できます。
例: document,getElementsByTagName("form"); //DOM Core を使用してフォームオブジェクトを取得します。

2. HTML-DOM

JavaScript と DOM を使用して HTML ファイルのスクリプトを作成する場合、HTML-DOM に属する属性が多数あります。 -DOM DOM Core よりも以前から、さまざまな HTML 要素の属性を記述するためのより簡潔な表記法が提供されていました。
例: document.forms //HTML-DOM はフォームオブジェクトを提供します。
PS: オブジェクトと属性の取得は、DOM Core または HTML-DOM を使用して実装できることがわかります。

3. CSS-DOM

CSS-DOM は、CSS の操作です。CSS-DOM の主な機能は、CSS のさまざまな要素を取得して設定することです。スタイルオブジェクト。この属性を使用すると、Web ページでさまざまな効果を表現できます。
例: element.style.color=”red”;//要素のフォントの色を設定するメソッド。

一般的な方法

1. 要素ノードの検索

var $li = $(“ul li:eq(0)”);//获取ul标记下的第一个li,也可以写成 $(“#ulID li:eq(0)”);

ログイン後にコピー

2. 要素属性の検索

jquery の attr() メソッドを使用して、要素のさまざまな属性の値を取得します。attr() メソッドのパラメータは 1 つまたは 2 つです。
パラメータが 1 の場合、それはクエリ対象の属性の名前です。
パラメータが 2 つある場合、属性の値を設定できます。

alert($(“#id”).attr(“title”)); //输出元素的title属性.一个参数
$(“#id”).attr(“title”,”改变title值”); //改变元素的title属性值.二个参数

ログイン後にコピー

3. 要素ノードの追加

$(html) $(html) メソッドが受信した HTML タグ文字列に基づいて dom オブジェクトを作成することを簡単に説明します。そして、この dom オブジェクトを jquery オブジェクトにラップして返します。つまり、マークのすべての HTML コードを $() ファクトリに入れるだけです。
例:

 var $htmlLi = $(”  <li title=’香蕉’>香蕉</li>”);  //创建DOM对象
         var $ul = $(“ul”);   //获取UL对象
         $ul.append($htmlLi); //将$htmlLi追加到$ul元素的li列表

ログイン後にコピー

4. 要素ノードの削除

DOM 要素を頻繁に動的に変更する必要があるため、Jquery は 2 種類の削除ノードを提供します。メソッド、つまり、remove() と empty();

4.1 delete() method

$("p").remove();// 取得できます。削除する要素を指定して、remove() メソッドを呼び出します。
$("ul li:eq(0)").remove().appendTo("ul"); // ul マークの下の最初の li を削除します。そして、削除された li マークを ul に追加します。remove() メソッドは、削除された要素の参照を返します。この時点では、引き続き
$("ul li").remove("li[ title!= ABC]");//remove は、修飾された要素を選択的に削除するパラメータを受け入れることができます;

4.2 empty() メソッド

厳密に言えば、空の ()このメソッドは要素を削除するのではなく、クリアします。
例:

HTML代码
       <ul>
          <li title=”AAA”>AAA</li>
       </ul>
      JQuery代码
      $(“ul li:eq(0)”).empty();

ログイン後にコピー

Result

    <ul>
          <li title=”AAA”></li>
       </ul>

ログイン後にコピー

クリアされるのはコンテンツだけであり、属性はクリアされないことに注意してください。

以上がjQuery要素を追加および削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。