jQueryでよく使うメソッド16選

jquery-popularmethod

jQueryで個人的に良く使うメソッドをまとめてみました。

「jQueryでよく使うメソッド16選」の目次

.css()

CSSの値を取得したり、書き換えたりします。

CSSの値を取得する

取得したい要素のスタイルを指定します。

$('div').click(function(){
	alert($(this).css('background-color'));
});

CSSの値を書き換える

第一引数に書き換えたいスタイル、第二引数に値を指定します。

$('div').click(function(){
	$(this).css('background-color','#fff');
});

Page Top 目次へ

.click()

クリックイベントを起こし、その時の処理を設定します。また、他の要素のクリックイベントを発生させることもできます。

クリックイベントを設定する

クリックした時の処理を指定する

$('div').click(function(){
	alert('clickしました。');
});

他の要素のクリックイベントを発生させる

下のコードでは $('button') $('div') をクリックしても両方アラートが出ます。

$('button').click(function(){
	alert('clickしました。');
});
$('div').click(function(){
	$('button').click();
});

Page Top 目次へ

.on()

これは主にイベントを定義したりする時に使います。さらに複数のイベントを一括して定義する事もできますし、イベントにデータを渡すことができます。

$('div').on('click',function(){
	// ここにクリックしたときに実行する処理
});

複数のイベントをまとめて定義する

$('div').on({
  mouseenter: function(){
    // マウスが要素上に入った時の処理
    $(this).css('background','#00bdb7');
  },
  mouseleave: function(){
    // マウスが要素上から離れた時の処理
    $(this).css('background','#ccc');
  },
  click: function(){
    // クリックした時の処理
    alert('クリック!!!');
  }
});

See the Pen OPEVMy by WebIsm (@WebIsm) on CodePen.

イベントにデータを渡す

$('div').on('click',{name:"マサルくん"},function(event){
  // event.dataにnameの値が格納される
	alert(event.data.name);
});

Page Top 目次へ

.animate()

アニメーションを作成します。引数には( パラメーター , [時間] , [エフェクト] , [コールバック] )を指定します、[]内は省略できます。「CSSとjQueryでサクッとアニメーションを実装する」で紹介したようにCSSだけでもできるのですが、IE9以下にも対応したい場合などはjQueryだけでやったりもします。

透明度をアニメーションさせる

$('div').on({
  mouseenter: function(){
    $(this).animate({'opacity':0.5},300,'swing');
  },
  mouseleave: function(){
    $(this).animate({'opacity':1},300,'swing');
  }
});

気をつけたいのが上のコードではにマウスが乗った時と外れた時でアニメーションが発生するのでマウスを乗せたり外したりすると何回も連続でアニメーションしてしまいます。なので .stop() をはさんでやるとアニメーション処理を中断してくれるので何回もアニメーションせずに済みます。

See the Pen toggleClass by WebIsm (@WebIsm) on CodePen.

また、エフェクトはデフォルトで 'linear' 'swing' (指定しない場合は 'linear' )しか用意されてないんですが、「jQuery Easing Plugin」を使うことでさまざまな動きを付けることができます。動きのイメージはこちら→jQuery Easing – jQuery 日本語リファレンス

Page Top 目次へ

.fadeIn() / .fadeOut()

.fadeIn()

要素をフェードインで表示させます。.fadeIn( [時間] ,[エフェクト] , [コールバック])というように時間とエフェクト、コールバック関数も指定でき、全て省略もできます。

$('div').click(function(){
	$('p').fadeIn(500);
});

.fadeOut()

要素をフェードインで表示させます。これも.fadeOut( [時間] ,[エフェクト] , [コールバック])が指定でき、全て省略もできます。

$('div').click(function(){
	$('p').fadeOut(500);
});

Page Top 目次へ

.find() / .parent()

.find()

指定した要素の子孫要素でマッチした要素を選択します。

$('div').click(function(){
	// divをクリックするとdivの中にあるpの要素の色が変わる
	$(this).find('p').css('color','#fcd');
});

.parent()

指定した要素の親要素全てを選択します。さらに引数に条件を入れることで絞り込むことができます。下のデモでは <p> をクリックすると親要素である <div> の背景色が変わります。

$('p').click(function(){
    $(this).parent().css('background-color','#000');
});

See the Pen toggleClass by WebIsm (@WebIsm) on CodePen.

Page Top 目次へ

.text()

指定した要素の文字列を取得したり、書き換えたりします。

文字列を取得

$('div').text();

文字列を書き換える

  $('button').click(function(){
		$('div').text('書き換えたよ');
	});

Page Top 目次へ

.attr()

属性の値を取得したり、書き換えたりします。

属性の値を取得する

取得したい要素の属性を指定します。

var href = $('a').attr('href');
$('div').click(function(){
	window.open(href);
});

属性の値を書き換える

第一引数に書き換えたい属性、第二引数に値を指定します。

$('a').attr('href','http://webism.jp/');
$('img').attr('src','images/sample.jpg');

Page Top 目次へ

.show() / .hide() / .toggle()

.show()

非表示状態にあるものを表示します。 .show(speed, [callback]) でアニメーションしながら表示します、アニメーションはほとんど使ったことないですが。。

$('div').show();

.hide()

表示状態にあるものを非表示にします。これも .hide(speed, [callback]) でアニメーションしながら非表示になります。

$('div').hide();

.toggle()

表示状態のものは非表示に、非表示状態のものは表示します

  $('button').click(function(){
		$('div').toggle();
	});

Page Top 目次へ

.addClass() / .removeClass() / .toggleClass()

指定した要素にclassを付けたり外したりします。

.addClass()

classをつける

$('div').click(function(){
	$(this).addClass('active');
});

.removeClass()

classをはずす

$('div').click(function(){
	$(this).removeClass('active');
});

.toggleClass()

.toggleClassは指定したclassが無ければ付ける、指定したclassが付いていれば外すといった処理です。

$('div').click(function(){
	$(this).toggleClass('active');
});

See the Pen toggleClass by WebIsm (@WebIsm) on CodePen.

Page Top 目次へ


以上となります! ざっくりとした説明なので使い方を詳しく知りたい方はリファレンスなどを参考にしてみてください。 他にも便利なメソッドあればコメントにて紹介してください!

シェア

コメント