jQueryのattrメソッドで属性を操作。設定や削除の方法とは
jQueryには、HTML要素の属性の値を操作することができる「attrメソッド」があります。ここでは、attrメソッドの使い方や、実際に値を取得する方法を分かりやすく紹介していきます。ぜひ、参考にしてみてください。
- システム
エンジニア - jQuery側でHTML要素を操作したいときに便利ですね。
- プロジェクト
リーダー - コードも一行で書けるので、すぐに覚えられますよ！
実行環境
・macOS 10.15.6
・Repl.it
attrメソッドとは？
attrメソッドを使うと、HTML要素の属性を簡単に設定・取得・変更することが可能です。以下の例では「class」が属性であるため、「test」という値を操作できます。
|
1
|
<p class="test">ここに文字が入ります</p>
|
attrメソッドによる属性の取得
まずは、atrrメソッドを使って属性を取得してみましょう。取得はとても簡単で、コードは一行で書くことができます。
|
1
|
$('セレクタ').attr('属性名');
|
セレクタを指定し、その後ろにattrメソッドをつなげて「id」か「class」かを指定します。基本構文に当てはめると、以下のようになります。
|
1
|
$('p').attr('class');
|
これで、「test」という値を取得することができます。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1280, maximum-scale=1, user-scalable=yes">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<title>SampleAttr</title>
<script type="text/javascript">
$(document).ready(function() {
const className = $('p').attr('class');
console.log(className)
});
</script>
</head>
<body>
<p class="test">テスト</p>
</body>
</html>
|
実行結果
attrメソッドによる属性の設定
次に、属性を新規で設定してみましょう。
|
1
|
$(セレクタ).attr(追加したい属性名, 属性の値);
|
例えば、クラス属性に「test」という文字列を設定したい場合は、以下のようになります。
|
1
|
$(p).attr(class, "test");
|
では、一つのセレクタに複数の属性を設定したい場合はどうすれば良いのでしょうか？
この場合は、{ } 内に「追加したい属性」と「属性に設定したい値」を順に記載していきます。
|
1
2
3
4
5
|
$('セレクタ').attr({
属性1: '値1',
属性2: '値2',
属性3: '値3'
});
|
例えば、HTMLのinput要素にclass属性とtype属性を設定したい場合は、次のようになります。
|
1
2
3
4
|
$('input').attr({
class: 'test',
type: 'text'
});
|
removeAttrメソッドによる属性の削除
最後に、設定した属性を削除してみましょう。
属性を削除するためには、jQueryの「removeAttrメソッド」を使用します。
|
1
|
$('セレクタ').removeAttr('属性');
|
input要素のtype属性を削除したい場合、以下のように記述することでtype属性を削除することができます。
|
1
|
$('input').removeAttr('type');
|
- システム
エンジニア - attrメソッド、属性の操作ができてとても便利ですね！
- プロジェクト
リーダー - そうですね。属性の削除だけ「removeAttrメソッド」を使うことに注意してくださいね。
attrメソッドでHTML要素を自由自在に操作しよう
今回は、attrメソッドを使って属性の値を取得・設定・削除しました。Webサイトやアプリケーションを作成する際、条件に合わせてHTML要素を動的に操作することはよくあるでしょう。jQueryのattrメソッドを活用すれば、HTML要素を自由自在に扱うことができますので、ぜひ活用してみてください。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。
-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社夢真ビーネックスグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。
新着案件New Job
-
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万～30万円東京都品川区(大崎駅) -
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万～30万円東京都豊島区(池袋駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万～67万円東京都文京区(後楽園駅) -
PMO/東京都豊島区/【WEB面談可】/在宅勤務
月給55万～55万円東京都豊島区(池袋駅)
関連記事Related Posts
-
jQueryでCSSのスタイルを変更する方法
Webアプリケーションの見栄えを良くするために使われるCSS。CSSファイルを別に作成して読み込むという方法が一般的ですが、実はjQueryでもCSSを直書きが可能です。 この記事では、サンプルコードを例に挙げながらjQ […]
-
jQuery UIのダウンロードの手順と使い方
「jQuery UI」を利用すると、Webサイトの画面項目に動きを付けることや、画面の見た目がリッチなデザインを作成することができます。 主にカレンダー、アコーディオン、ダイアログ、エフェクトなど、多くの機能が用意されて […]
-
jQueryのタグ追加方法とタグの種類
Webアプリケーションを作成していると、クリック時に入力欄を増やしたり、ユーザーの入力内容によって項目の選択肢を増やしたりなど、HTMLのタグを追加したい場合があります。 jQueryを利用すれば、豊富な種類のタグ追加を […]
-
jQueryのアニメーション機能を使ってできること
Webサイトを作成していると、「途中でボックスの色を変えたいな」「ここをフェードインさせたいな」と思うことがあるのではないでしょうか。そこで、ぜひ活用してほしいのがjQueryのアニメーション機能です。「animate関 […]
-
jQuery UIのSortableを使ってリストをドラッグで並び替える
jQuery UIのSortableウィジェットを使うと、リスト項目をドラッグで並び替えることができるようになります。ユーザーにとってより使いやすいアプリケーションを作ることができますので、ぜひ使い方をマスターしていきま […]
