基本的な書き方

 
$('div').css('background','#000')　//cssに単独で指定したいとき
$('div').css({background:'#000',color:'#fff'})	//cssに複数指定したいとき
$('div').find('img').css('background','#000').fadeOut(); // メソッドチェーン
  

hover()で要素をフェードイン/フェードアウト

 
  #hoverTest{background:#ccc; width:200px; padding:10px;}
  

 
  
Hoverしてください
  

 
$( '#hoverTest' ).hover(
	function() {$( this ).fadeOut();}, 
	function() {$( this ).fadeIn();}
);
  

click()で要素を隠す

 
  #clickTest {background:#ccc; width:200px; padding:10px;}
  

 
  
テスト
  

 
	$( '#clickTest' ).click(function() {$(this).hide();});
  

toggle()でクリックでトグルさせる(classで切り替え)

 
  #toggleTest {background:#ccc; width:200px; padding:10px;}
  #toggleTest.current {background:#633;}
  

 
  
テスト
  

 
$(function(){
	$("#toggleTest").toggle(
		function(){$(this).attr("class","current");},
		function(){$(this).removeClass("current");}
	);
});
  

toggle()でクリックでトグルさせる(toggleでdisplay:none;させる)

 
  #toggleTest2 {display:inline-block; background:#ccc; width:auto; padding:10px; cursor:pointer;}
  #toggleTest2 span{background:#fff; padding:10px;}
  

 
  

	  Button
	  コンテンツ
  
  

 
$(function(){
	$('#toggleTest2').click(function(){$(this).find('span').toggle();});
});
  

複数ボタン郡の中で、一つだけをオン状態に保つ

 
  #btnSelectTest li{display:inline-block; background:#ccc; width:auto; padding:10px; cursor:pointer;}
  #btnSelectTest li.current{background:#333; color:#fff;}
  

 
  

    
Button1
    
Button2
    
Button3
    
Button4
    
Button5
    
Button6
  
  

 
  $(function(){
	  $("#btnSelectTest li").click(function(){
		  $("#btnSelectTest li").removeClass("current");
		  $(this).addClass("current");
	  });
  });
  

.bind()でクリックイベント

 
  #bindTest{background:#ccc; width:200px; padding:10px;}
  

 
  
クリックしてください
  

 
    $('#bindTest').bind('click', function() {alert('bindのテストです');});
  

bindはhoverやclickと違って、複数のイベントを一度に定義できる。

 
	$( セレクタ ).bind(イベント1, イベント2, イベント3,function() {});
  

クリックで開閉する

 
  #toolBoxTest h1{background:#ccc; width:200px; padding:10px;}
  #toolBoxTest p{background:#fcfcfc; width:200px; padding:10px;display:none;}
  

 
  

    
ここをクリック
    
サンプルテキストサンプルテキストサンプルテキスト
  
  

 
	$('#toolBoxTest h1').bind('click', function() {
		if ($('#toolBoxTest p').css('display') == 'none')
				{$('#toolBoxTest p').slideDown();}
		else	{$('#toolBoxTest p').slideUp();}
	});
  

※ toggleやslideToggleを使えばもっと簡単にできる。

hoverで画像を差し替える

 
 #imgReplaceTest li{display:inline-block;}

 
	$('#imgReplaceTest img').hover(function() {
		$(this).attr('src', $(this).attr('src').replace('_nml', '_hv'));
	}, function() {
		$(this).attr('src', $(this).attr('src').replace('_hv', '_nml'));
	});
  

特定のクラスがついているか判別して表示を切り替える

 
 #hasClassTest{border:1px solid #666;padding:10px; margin:10px;}

 
  $(function(){
  	if($('#hasClassTest').hasClass('findTest')) 
  			{$('#hasClassTest').text('見つかりました');}
  	else	{$('#hasClassTest').text('見つかりませんでした');}
  });
  

要素の数に応じてスタイルを変更する

liが2つより多ければオレンジ、少なければ緑になる。

 
#lengthTest li{width:30px;height:30px;border:1px solid #000;display:inline-block;}

 
<ul id="lengthTest">
	

	

	

