【jQuery】HTMLの属性を操作するattr()

attr()ができること

HTMLの属性の、取得、追加、変更、削除
HTMLは、タグに対して、id="",class="",href="",value="",name=""など、をつけて、役割を与えたり他のタグと差別化する。
同じ

同士でも、育った環境によって別々の性格（性質）になるイメージ。

今回のattrは、そのタグの性質を外から色々操作できる。

書き方

1.「$(’’)」で該当のタグやid（class）で対象のHTMLにアクセス
2. 続けて「attr('')」を記述

//アクセス＋属性を指定
$(’hoge’).attr('fuga');

取得

.attr('')に属性を入れればOK。属性値が戻り値。
例えば、classで複数のHTMLにアクセスした場合の戻り値はHTML上で一番初めにが該当するタグの属性値を戻す。
注意したいのは、複数にアクセスしても、配列ではかえって来ないということ。

  <!-- 取得 -->
  <a id="id-btn-A" class="class-btn" href="/test.html">続きを見る</a>
  <a id="id-btn-B" class="class-btn" href="../hoge.html">More</a>
  <a id="id-btn-C" class="class-btn" href="../program.php">詳しく見る</a>

<script>
//idでアクセスして取得した場合
  const ID = $('#id-btn-A').attr('id');
  console.log(ID);
// 結果：id-btn-A

 
 //CLASSで複数のHTMLにアクセスして取得した場合
  const CLASS = $('.class-btn').attr('id');
  console.log(CLASS);
// 結果：id-btn-A

</script>

変更

.attr('')に属性を入れ、第二引数に変更したい属性値を入れる。
属性値が戻りは、変更した属性があるタグを丸ごとは配列で返す。

  <!-- 変更 -->
  <a id="id-btn-A" class="class-btn" href="/test.html">続きを見る</a>
  <a id="id-btn-B" class="class-btn" href="../hoge.html">More</a>
  <a id="id-btn-C" class="class-btn" href="../program.php">詳しく見る</a>

<script>
//idでアクセスして取得した場合
  const ID = $('#id-btn-A').attr('id', 'id-btn-AAA');
  console.log(ID[0]);
// 結果：<a id="id-btn-AAA" class="class-btn" href="/test.html">続きを見る</a>

 
 //CLASSで複数のHTMLにアクセスして取得した場合
  const CLASS = $('.class-btn').attr('id', 'id-btn-AAA');
  console.log(CLASS[2]);
// 結果：<a id="id-btn-B" class="class-btn" href="../hoge.html">More</a>
</script>

追加

.attr('')に属性を入れ、第二引数に追加したい属性値を入れる。
また、オブジェクトと記述すると複数の属性を同時に設定することができる。
属性値が戻りは、変更した属性があるタグを丸ごとは配列で返す。

  <!-- 追加 -->
  <a id="id-btn-A" class="class-btn" href="/test.html">続きを見る</a>
  <a id="id-btn-B">More</a>

<script>
//idでアクセスして取得した場合
  const ID = $('#id-btn-A').attr('value', 'バリューA');
  console.log(ID[0]);
// 結果：<a id="id-btn-A" class="class-btn" href="/test.html" value="バリューA">続きを見る</a>

 
 //複数個の属性を追加したい場合
 const ID2 = $('#id-btn-B').attr({
      class:'class-btn',
      href:'/test.html',
      name:'testName',
      });
       
  console.log(ID2[0]);
// 結果：<a id="id-btn-B" class:'class-btn' href:'/test.html' name:'testName'>More</a>

</script>

削除

属性を削除するには、attr()をremoveAttr()にするだけ。

参考記事
https://www.sejuku.net/blog/23264www.sejuku.net