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

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

YouTubeをクリック後に読み込み・再生させる #1

YouTubeの動画をページ内に埋め込む際、当然ですが沢山の動画を埋め込むとページの読み込みが非常に遅くなります。
下記はそのような場合に使えるもので、まずページ読み込み時にはYouTube動画(iframe)をそれぞれイメージに置き換える処理を行い、再生したい動画を表すイメージをクリックすると動画を読み込んで更に再生させるといったものなります。

<div class="youtube">
  <iframe width="640" height="480" src="https://www.youtube.com/embed/動画ID?rel=0&amp;autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
jQuery
$('.youtube').each(function() {
  var movie = $(this).children('iframe'),
      url = movie.attr('src'),
      id = url.match(/[\/?=]([a-zA-Z0-9]{11})[&\?]?/)[1];
  movie.before('<img src="http://img.youtube.com/vi/'+id+'/sddefault.jpg" />').remove();

  $(this).on('click', function() {
    $(this).after('<iframe width="640" height="480" src="https://www.youtube.com/embed/'+id+'?rel=0&amp;autoplay=1" frameborder="0" allowfullscreen></iframe>').remove();
  });
});

YouTubeをクリック後に読み込み・再生させる #2

こちらも同じくYouTube動画を画像に置き換えて、クリックした時に動画を読み込み・再生させるものになりますが、先ほどのものとは少し違った実装方法でこちらの場合は画像を任意で指定したものになります。
先ほどのサンプルコードの中身を変更していく形でも同じような動きを実装できますが、別の方法としてご紹介させてもらいます。

<iframe width="640" height="480" src="https://www.youtube.com/embed/動画ID?rel=0&amp;autoplay=1" frameborder="0" allowfullscreen></iframe>
<iframe width="640" height="480" src="https://www.youtube.com/embed/動画ID?rel=0&amp;autoplay=1" frameborder="0" allowfullscreen></iframe>
<iframe width="640" height="480" src="https://www.youtube.com/embed/動画ID?rel=0&amp;autoplay=1" frameborder="0" allowfullscreen></iframe>
jQuery
var youtube = new Array();
var images = new Array(
      '表示させたい画像のパス',      '表示させたい画像のパス',      '表示させたい画像のパス'    );
$('iframe').each(function(index, element) {
  youtube[index] = $(this).attr('src');
  $(this).after('<img class="youtube" src="'+images[index]+'" />').remove();
});
$('.youtube').each(function(index, element) {
  $(this).on('click', function() {
    var number = index;
    $(this).after('<iframe width="640" height="480" src="'+youtube[number]+'" frameborder="0" allowfullscreen></iframe>').remove();
  });
});

ハイライト部分は表示させたい画像のパスを記述してください。

今回のサンプルコードでは動画を表示させるiframeをHTMLで3つ記述しているので、jQueryのvar imagesにも同じく3つ分の画像を記述してあげます。
画像は上から順番に適用されていくという感じなので、意図しない画像が出てしまっているという時はHTML上でのiframeの並び順、またはjQueryのvar imagesの並び順に間違いがないか確認してください。

簡易的なカウントアップ

開始・終了それぞれの数値と秒数を指定することで実装する簡易的なカウントアップです。

jQuery
var num = 0,
    stop = 500;
setInterval(function() {
  if ( num <= stop ) {
    $('element').html(num);
    num++;
  }
}, 5);

classを利用したシンプルなフィルタ機能

実際に案件等で使用する場合は、多少でもフェードで切り替わったりなどのエフェクトを入れたりすることが多いと思うので、大幅に記述を変える必要があったりプラグインを利用した方が良いことが多いですが、とりあえずフィルタリングされる機能だけであれば下記のような方法で実装できます。

ここで紹介するのはフィルタリングにclassを利用したものになり、下記のようなHTMLとjQueryを記述することでシンプルなフィルタ機能を実装できます。

<ul class="filter-nav">
  <li><a href="#" class="all">all</a></li>
  <li><a href="#" class="foo">foo</a></li>
  <li><a href="#" class="bar">bar</a></li>
  <li><a href="#" class="baz">baz</a></li>
</ul>
<div class="filter-item">
  <div class="foo">foo</div>
  <div class="bar">bar</div>
  <div class="baz">baz</div>
  <div class="foo">foo</div>
  <div class="bar">bar</div>
  <div class="baz">baz</div>
      ・
      ・
      ・
