0
1

More than 1 year has passed since last update.

jQuery 属性系メソッド

Posted at

attr

指定した要素の属性値を取得または設定する.
取得する場合

//基本形
var elementAttribute = $('selector').attr('attribute');

//例
var id = $('p').attr('id');

設定する場合

//基本形
$('selector').attr('attribute','value');

//例
$('p').attr('id','example');
  • selector:属性の値を取得または設定する要素を指定する.
  • attribute:取得または設定した属性名を指定する.
  • value:属性に設定する値を指定する.

removeAttr

要素から指定した属性を削除する.

//基本形
$('selector').removeAttr('attribute');

//例
$('p').removeAttr('id')  // pタグの要素にid属性を削除する.
  • selector: 属性を削除する要素を指定する.
  • attribute: 削除したい属性名を指定します.

val

指定したフォーム要素(input,textarea,selectなど)のvalue値を取得または設定する.
取得する場合

//基本形
var inputValue = $('selector').val();

//例
var inputValue = $('input').val();
console.log(inputValue);

設定する場合

//基本形
$('selector').val(value);

//例
$('#input').val("Hello, World")  // 入力フォームに"HelloWorldを設定"
  • selector: 値を取得または設定するフォーム要素を指定する.
  • value: フォーム要素に設定する値を指定します.

addClass

指定したクラスを要素に追加する.

//基本形
$('selector').addClass('className');

//例
$('p').addClass('newClass'); //p要素にnewClassというクラス属性を追加する
  • selector: クラスを追加する要素を指定する.
  • className: 追加したいクラス名を指定する.複数のクラスを追加する場合はスペースで区切る.

AttrとaddClassの違い

どちらも引数に追加したいクラスを指定することで,クラスの設定を行うことができるが,以下のような違いがある.
Attr →要素に設定されている元のクラスに置き換える
addClass →元のクラスを保持したまま追加する

#removeClass
指定したクラスを要素から削除する.

//基本形
$('selector').removeClass('className');

//例
$('p').removeClass('old-Class'); //p要素のoldClassというクラスを削除する
  • selector: クラスを削除する要素指定する.
  • className: 削除したいクラス名を指定する.複数のクラスを削除する場合はスペースで区切る.

removeAttrとremoveClassの違い

どちらも引数に削除したいクラス名を指定することで,要素からクラスの削除することができる.AttrとaddClassと同様の関係と同じように以下のような違いがある.
引数に削除したい
removeAttr:要素の全てのクラスを削除する.
removeClass:クラス名を指定することで,要素からそのクラスのみを削除する.

hasClass

指定したクラスを要素が持っているかどうかをチェックする.

//基本形
var isSelected = $('selector').hasClass('className');

//例
var isSelected = $('p').hasClass('example'); //p要素にexampleというクラスを持つか取得
console.log(isSelected); //結果を表示
  • selector: クラスを持っているかどうかを判定する要素を指定する.
  • className: 判定したいクラス名を指定する.

要素が指定したクラスを持っているかを真偽値で取得することができる.
持っていれば → true
持っていなければ → false

toggleClass

指定したクラスが要素に存在する場合は削除し,存在しない場合は追加する.

//指定した要素のクラスを切り替える.
$('selector').toggleClass('className');

//例
$('p').toggleClass('example');//p要素にexampleクラスがあれば削除,なければ追加
  • selector: クラスのトグル動作を行う要素を指定する.
  • className: トグルするクラス名を指定する.複数のクラスをトグルする場合はスペースで区切る.

toggle(トグル)とは,「同一の操作で2つの状態を交互に切り替えること」を意味する.
クラスの追加と削除を切り替えることができるため,CSSの切り替えに利用される

0
1
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1