基礎的なものからちょっとした機能の実装方法など、jQueryに関する個人的なメモ・スニペットリストの第1弾です。

今まで頻繁に使うものや覚えておきたいと思ったもの、今後使う機会ありそうなものを見つけた場合は、とりあえずEvernoteやJSFiddleなどに突っ込んでおいたりエディタへスニペット登録したりという感じだったのですが、それらをスッキリさせたくなった＋日頃参考にさせてもらっているかちびとさんの「jQueryスニペット」みたいなのを パクry… 自分用にほしかったので、ある程度溜まったらこのブログにまとめていくことにしました。

この動きならわざわざjQuery使わないといった脱jQueryな感じの記事もよく見かけるし、自分も案件によっては使わないことが稀にあったりはしますが、やっぱりjQueryだといろいろと短い記述で容易に指定できたり、ちょっと特殊な動きの場合でもプラグインを使って簡単に実装したりできるため、自分はまだまだ使う機会が多くなりそうです。

動きをすぐ確認できるデモなどは基本的に用意していないので、実際の動きを確認したい場合などは自身で簡単な環境を作成して試してもらうか「CodePen」や「JSFiddle」などを利用して確認してください。

要素にidやclassを追加・削除したい

要素にidやclassを追加 または 削除をしたい時は下記のような記述で実装できます。

jQuery
// class追加
$('selector').addClass('foo');

// class削除
$('selector').removeClass('foo');

// id追加
$('selector').attr('id', 'foo');

// id削除
$('selector').removeAttr('id', 'foo');

また、例えばクリックする度にclassの追加と削除を交互に行いたいときなどは.toggleClass()が便利で、要素に指定したclassがなければそのclassを追加し、逆にclassがあった場合は指定したclassを削除してくれます。

jQuery
// class追加・削除
$('selector').toggleClass('foo');

要素に連番付きのidやclassを追加したい

例えばリストの各li要素に連番付きでclassを追加したいというときは.each()と.addClass()を用いて下記のように記述し、このサンプルコードの場合は各li要素に.num1, .num2, .num3 … という感じで連番付きのclassが追加されます。

jQuery
$('ul li').each(function(i) {
  $(this).addClass('num' + (i+1));
});

classではなくidを追加したいという場合は、下記のように.attr()を使えば実装できます。

jQuery
$('ul li').each(function(i) {
  $(this).attr('id', 'num' + (i+1));
});

classやidの有無を判断する

要素に特定のclassがあるかどうかで処理をわけたい時などは.hasClass()を利用します。
例えばある要素で.fooというclassが指定されているものにだけ何かをしたい場合は、下記のように記述することで実装できます。

jQuery
$('selector').each(function() {
  if ( $(this).hasClass('foo') ) {
    // code here ...
  }
});

idでも同じように特定のidがあるかどうかで処理をわけたい場合は.attr()と条件分岐を利用し、例えばある要素で#fooというidが指定されているものにだけ何かをしたい場合は、下記のように記述することで実装できます。

jQuery
$('selector').each(function() {
  if ( $(this).attr('id') == 'foo' ) {
    // code here ...
  }
});

要素の有無を判断する

特定の要素があるかないかで処理をわけたりしたい場合は、下記のような方法で実装できます。
サンプルコードは3パターンありますがいずれも「特定の要素があった場合に…」というもので、セレクタにidやclassを指定すればそれらがあるかないかという条件にもできます。

jQuery
// パターン1
if ( $('selector')[0] ) {
  // code here ...
}

// パターン2
if ( $('selector').get(0) ) {
  // code here ...
}

// パターン3
if ( $('selector').length ) {
  // code here ...
}

スムーススクロール（アンカー先に）

ページ内リンクがスムーススクロールで移動する動きを実装する方法です。
例えばクリックすると#anchorというidが指定されている箇所に移動させたい場合、HTMLでは<a href="#anchor">アンカーへ移動</a>のような形で記述をし、jQueryでは下記のように記述します。