</div>
jQuery
var $item = $('.filter-item').children('div').addClass('all');
$('.filter-nav a').on('click', function() {
  var type = $(this).attr('class');
  $('.filter-item').children('div').hide().filter('.' + type).show();
  return false;
});

CSSのアニメーション完了をjQueryで取得する

アニメーションが完了した際に何か処理を行いたい時、例えばjQueryの.animate()を使って実装しているとかであれば容易にできるとは思いますが、アニメーションをCSSで実装していて完了後に何か処理を行いたい時は、下記のように記述することでCSSアニメーションの完了をjQueryで取得することができます。

jQuery
$('element').on('animationend', function() {
  // console.log('end');
});

基本的に上記方法で取得できるとは思いますが、古いバージョンなど一部ブラウザによってはwebkitAnimationEndoAnimationEndなどを用います。

また、transitionの場合は下記のように記述します。

jQuery
$('element').on('transitionend', function() {
  // console.log('end');
});

基本的に上記方法で取得できるとは思いますが、古いバージョンなど一部ブラウザによってはwebkitTransitionEndoTransitionEndなどを用います。

CSSの!importantを使用する

jQueryでCSSを指定する際は.css()を使用し、例えば要素の文字カラーを赤に変更したい場合は$('element').css({'color':'red'});のように記述することで要素にCSSを指定することができます。
ただ、指定時に!importantを使いたいという場合は$('element').css({'color':'red !important'});のように記述しても意図したようにはできず、jQueryのCSSで!importantを使いたいという場合は下記のように記述します。

jQuery
$('element').css({'cssText':'color: red !important'});

上記のようにcssTextと記述することで!importantを指定したCSSを記述することができ、複数のスタイルを指定したい場合は下記のように記述していきます。

jQuery
$('element').css({'cssText':'background-color: blue !important; color: red !important'});

要素に指定されたスタイルを一気にリセットする

何らかの理由で要素に直接記述されたスタイルやjQueryの.css()を使用した際に記述されたスタイルをリセットしたいという時、例えばcolor: red;というスタイルを取り除きたい時は$('element').css('color', '');のように記述したり、空にしている部分をデフォルトで指定しているカラーなどに指定することでリセットすることができます。
ただ、他にも沢山のスタイルが使用されており、それらを一気にリセットしたいという時には.css()ではなく、下記のように.attr()を使用する方法を使うことで容易にスタイルをリセットさせることができます。

jQuery
$('element').attr('style', '');

ランダムに文字カラーを変更する

アクセスする度にランダムで何かを変更したい時などに使える方法で、今回はサンプルとして下記のように記述することで指定した要素のcolorがランダムで変更されるというものになります。

jQuery
var colors = ['#3498db', '#9b59b6', '#2ecc71', '#f39c12', '#1abc9c', '#e74c3c', '#f1c40f'],
    randColor = colors[Math.floor(Math.random() * colors.length)];
$('element').css('color', randColor);

見ての通りですが。2行目のvar colorsの部分で予め適用したいカラーコードを幾つか記述しておき、その中からランダムで選ばれたカラーが指定した要素に適用されるというものになります。
ここではcolorを使用しましたが、少し記述を変えれば背景色や画像をランダムで変更したりもできます。

要素が空の場合はその要素ごと削除する

特定の要素内に何も記述されていない場合は要素ごと削除したいという時は、下記のように:emptyを使用します。

jQuery
$('element:empty').remove();

右クリックを無効にする

JavaScriptを無効にされたら結局意味ないんですが、コピー防止などの対策として右クリックを無効化させる方法で、下記のように記述することで右クリック時のメニュー表示がされなくなります。

jQuery
$(document).on('contextmenu', function(e) {
  return false;
});

ちなみに特定の要素のみ無効にしたいという時は、単純に$(document)となっている箇所をその要素に変更するのでも実装できますが、下記のような形で実装することもできます。
このサンプルコードの場合はp要素のみという記述になり、他の要素は今までどおり右クリックが使用できますが、p要素では右クリックが無効化されているのを確認できます。

jQuery
$(document).on('contextmenu', 'p', function(e) {
  return false;
});

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