ホームページ > ウェブフロントエンド > フロントエンドQ&A > jqueryは属性メソッドを呼び出します

jqueryは属性メソッドを呼び出します

王林
リリース: 2023-05-28 16:13:38
オリジナル
503 人が閲覧しました

JQuery は非常に一般的に使用される JavaScript ライブラリであり、特に DOM を操作する場合に JavaScript コードの記述を大幅に簡素化できます。この記事では、JQueryの属性メソッド(.prop()と.attr())を使ってHTML要素の属性を操作する方法を紹介します。

Attribute メソッドは、HTML 要素の属性を取得および設定するために使用されるメソッドを指します。 HTML では、属性はタグの一部であり、属性によってタグまたはタグのコンテンツをカスタマイズできます。 JQuery には、プロパティにアクセスするための 2 つのメソッド、.prop() と .attr() が用意されています。

.prop() メソッドは、標準 HTML 属性 (チェック済み、無効、選択済みなど) およびオブジェクト属性 (nodeName、nodeType など) を取得および設定するために使用され、ブール値を返します。値、文字列、または数値。 .prop() メソッドの基本的な使用法は次のとおりです。

// 获取属性值
$(selector).prop(propertyName);

// 设置属性值
$(selector).prop(propertyName, value);
ログイン後にコピー

たとえば、ラジオ ボタンが選択されているかどうかを取得するには、次のコードを使用できます。

<input type="radio" name="gender" id="male" value="male">Male
<input type="radio" name="gender" id="female" value="female">Female
ログイン後にコピー
if ($('#male').prop('checked')) {
  // 如果male被选中
}
ログイン後にコピー

If you wantすべてのテキスト入力ボックスを無効にするには、次のコードを使用できます。

$('input[type="text"]').prop('disabled', true);
ログイン後にコピー

逆に、すべてのテキスト入力ボックスを有効にしたい場合は、パラメータ値を false に設定します。

.attr() メソッドは、すべての HTML 属性を取得および設定し、文字列値を返すために使用されます。 .attr() メソッドの基本的な使用法は次のとおりです。

// 获取属性值
$(selector).attr(attributeName);

// 设置属性值
$(selector).attr(attributeName, value);
ログイン後にコピー

たとえば、画像の alt 属性値を取得するには、次のコードを使用できます。 img タグの src 属性値を変更したい場合は、次のコードを使用できます:

<img src="image.jpg" alt="这是一张照片">
ログイン後にコピー

一部のプロパティは、.prop() と .attr() の両方を使用して取得および設定できることに注意してください。メソッドを使用できますが、一部のプロパティではいずれかのメソッドしか使用できません。たとえば、チェックされたプロパティと無効なプロパティは .prop() メソッドでのみ使用でき、.attr() メソッドを使用しても効果はありません。

要約すると、HTML 属性を操作する場合、標準の HTML 属性またはオブジェクト属性を操作している場合は、.prop() メソッドを使用する必要があります。これ以外の HTML 属性を操作したい場合は、.attr() メソッドを使用する必要があります。両方の方法を使用する場合は、トレードオフを考慮し、望ましい結果を得るために適切な方法を選択する必要があります。

上記は、JQuery の属性メソッド (.prop() および .attr()) の基本的な紹介です。 JQuery について詳しく知りたい場合は、JQuery の公式ドキュメントを読んでください。

以上がjqueryは属性メソッドを呼び出しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート