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の切り替えに利用される