</ul>

 
  $(function(){ 

  	var n = $("#lengthTest li").length;

  	if (n < 2)	{$("#lengthTest li").css("background", "green");} 
  	else		{$("#lengthTest li").css("background", "orange");}
  });

強制的にリンク先に行かないようにする

 
$(セレクタ).bind('click', function(i) {
	i.preventDefault();
	....
});  

htmlのアンカーとjSのクリックイベントが重なってしまった場合、好ましくない動きになってしまうことがある。 その際にJSの動きを優先させたい場合にpreventDefaultを使用する。 'i'はただのパラメーター(任意)

.findと.end

以下のように、メソッドチェーン内でセレクタが子要素に変わってしまった場合、 .end()メソッドで元に戻す事ができる。

 
	$('#findTest li').find('img').css({'background','#000'});
    $('#findTest').fadeIn('slow'); 
  

↓

 
	$('#findTest li').find('img').css({'background','#000'}).end().fadeIn('slow'); 
  

.eq(), .addClass()

先頭から○番目の要素に、クラスをつける。

 
   #eqTest li {display:inline-block;}
   #eqTest .list2 {border:5px solid #600;}
  

 
  $('#eqTest li').eq(1).addClass('list2');
  

.delay()

要素に順番にエフェクトを加えて行く。

 
   #delayTest li{display:inline-block;}
  

 
  var objDelay = 0;

  $("#delayTest li").hide();

  $("#delayTest li").each(function(){
	  $(this).delay(objDelay).fadeIn(500);
	  objDelay = objDelay + 500;
  });
  

要素に連番でIDを追加

 
   #sequenceTest li{display:inline-block;}
   #image1 {border:5px solid #660;}
   #image2 {border:5px solid #606;}
   #image3 {border:5px solid #066;}
  

 
var i = 1;
  $('#sequenceTest img').each(function(){
  $(this).attr('id','image'+i);
  i++;
});  

.stop()

.hover()を使用した動きででは、一応動作はするもののhover後動作が完了しない間に再度マウスをのせると、 乗せた数だけ動いてしまう。

 
	$( '#hoverTest' ).hover(
		function() {$( this ).fadeOut();}, 
		function() {$( this ).fadeIn();}
	);
  

そこで.stop();を用いて、マウスが離れた後も続いてしまうアニメーションを止める。 アニメーションさせているメソッドが.animate()であれば、.stop()だけで大丈夫な模様。 でも今回は.fadeOut()でアニメーションさせているので、その場合は引数を使用しなければいけないらしい。

 
	$( '#stopTest2 img' ).hover(
		function() {$( this ).stop(true, true).fadeOut();}, 
		function() {$( this ).stop(true, true).fadeIn();}
	);
  

引数の意味

 
	.stop('キューをクリア', '最後のコマに移動')
  

高さの違う二つの要素の高さを揃える

 
   #arrengeTest li{display:inline-block; width:20%;vertical-align:top;}
   #arrengeTest .a{background:#600;}
   #arrengeTest .b{background:#660;}
  

 

  <li class="a">
  親譲りの無鉄砲で小供の時から損ばかりしている。
  小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。
  なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。
  </li>
  <li class="b">テスト</li>

  

 
$(function(){
    var aHgt = $('.a').height(); 
    var bHgt = $('.b').height(); 
    if(aHgt > bHgt){$('.b').css('height',aHgt+'px');}
});
  

現在のウィンドウサイズを感知してスタイルを変更する

 
   #resizeTest li{display:inline-block;}
  

 
  

  Windowサイズを変えて見てください。
  
  

 
$(window).resize(function(){
  var w = $(window).width();
  var x = 1000;
  
  if (w <= x) {$('#resizeTest').css({background: '#600',color:'#fff'}).text('ウィンドウサイズは1000px以下です');} 
  else {$('#resizeTest').css({background: '#006'}).text('ウィンドウサイズは1000px以以上です');
  }
});