jQuery による DOM 要素属性 attr() および RemoveAtrr() の操作に関する詳細な説明

jQuery で要素の属性を操作する方法:
attr(): 一致する要素の属性値を読み取るか、書き込みます。
removeAttr(): 一致した要素から指定された属性を削除します。

attr() メソッド読み取り操作

attr() 読み取り操作。読み取られるのは、一致する要素内の最初の要素の指定された属性値です。
形式: .attr(attributeName)、戻り値のタイプ: String 存在しない属性を読み取ると、未定義が返されます。

セレクターの選択結果は集合である場合があり、ここでは集合内の最初の要素の属性値のみが取得されることに注意してください。 例を見てください:

コードをコピーします コードは次のとおりです:

<頭>

<スクリプトタイプ="text/javascript">
$(document).ready(function () {
$("ボタン").click(function () {
alert($("p").attr("title"));//属性を取得
// このコードは最初の要素の属性のみを取得できます。
});
});

段落 1

段落 2

タイトルを取得

実行結果: ポップアップ ボックスの表示: title1.

各要素の属性を個別に取得したい場合は、.each() メソッドや .map() メソッドなどの jQuery のループ構造を使用する必要があります。
上記の例は次のように変更できます:

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="text/javascript">
$(document).ready(function () {
$("ボタン").click(function () {
// 選択範囲内のすべての要素の属性を取得します。
$("p").each(function () {
alert($(this).attr("title"));
});
});
});

各要素の属性を個別に取得できます。

attr() メソッド書き込み操作

attr() 書き込み操作。一致する要素の 1 つ以上の属性に値を割り当てます。

一般的な形式: .attr(attributeName, value)、属性の値を設定します。
戻り値の型: jQuery チェーンメソッド呼び出しもサポートします。
書き込み操作を実行するとき、指定された属性名が存在しない場合は、その名前の属性が追加されます。つまり、その名前は属性名で、その値は
です。
属性の書き込みは、コレクション内の各要素と一致するように実行されます。例を参照してください:

コードをコピー コードは次のとおりです:

<頭>

<スクリプトタイプ="text/javascript">
$(document).ready(function(){
$("#button1").click(function(){
$("p").attr("title","Hello World");
});
});

これは段落です。

これは div です。

これは別の段落です。

これは別の div です。

ボタンをクリックすると、すべての p が属性 title="Hello World" とともに追加されます。

書き込み操作には他に 2 つの形式があります:
.attr(属性) と .attr(属性名, 関数).
以下は別途ご紹介します。

.attr(属性):

ここでの属性タイプは PlainObject で、複数の属性を一度に設定するために使用できます。
PlainObject とは何ですか? 簡単に説明すると、中括弧で囲まれた一連のキーと値のペアです。手順については、質問の最後にあるリンクを参照してください。 キーと値はコロン (:) で区切られ、各キーと値のペアはカンマ (,) で区切られます。
注: 複数の属性値を設定する場合、属性名の引用符はオプションです (存在する場合と存在しない場合があります)。ただし、クラス属性は引用符で囲む必要があります。
例:

コードをコピーします コードは次のとおりです:

<頭>

<スクリプトタイプ="text/javascript">
$(document).ready(function () {
$("#button1").click(function () {
$("p").attr("title", "Hello World");
});
$("#button2").click(function () {
$("div").attr({"title": "div のタイトル", "hello": "世界"});
});
});

これは段落です。

これは div です。

これは別の段落です。

これは別の div です。

2 つのボタンをクリックすると、要素は次のように変わります:

このうち、

の hello は、値が World である新しいカスタム属性です。

.attr(属性名, 関数(インデックス, 古い値)):

関数を使用して属性値を設定します。関数の最初のパラメーターはインデックスで、2 番目のパラメーターは属性の以前の値です。 例を見てください:

コードをコピー

コードは次のとおりです:

<頭>
<スタイル>
div {
色: 青;
}
スパン {
色: 赤;
}
b {
フォントの太さ: 太字;
}


<スクリプトタイプ="text/javascript">
$(document).ready(function () {
$("div")
.attr("id", function (index, oldAttr) {
if (oldAttr) {
"div-id" インデックス oldAttr を返します;
} else {
"div-id" インデックスを返します;
}
})
.each(関数() {
$("span", this).html("(id = '" this.id "')");
});
});

ゼロ番目

最初の

2 番目

上の例、对应の页面結果は以下の通り:

　　あるメソッドを使用してプロパティ値を設定する場合、その設定された関数に戻り値がない場合、または未定義が返された場合、現在の値は変更されません。
　　即時運営会被忽略。
　　また、上の例、attr() 内の関数が未定義を返します:
　　以下のように:

复制代 代码如下:

<スクリプトタイプ="text/javascript">
    $(document).ready(function () {
        $("div").attr("id", function (index, oldAttr) {
            未定義を返します;
        }).each(function () {
            $("span", this).html("(id = '" this.id "')");
        });
    });

 
　　返される页面効果の例:

つまり、いかなる変更操作も行わず、オリジナルのプロパティ値を保持します。
 
　　注意:jQuery は と の type プロパティを変更できません。結果が修正された場合は、浏览器报错にあります。
　　これは、IE ブラウザでは type プロパティを変更できないためです。

removeAttr() メソッド

移除適合元素セット中每一元素の指定プロパティ。
　　deleteAttr() メソッドは JavaScript のremoveAttribute() メソッドを使用しますが、jQuery オブジェクトを直接使用でき、各ブラウザーのプロパティ名が考慮され処理されない可能性があります。
　　例子:

复制代 代码如下:

<頭>
   
    <スクリプトタイプ="text/javascript">
        $(document).ready(function () {
            $("input[type=button]").click(function () {
                $("div").removeAttr("title");
            });
        });
   

ゼロ

ボタンをクリックすると、
の title 属性が削除されます。
注: RemoveAttr() を使用して onclick を削除することは IE6-8 では機能しません。この問題を回避するには、
メソッドを使用する必要があります。 例:

コードをコピー コードは次のとおりです:

$element.prop( "onclick", null );
console.log( "onclick プロパティ: ", $element[ 0 ].onclick );

このウェブサイトの声明

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