ホームページ >ウェブフロントエンド >jsチュートリアル >jQueryのattrとpropの違いは何ですか

jQueryのattrとpropの違いは何ですか

清浅
清浅オリジナル
2018-11-23 16:22:222911ブラウズ

この記事では、jQuery の属性の設定と属性の取得に関する attr() と prop() の違いについて説明します。これには一定の参考値があり、皆様のお役に立てれば幸いです。

たとえば、画像の alt 属性を取得するには attr() メソッドを使用します。ただし、一部の要素では直接取得できません。標準属性 (true/false) を取得するので、後で prop 属性を取得します。その戻り値はすべて標準属性なので、どの属性が attr を使用し、どの属性が prop を使用するでしょうか。

attr 属性については、次の記事で詳しく紹介します。

attr(name|properties|key,value|fn)

が使用されます。選択した要素の属性値を設定または返します。

属性値を返すために使用すると、最初に一致した要素の値のみが返されます。

属性値の設定に使用すると、一致する要素のセットに対して 1 つ以上の属性/値のペアが設定されます

例: すべての画像の src 属性と長さと幅を設定します

<body>
	<img>
	<script src="jquery/jquery-1.12.4.js"></script>
	<script>
		$(function(){
$("img").attr({width:"100px",height:"100px","src":"images/1.jpg"});
		})//为img添加多个属性值
</script>
</body>

Image 11.jpg

propattribute

一致した要素セット内の最初の要素の属性値を取得します

選択済みは true、未選択は false

趣味を選択する場合はすべて選択、その他は単一選択、4 つすべてを選択するとすべての趣味が選択されます

<script src="jquery/jquery-1.12.4.js"></script>
<script>
 $(function () {
 
  $("#j_cbAll").click(function () {
   //修改下面的哪些checkbox
   $("#j_tb input").prop("checked", $(this).prop("checked"));
 });
  $("#j_tb input").click(function () {
   if($("#j_tb input:checked").length  ==  $("#j_tb input").length){
    $("#j_cbAll").prop("checked", true)
}else {
    $("#j_cbAll").prop("checked", false)
  }
 });
 
});

</script>

単一選択の場合

Image 12.jpg

趣味を選ぶとき


属性と小道具の違い:

( 1) たとえば、checked、selected、disabled などでは、prop メソッドはブール値を返しますが、attr は定義された文字列を返します。

(2) prop() 属性は次の目的で使用されます。指定された DOM 要素を設定または取得する JavaScript では要素もオブジェクト属性であるため、配列またはオブジェクトを設定できます。また、attr はドキュメント ノードに作用するため、文字列のみにすることができます

(3) prop() の使用Attr よりも Attributes の方が互換性があります。

したがって、属性が属性名を追加するだけの場合は attr を使用でき、true/false を返すだけでよい場合は prop を使用できます。

要約: 上記がこの記事の全内容です。この記事を通じて、皆さんが attr と prop の違いを理解できることを願っています。

以上がjQueryのattrとpropの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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