30分で理解!jQueryのattr()で属性操作を極めるコツ!

こんにちは、ライターのマサトです!

今回は、jQueryから任意の要素にある属性を取得・変更・設定などができる「attr()」について学習をしましょう!

この記事では、

  • 「attr()」とは?
  • id属性を取得・変更してみよう
  • class属性を設定してみよう
  • 複数の属性を設定する
  • 「removeAttr()」で属性を削除する
  • 「attr()」と「prop()」の違いとは?

などの基本的な内容から、応用的な使い方に関しても解説していきます。

この記事で、「attr()」メソッドをしっかり学習して自分のスキルアップを目指しましょう!

「attr()」とは?

それでは、まず最初に「attr()」メソッドの基本的な知識から学習を進めていきましょう!

「attr()」は、HTML要素の属性を取得したり設定することができるメソッドになります。ここで「属性」についておさらいしておきましょう!

例えば、次のHTML要素を見てください。

aタグが配置されているわけですが、このタグの中にある「class」「href」といったものが属性になります。

そして、「attr()」メソッドを使うことでjQueryからこの属性をいろいろ操作することができるようになります。
本記事で「attr()」メソッドについて、さまざまな活用法を解説していきますのでぜひ参考にしてみてください!

id属性を取得・変更してみよう

ここからは「attr()」メソッドを実際に活用したプログラミングを学習していきましょう!

まずは基本となる属性の「取得・変更」を行ってみます。記述方法としては、【 対象要素.attr( 属性, (変更する値) ) 】のように引数へ任意の属性を指定します。

また、属性を変更する場合のみ第2引数へ変更したい値を指定するわけです。

次のサンプル例を見てください。

実行結果

この例では、id属性が付与されたp要素が配置されていますね。このp要素に対して「attr(‘id’)」と記述することで、id属性の値を取得することができるわけです。

実行結果を見ると、id属性値「sample」がしっかりと出力されています。また、次のように記述することで属性を変更することも可能です!

実行結果

この例では先ほどと同じp要素が配置されています。

そこで、今度は「attr(‘id’, ‘text’)」のように記述することで、id属性値を「text」に変更しているわけです。もともと設定されていたid属性値「sample」はattr()によって上書きされるので、新しく「text」という値に固定されます。

class属性を設定してみよう

さて、attr()を使って属性の「取得・変更」を見てきましたが、今度は属性の「設定」について学んでいきましょう!

これまでのサンプルコードは、もともと「id属性」が付与されている要素でした。実は「attr()」メソッドを使うと、そもそも属性が付与されていない要素に対して好きな属性を付与することが出来るのです。

次のサンプル例を見てください!

実行結果

この例では、一切の属性が付与されていないp要素が配置されています。

そしてこのp要素に対して「attr(‘id’, ‘text’)」のように記述すると、p要素にid属性が付与されるのです。これは実行結果を見ると分かりますが、id属性が新しく付与されているのが確認できますね。

記述方法は属性を変更する時と同じなので、ぜひ覚えておくようにしましょう!

複数の属性を設定する

これまでは1つの属性を設定してきたわけですが、「attr()」は一度に複数の属性を設定することもできます。

記述方法としては【 対象要素.attr( { 属性:’値’, 属性:’値’, 属性:’値’,・・・ } ) 】のように、{ }で複数の属性を囲みます。

次のサンプル例を見てください!

実行結果

この例では、何の属性も付与されていない「inputタグ」が配置されています。

このinput要素に対して、「id / class / type / value / checked」の属性をattr()を使って一度に設定していますね。このような記述で、複数の属性を設定できることは実行結果からも分かります。

ちなみに、attr()の引数に{ }で囲むということはオブジェクト形式で属性を付与するということになるので覚えておきましょう!

「removeAttr()」で属性を削除する

「attr()」メソッドで属性の取得・設定・変更を学習してきましたが、今度は属性の「削除」について見ていきましょう!

「attr()」を使って設定や変更を行った属性を削除するのに、「attr()」メソッドでは適した機能が用意されていません。そこで、jQueryが標準で用意している「removeAttr()」メソッドを使いましょう!

次のサンプル例を見てください!

実行結果

この例では、class属性が付与されたp要素が配置されていますね。

このp要素に対して、「removeAttr(‘class’)」のように記述することでもともと設定されていたclass属性を削除できるのです。もちろん、id属性やname属性などさまざまな属性を指定して削除することも可能です。

削除したあとは実行結果を見ても分かるように「属性」は無くなっていますね。「attr()」と「removeAttr()」はよくセットで使われるので、合わせて覚えておきましょう!

「attr()」と「prop()」の違いとは?

さて、これまで「attr()」メソッドについてのさまざまな使い方を見てきました。

しかしながら、jQueryにはよく似たメソッドとして「prop()」もあります。

次のサンプル例を見てみましょう!

実行結果

この例では、input要素で作ったボタンが配置されています。このinput要素に対して、「attr()」「prop()」それぞれで「type」属性を取得しているのが分かりますね。

しかし、実行結果を見ると…どちらのメソッドでも取得した結果は同じになっています。さて、「attr()」と「prop()」は一体何が違うのでしょうか?

この疑問を解決するには、「checked / disabled」属性のプロパティを取得するとよく分かるのでご紹介します!

checked / disabledについて

それでは、よくフォーム要素などで使われる「checked / disabled」を使って、「attr()」「prop()」の違いを見ていきましょう!

一般的に「checked / disabled」などの属性プロパティは、「値」を指定せずにそのままHTML要素に記述されます。そこで、「attr() / prop()」を使って「値」を取得してみるとどうなるかやってみましょう!

次のサンプル例を見てください!

実行結果

この例では、「disabled」が付与されたbutton要素と付与されていないものが配置されています。

そして、それぞれのbutton要素の「disabled」属性を「attr() / prop()」を使って取得しているのが分かりますね。実行結果を見ると面白い結果が分かります!

「attr()」では、「disabled」が付与されていないと認識できずに「undefined」になっていますね。また、「prop()」では「disabled」の有無によって「true / false」が取得できるようになっています。

つまり、「attr()」はあくまで「属性が付与されているかどうか?」をチェックしているだけにすぎません。そして、「prop()」は「disabled」の現在の状態を確認しているというわけです。

もっと詳しく検証するために、今度は「checked」を使ってみましょう!

実行結果

この例では、チェックボックスのinput要素が配置されています。

そして、jQueryからチェックボックスをクリックするたびに「attr()」でchecked属性を取得するようにしています。実行結果を見ると分かりますが、何度クリックしても「undefined」ばかりですね。これは、最初に配置されているinput要素に「checked」属性が付与されていないからです。

なぜなら、「attr()」はあくまで要素に「checked」属性が付与されているかどうか?…だけしかチェックしていないからでしたね。これが「prop()」であればクリックするたびに「true / false」が取得できるわけです。

この「prop()」を使った検証・比較については、次の記事で詳しく解説しているのでぜひ参考にしてみてください!

【jQuery入門】prop(attr)の使い方と属性値の取得・設定まとめ!
更新日 : 2019年6月5日

まとめ

今回は、jQueryで要素の属性を操作できる「attr()」について学習をしました!

最後に、もう一度おさらいをしておきましょう!

  • 「attr()」メソッドは、対象となる要素の属性を取得・変更・設定することができる
  • 属性の削除には「removeAttr()」を使う
  • 「attr()」と「prop()」の違いは属性の状態を確認できるかどうか?ということ

上記内容を踏まえて、ぜひ自分でもプログラムに取り入れながら積極的に活用できるように頑張りましょう!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説