jqueryの属性操作でattrを使う時のポイント

18/11/18 14:22:34 19/05/05 15:03:08

jQueryはJavaScriptのライブラリですが、HTMLの指定、操作方法としてはCSSに近い性質を持ちます。そしてattrはjQueryのなかでもHTML要素の属性取得や設定ができる利便性の高いメソッドなので、jQuery学習の初期段階から知っておきたいメソッドになります。

このページではattrの基本から少し応用的なポイントまで解説していきます。それほど難しい点はないかと思いますが、万が一よくわからない場合もattrはよく出てくるのでそのうちわかってきます。

そのため、まずはattrの詳細というよりは概要を掴み、使い方を理解するよう努めてください。

1 attrの基本的な使用方法
2 属性の付与
3 属性の削除
4 propメソッドの使い方
5 案件量が豊富なアルマサーチ

attrの基本的な使用方法

まずはattrメソッドの基本的な使用方法ですが、文法は以下のようになります。

[対象要素, attr(属性, (変更する値) )]

第二引数の変更する値については、属性を変更する場合のみ指定します。実際のサンプルコードで確認していきます。

<body>
<p id="sample">Hello World</p>
<script>
var result = $('p').attr('id');
console.log( result );
</script>
</body>

上記のように記述すると、以下のようにコンソール出力されます。

sample

何を書いているかというと、pタグのidを取得するように記述しています。result変数に取得した属性が入っているので、出力するとsampleというid名が表示されます。また上で説明した第二引数を使って属性を変更してみます。

<body>
<p id="sample">Hello World</p>
<script>
var result = $('p').attr('id', 'text');
console.log( result[0] );
</script>
</body>

上記のソースコードを実行すると、以下のようにコンソール出力されます。

<p id=”text”> Hello World </p>

id属性をtextに変更しました。変更と同時に取得してコンソール出力しています。

属性の付与

上ではattrの基本的な属性取得、変更の方法を紹介しましたが、attrメソッドは属性が付与されていない要素に属性を付与することが可能です。具体的には以下のようになります。

<body>
<p> Hello World</p>
<script>
var result = $('p').attr('id', 'text');
console.log( result[0] );
</script>
</body>

上記のソースコードを実行すると、以下のようにコンソール出力されます。

<p id=”text”> Hello World </p>

もともとpタグには何の属性も付いていませんでしたが、attrメソッドによってid属性textを付与しました。同様に、複数の属性を設定することも可能です。文法は以下のようになります。

[ 対象要素.attr( { 属性:’値’, 属性:’値’, 属性:’値’,・・・ } ) ]

カンマ区切りで、「{}」で囲うことで複数の属性を設定できます。サンプルコードを確認しましょう。

<body>
<input>
<script>
var result = $('input').attr({
　　　　id: 'text',
　　　　class: 'form',
　　　　type: 'checkbox',
　　　　value: 'one',
　　　　checked: true
});
console.log( result[0] );
</script>
</body>

上記のソースコードを実行すると、以下のようにコンソール出力されます。

<input id=”text” class=”form” type=”checkbox” value=”one” checked=”checked”>

inputタグに対して複数の属性を設定しました。

属性の削除

次に、属性を削除する方法を紹介します。属性の削除はattrではなくremoveAttrメソッドを使用するので、この点は注意が必要です。具体的なソースコードは以下のようになります。

<body>
<p class="text"> Hello World </p>
<script>
var result = $('p').removeAttr('class');
console.log( result[0] );
</script>
</body>

上記のソースコードを実行すると、以下のようにコンソール出力されます。

<p> Hello World </p>

removeAttrメソッドを使用することによって、もともとpタグに付与されていたclass属性がなくなりました。

propメソッドの使い方

attrメソッドと似たような使い方ができるメソッドとして、propメソッドがあります。いろいろ出てきて覚えられない、と思われるかもしれませんが、覚える必要はありません。知ってさえいれば細かい部分は実装するときに調べれば良いだけなので、プログラミングは基本的に広く浅く知っておくと良いでしょう。

実装でよく使用するコードは覚えようと思わなくても勝手に覚えるので、無理に覚えようとする必要はないのです。ただしどのようなことができるかを知らないと調べるべき材料がわからないので、広く浅くどのようなコードがあるかを知っておくと良いですね。

propメソッドのサンプルコードは以下です。

<body>
<input type="button" value="ボタン">
<script>
var resultAttr = $('input').attr('type');
var resultProp = $('input').prop('type');
console.log( 'attr：' + resultAttr );
console.log( 'prop：' + resultProp);
</script>
</body>

上記のソースコードを実行すると、以下のようにコンソール出力されます。

attr：button
prop：button

input要素のボタンをattrメソッドとpropメソッドでそれぞれ取得しました。上記のコードではattrでもpropでもまったく同じ結果になっています。つまり、一般的な属性に対して使用する場合attrメソッドもpropメソッドも同じです。

ただし、以下のように特殊な属性に対して使用すると結果が変わってきます。

<body>
<button class=" button1">ボタン1</button>
<button class=" button2" disabled>ボタン2</button>
<script>
var resultAttr1 = $('. button1').attr('disabled');
var resultAttr2 = $('. button 2').attr('disabled');
var resultProp1 = $('. button1').prop('disabled');
var resultProp2 = $('. button2').prop('disabled');
console.log(resultAttr1);
console.log(resultAttr2);
console.log(resultProp1);
console.log(resultProp2);
</script>
</body>