jQuery Snippets #5 目次

1. YouTubeをクリック後に読み込み・再生させる #1
2. YouTubeをクリック後に読み込み・再生させる #2
3. 簡易的なカウントアップ
4. クラスを利用したシンプルなフィルタ機能
5. CSSのアニメーション完了をjQueryで取得する
6. CSSの!importantを使用する
7. 要素に指定されたスタイルを一気にリセットする
8. ランダムに文字カラーを変更する
9. 要素が空の場合はその要素ごと削除する
10. 右クリックを無効にする

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

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

HTML

<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>

※赤文字の部分は動画のIDを記述してください。

jQuery

$('.youtube').each(function() {
	var movie = $(this).children('iframe');
	var url = movie.attr('src');
	var 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();
	});
});

目次へ

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

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

HTML

<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>

※赤文字の部分は動画のIDを記述してください。

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();
	});
});

※赤文字の部分は表示させたい画像のパスを記述してください。

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

目次へ

3. 簡易的なカウントアップ

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

jQuery

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

目次へ

4. クラスを利用したシンプルなフィルタ機能

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

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

HTML

<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;
});

目次へ

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

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

jQuery

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

※基本的に上記方法で取得できるとは思いますが、古いバージョンなど一部ブラウザによっては取得することができません。
その際はwebkitTransitionEndやoTransitionEndなどを用います。

目次へ

6. 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を記述することができます。
ちなみに、複数のスタイルを指定したい場合は以下のように記述（追記）していきます。

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

目次へ

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

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

jQuery

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

目次へ

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

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

jQuery

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

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

目次へ

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

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

jQuery

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

目次へ

10. 右クリックを無効にする

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

jQuery

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

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

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

目次へ