jQuery_jqueryのattr()メソッドの使用例

この記事の例では、jQuery での attr() メソッドの使用法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

このメソッドは、一致する要素の属性値を設定または返します。
attr() メソッドはパラメータに応じて異なる機能を持ちます。

文法構造 1:
最初に一致した要素の指定された属性の属性値を取得します。

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

$(selector).attr(name)

パラメータリスト:

参数	描述
name	定义要获取其值的属性名称。

コード例:

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

<頭>





<スクリプトタイプ="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
alert($("div").attr("class"));
})
})

私が最初の div

私は 2 番目の div

クリックして効果を確認してください

上記のコードでは、ボタンをクリックすると、一致する要素コレクション内の最初の要素のクラス属性値がポップアップ表示されます。

文法構造 2:
一致する要素の指定された属性の属性値を設定します。

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

$(selector).attr(attribute,value)

パラメータリスト:

参数	描述
attribute	定义要设置值的属性名称。
value	定义要设置的属性值。

实例代码:

复制代 代码如下:

<頭>





<スクリプトタイプ="text/javascript">
$(document).ready(function(){
  $("#btn").click(function(){
    $("div").attr("クラス","リセット");
  });
})

脚本之家欢迎您

点击查看效果

上記のコードでは、ポイントが割り当てられたときに、div 要素のクラス プロパティ値を再設定できます。

语法结构三:
「名前/値」形式のオブジェクトは、適合要素のプロパティとして設定されます。複数の「名前/値」の対を一括して設定して、適合要素のプロパティを設定することができます。

复制代码代码如下:$(selector).attr(properties)

パラメータ数列表:

コード例:

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

<頭>




<スクリプトタイプ="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$("td").attr({幅:"200",高さ:"300"});
})
})



<テーブルボーダー="1">

スクリプト ハウスへようこそ


クリックして効果を確認してください

上記のコードでは、セルの幅と高さを設定できます。

構文構造 4: 関数の戻り値を通じて属性値を設定します。

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

$(selector).attr(name,function(index) 、古い値) )

パラメータリスト:

参数	描述
name	定义要设置值的属性的名称。
function(index,oldvalue)	定义返回属性值的函数 index - 可选，接受选择器的索引位置。 class - 可选，接受选择器的当前的属性值。

实例代码:

复制代码 代码如下:

脚本之家欢迎您

点击查看效果

以上代码中，同样可以设置div的class属性值，只是属性值是以函数的返回值方式获得的。

希望本文所述对大家的jQuery程序设计有所帮助。