jQuery
$('a[href*="#"]').on('click', function(e) {
  $('html, body').animate({scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
  e.preventDefault();
});

サンプルコードで500と記述されている箇所はスクロールのスピード、'linear'と記述されている箇所はイージング指定の箇所となるので、動きを変更したい場合はこれらをそれぞれ任意のものに変更します。

スムーススクロール（固定ヘッダー使用時などに）

固定ヘッダーなどを実装している場合に、何も考えずに組んでいるとスムーススクロール使用時に本来移動してほしい箇所がそれらに隠れてしまい、移動する位置を少しずらしたくなることがあります。
これを意図する位置にするために例えばmarginをpaddingに変更したりとCSSでも調整はできますが、jQueryを使えばCSSを変更せずに位置をずらすことができます。

下記サンプルコードは固定ヘッダーが200pxの高さだった場合を例にしたもので、このように記述することで移動する位置を少しずらして固定ヘッダーに被らないようにできます。

jQuery
$('a[href*="#"]').on('click', function(e) {
  var fixedHeight = 200;
  $('html, body').animate({scrollTop: $($(this).attr('href')).offset().top - fixedHeight}, 500, 'linear');
  e.preventDefault();
});

どれくらいずらすかはvar fixedHeight = 200;の部分で指定しているので、この値を変更することで位置調整が可能です。
固定要素の高さが決められない（可変）場合は数値で指定せず、その要素の高さを取得して値をいれるようにすればいいと思います。

スムーススクロール（ページトップに戻るのみ）

上で紹介したスムーススクロールはいずれも指定した箇所に移動するのを想定したものですが、単純にページトップに戻るだけであれば<a id="pagetop" href="#">ページトップに戻る</a>のようなHTMLで、jQueryを下記のように記述すれば実装できます。

jQuery
$('#pagetop').on('click', function(e) {
  $('html, body').animate({scrollTop: 0}, 500, 'linear');
  e.preventDefault();
});

スクロールしたら表示されるページトップ

見かけることが多いスクロールすると表示されるページトップの実装方法で、HTMLが<a id="pagetop" href="#">PAGE TOP</a>のような場合にjQueryを下記のように記述することで実装できます。
サンプルではjQueryでposition: fixed;などのスタイルを指定していますが、普通にCSSに記述する形でも問題ありません。

jQuery
var $pagetop = $('#pagetop');
$pagetop.css({
  'display': 'none',
  'position': 'fixed',
  'bottom': '20px',
  'right': '20px',
  'z-index': '100'
});
$(window).on('scroll', function() {
  if ( $(this).scrollTop() > 500 ) {
    $pagetop.fadeIn();
  } else {
    $pagetop.fadeOut();
  }
});
$pagetop.on('click', function(e) {
  $('html, body').animate({scrollTop: 0}, 500, 'linear');
  e.preventDefault();
});

アコーディオン

特定の箇所（このサンプルではdt要素）をクリック・選択すると、その下に隠れているコンテンツがスライドされて出てくるアコーディオンを実装する方法です。
サンプルではHTMLを下記にあるようにdl要素を用いており、「dt要素をクリックするとその次にあるdd要素が表示される」という動きになっています。
$('.accordion dt')で指定してある.css('cursor', 'pointer')の指定はjQueryを使わずに普通にスタイルシートに記述するのでももちろん問題ありません。
また、$(this).toggleClass('is-open');でアコーディオン展開に.is-openというclassが付加されるようにしており、展開された際になにか見栄えを変えたりしたいときに使えるのですが、特にそういったものは必要なければこの部分は消して問題ありません。

<dl class="accordion">
  <dt>title 1</dt>
  <dd>contents 1 ...</dd>
  <dt>title 2</dt>
  <dd>contents 2 ...</dd>
  <dt>title 3</dt>
  <dd>contents 3 ...</dd>
</dl>
jQuery
$('.accordion dd').hide();
$('.accordion dt').css('cursor', 'pointer').on('click', function() {
  $(this).toggleClass('is-open');
  $(this).next().stop().slideToggle();
});

他のものは閉じるタイプ

上の方法だと最終的に全ての非表示になっている部分を表示させることができますが、選択したものだけが表示されてそれ以外のものは閉じるという動きにしたい場合は、jQueryを下記のように記述します。

jQuery
$('.accordion dd').hide();
$('.accordion dt').css('cursor', 'pointer').on('click', function() {
  $('.accordion dt').removeClass('open');
  $('.accordion dd').stop().slideUp();
  $(this).toggleClass('is-open');
  $(this).next().stop().slideToggle();
});

タブ切り替え

タブをクリックするとコンテンツ部分の表示が変わるタブ切り替えを実装する方法です。
サンプルでは.tab-navが指定されているul要素がタブのナビゲーション部分、.tab-contentsが指定されているdiv要素がタブ選択時に切り替わるコンテンツ部分となっています。
また、ナビゲーション部分では現在選択されている場合に.is-activeというclassがli要素に付加されるようになっているので、class名を変更したい場合などは、var activeClass = 'is-active';の箇所を任意のものに変更してください。

<ul class="tab-nav">
  <li><a href="#tab1">tab 1</a></li>
  <li><a href="#tab2">tab 2</a></li>
  <li><a href="#tab3">tab 3</a></li>
</ul>
<div id="tab1" class="tab-contents">
  tab1 contents ...
</div>
<div id="tab2" class="tab-contents">
  tab2 contents ...
</div>
<div id="tab3" class="tab-contents">
  tab3 contents ...
</div>
jQuery
var $tabNav = $('.tab-nav li'),
    $tabContents = $('.tab-contents'),
    activeClass = 'is-active';

$tabNav.parent().find(':first').addClass(activeClass).show();
$tabContents.not(':first').hide();
$tabNav.find('a').on('click', function() {
  $tabNav.removeClass(activeClass);
  $(this).parent().addClass(activeClass);
  $tabContents.hide();
  $($(this).attr('href')).show();
  return false;
});

その他のjQuery Snippetsに関しては下記ページから確認できます。