Detailed explanation of usage examples of attr() and prop() functions in jQuery (with usage differences)

この記事の例では、jQuery での attr() 関数と prop() 関数の使用法について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

1. jQuery の attr() メソッド

attr() メソッドは jQuery で要素の属性を取得および設定するために使用されます。attr は Attr() の略称で、jQuery の DOM 操作でよく使用されます。

1. attr (属性名) //属性の値を取得 (最初に一致した要素の属性値を取得します。このメソッドは、最初に一致した要素から属性の値を簡単に取得できます。対応する属性がある場合は、未定義を返します)

2. attr(属性名, 属性値) //属性の値を設定します (一致するすべての要素に属性値を設定します)

3. attr (属性名, 関数値) //属性の関数値を設定します (一致するすべての要素に対して計算された属性値を設定します。値を指定するのではなく、関数を指定し、これによって計算される値を指定します)関数は属性値です。)

4.attr(properties) //指定された要素に複数の属性値を設定します。つまり、{属性名 1: "属性値 1"、属性名 2: "属性値 2"、… … }。 (これは、一致するすべての要素にわたって多くの属性をバッチで設定する最良の方法です。オブジェクトのクラス属性を設定したい場合は、属性名として「className」を使用する必要があることに注意してください。または、「class」を直接使用することもできます。または「ID」)

サンプルコード:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery中attr()方法</title>
<script src="js/jquery-1.4.2.min.js" language="javascript" type="text/javascript" ></script>
<style>
p{color:red}
li{color:blue;}
.lili{font-weight:bold;color:red;}
#lili{font-weight:bold;color:red;}
</style>
</head>
<body>
<p title="你最喜欢的水果是。">你最喜欢的水果是？</p>
<ul>
<li title="苹果汁">苹果</li>
<li title="橘子汁" alt="123">橘子</li>
<li title="菠萝汁">菠萝</li>
</ul>
<script>
...
</script>
</body>
<html>

Copy after login

1.attr(name)//属性の値を取得します

1.1 attr(name) を使用してタイトル値を取得します:

<script>
alert($("ul li:eq(1)").attr("title"));
</script>

Copy after login

結果:

1.2 attr(name) を使用して alt 値を取得します:

<script>
alert($("ul li:eq(1)").attr("alt"));
</script>

Copy after login

結果:

2. attr(name,value) //属性の値を設定します

2.1 attr(name,value) を使用してタイトルの値を次のように変更します: オレンジは食べないでください

<script>
$("ul li:eq(1)").attr("title","不吃橘子");
alert($("ul li:eq(1)").attr("title"));
</script>

Copy after login

結果:

3. attr(name,fn) //属性の関数値を設定します

3.1 alt 属性の値を title 属性の値に設定します。

<script>
$("ul li:eq(1)").attr("title",function(){ return this.alt});
alert($("ul li:eq(1)").attr("title"));
</script>

Copy after login

結果:

4.attr(properties) //「名前/値」の形式でオブジェクトを、一致するすべての要素の属性として設定します

4.1

を取得し、title 属性と alt 属性を設定します。

<script>
$("ul li:eq(1)").attr({title:"不喝橘子汁",alt:"不是123"});
alert($("ul li:eq(1)").attr("title"));
alert($("ul li:eq(1)").attr("alt"));
</script>

Copy after login

結果:

4.2

設定クラスを取得します。

<script>
$("ul li:eq(1)").attr({className:"lili"});
</script>

Copy after login

結果:

4.3

の設定 ID を取得します。

<script>
$("ul li:eq(1)").attr({id:"lili"});
</script>

Copy after login

結果:

4.4

を取得し、スタイルを設定します。

<script>
$("ul li:eq(1)").attr({style:"color:red"});
</script>

Copy after login

結果:

li に alt を追加するのは間違いです。img、area、input 要素 (アプレット要素を含む) でのみ使用できます。 input 要素の場合、alt 属性は送信ボタンの画像を置き換えることを目的としています。ここでは attr() メソッドを詳しく説明するために適切な属性がないため、attr() メソッドの使用方法の学習と参照のみを目的として alt を使用します。

alt と tite の違いは次のとおりです。

alt: 画像を説明するために使用されるテキストです。画像が表示できない場合、画像の代わりにこれらのテキストが表示されます。画像上にマウスを移動するとテキストも表示されます。
title: マウスを置いた後に表示されるテキストです。

では、属性を削除するにはどうすればよいでしょうか?

jquery で属性を削除するキーワードは、removeAttr です。使用方法を参照してください。
使用法 1 と同じ HTML コードですが、li の title 属性を削除したいので、次のようにします。

<script>
$("ul li:eq(1)").removeAttr ("title");
</script>

Copy after login

これは非常に簡単です。attr は実際にはネイティブ JS での getAttribute の簡略化された実装であり、removeAttr は RemoveAttribute の略語です。

それでは、attr() に似た属性はあるのでしょうか?

jquery の

val() は 、
に似ています。 $(this).val(); $(this).attr("value");
と同等の要素ノードの値を取得します。 $(this).val(value); $(this).attr("value",value);

と同等の要素ノードの値を設定します。

2. jQuery の prop() メソッド:

prop() 関数は、現在の jQuery オブジェクトと一致する要素の属性値を設定または返すために使用されます。

この関数はjQueryオブジェクト(インスタンス)に属します。 DOM 要素のプロパティを削除する必要がある場合は、removeProp() 関数を使用します。

文法

この関数はjQuery 1.6で追加されました。 prop() 関数には次の 2 つの用途があります:

使用法 1:

jQueryObject.prop( propertyName [, value ] )
指定されたプロパティ propertyName の値を設定または返します。 value パラメーターが指定されている場合は、プロパティ propertyName の値を value に設定することを意味し、value パラメーターが指定されていない場合は、プロパティ propertyName の値を返すことを意味します。

パラメータ値は関数にすることもできます。prop() は、一致したすべての要素に基づいて関数を実行します。関数内の this ポインターは、対応する DOM 要素を指します。 prop() は 2 つのパラメーターも関数に渡します。最初のパラメーターは一致する要素内の要素のインデックスで、2 番目のパラメーターは要素の propertyName 属性の現在の値です。関数の戻り値は、要素の propertyName 属性に設定された値です。

使用法 2:

jQueryObject.prop( オブジェクト )
任意の数のプロパティの値をオブジェクトとして同時に設定します。オブジェクト object の各属性は propertyName に対応し、属性の値は value に対応します。

注: prop() 関数のすべての「属性の設定」操作は、現在の jQuery オブジェクトと一致する各要素に対して行われます。すべての「属性の読み取り」操作は、最初に一致した要素に対してのみ行われます。
パラメータ

前の構文セクションで定義されたパラメーター名に基づいて、対応するパラメーターを見つけてください。

Parameters	Description
propertyName	String type specifies the attribute name.
value	Optional/Object/Function type specifies the attribute value, or the function that returns the attribute value.
object	Object specified by type , used to encapsulate multiple key-value pairs and set multiple attributes at the same time.