メソッド ( method )はオブジェクトを操作する命令文を指します。 jQueryでは $(“セレクタ”) に . (ドット)で繋いで使い、このような構文を「ドットシンタックス」と呼びます。
メソッド名の後ろには必ずパラメータ(引数)を渡す()が付きます。
$(“セレクタ“).メソッド(“パラメータ[引数]“);
また、メソッドは . を繋ぐことで複数のメソッドを繋げて記述することができ、その方法をメソッドチェーンと呼びます。
$(“セレクタ“).メソッド(“引数“).メソッド(“引数“);
jQueryオブジェクトに利用できるメソッドはかなりたくさん存在しますが、ここではよく見かけ、使用頻度の高いものを掻い摘んでご紹介したいと思います。
- addClass() / removeClass() / toggleClass()
- attr()
- find() / parent()
- on()
- show() / hide() / toggle()
- animate()
- fadeIn() / fadeOut()
- text()
- css()
addClass() / removeClass() / toggleClass()
要素にクラスを追加・削除。
$(“this“).addClass(‘active‘);
$(“this“).removeClass(‘active‘);
$(“this“).toggleClass(‘active‘);
attr()
属性を取得、書き換える。
var href = $(‘a‘).attr(‘href‘);
$(‘a‘).attr(‘href‘,‘http://○○○○.jp/‘);
find() / parent()
指定した条件に合致する要素を選択する。
$(“ul“).find(“li“).css(“color“, “red“);
$(“li“).parent().css(“background-color“, “red“);
on()
動的に作られた要素に対してイベントを定義。 第二引数の『function(){//処理内容}』はコールバックと呼ばれるもので、イベントが発生したときに実行される内容をまとめた関数です。
$(“div“).on(“click“, function(){
$(this).css(‘background‘,‘#00bdb7‘);
})
下記のように複数のイベントを一括して定義する事もできます。
$(‘div‘).on({
mouseenter: function(){
$(this).css(‘background‘,‘#00bdb7‘);
},
mouseleave: function(){
$(this).css(‘background‘,‘#ccc‘);
},
click: function(){
alert(‘クリックしました‘);
}
});
show() / hide() / toggle()
要素の表示状態を切り替える。
$(‘div‘).show();
$(‘div‘).hide();
$(‘div‘).toggle();
引数に切替時のスピードを指定し、アニメーションさせることもできます。
.show(speed, [callback])
animate()
アニメーションを作成。 引数には( パラメーター , [時間] , [エフェクト] , [コールバック] )を指定し、[]内は省略できます。
$(this).animate({‘opacity‘:0.5},300,‘swing‘);
アニメーションはイベント発生のたびに何度もアニメーションを実行してしまいます。 連続アニメーションを防ぐため、.animate()の前に.stop() をつけるとアニメーション処理を中断してくれます。
$(‘div‘).on({
mouseenter: function(){
$(this).stop().animate({‘opacity‘:0.3},1000,‘swing‘);
},
mouseleave: function(){
$(this).stop().animate({‘opacity‘:1},1000,‘swing‘);
}
});
fadeIn() / fadeOut()
要素をフェードで表示状態を切り替える。
$(‘div‘).click(function(){
$(‘p.epress‘).fadeIn(500);
$(‘p.EPRESS‘).fadeOut(500);
});
引数に切替時のスピードを指定し、アニメーションさせることもできます。
.show(speed, [callback])
text()
テキストを取得、書き換え。
$(this).text(“EPRESS“);
css()
CSSの値を取得したり、書き換える。
$(‘div‘).click(function(){
let bC = $(this).css(‘background-color‘);
$(this).css(‘background-color‘,‘#fff‘);
});
cssをjsで複数追記指定するときは下記のようにも記述できます。
$(‘div‘).css({
‘background-color‘: ‘#fff‘,
‘color‘: ‘#ccc‘,
‘font-size‘: ‘14px‘
});
まだまだ便利なメソッドがたくさん用意されているので、ぜひとも他のメソッドも調べてみてください。