jQuery Snippets #2

  • Posted on
  • Category : Tips
jQuery Snippets #2

基礎的なものからちょっとした動きの実装方法など、jQueryに関する個人的なメモ・スニペットリストです。書いている内容に対して「もっとスマートにできる」とか「そもそも間違ってる」みたいなのがあれば、参考にさせてもらいたいのでコメントなど通じて是非教えてください。

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

jQuery Snippets #2 目次

  1. 読み込み時(load)・リサイズ時(resize)・スクロール時(scroll)の処理をまとめる
  2. ウィンドウリサイズで操作後のみ実行する
  3. ゼブラストライプ
  4. 数秒後に〇〇する
  5. 外部リンクにtarget=”_blank”を付加する
  6. リンク先によって異なるクラスを付加する
  7. 要素を順番にフェードインさせる
  8. 要素の高さを一番高いものに合わせる
  9. フォーカスすると表示領域が伸びる入力フィールド
  10. 確認ダイアログを表示する

1. 読み込み時(load)・リサイズ時(resize)・スクロール時(scroll)の処理をまとめる

読み込み時とリサイズ時に同じ処理を行いたい時には以下のように記述することでまとめることができます。

jQuery

$(window).on('load resize', function() {
	// code here ...
});

また、上記に加えてスクロール時も加えたい場合は以下のように記述します。

jQuery

$(window).on('load resize scroll', function() {
	// code here ...
});

目次へ

2. ウィンドウリサイズで操作後のみ実行する

ウィンドウサイズが変更された際に何か処理を行いたい場合、特に何も考慮しない場合は下記のように記述になると思います。

jQuery

$(window).on('resize', function() {
	console.log('resized!');
});

ただ、上記方法だとウィンドウサイズが変更されている間ずっと処理が実行されることになります。
それを回避したい場合は下記のようにsetTimeoutを使用した形で記述することで、ウィンドウのリサイズ後のみ処理を実行するようにできます。

jQuery

var resizeTimer;
$(window).on('resize', function() {
	clearTimeout(resizeTimer);
	resizeTimer = setTimeout(function() {
		console.log('resized!');
	}, 200);
});

目次へ

3. ゼブラストライプ

表やリストなどで見やすくしたりデザインするために取り入れることがあるゼブラストライプを実装する方法です。
最近だと:nth-childとか使えばCSSだけで実装できますが、jQueryで実装したい場合は以下のように実装できます。

サンプルではtable要素で、trの背景色にゼブラストライプを実装する場合のものになります。

jQuery

$('tr:odd').css('background-color', '#ddd');

もしくは、以下のようにクラスを追加して、CSSはスタイルシートを使って指定する方法があります。

$('tr:odd').addClass('odd');

上記はいずれも奇数番目のものが対象となっており、偶数番目にしたい場合は:evenを使用します。

目次へ

4. 数秒後に〇〇する

数秒後にクラスを付加するとか数秒後にフェードインするのような動きを実装する方法です。
以下サンプルは「3秒後に要素に”foo”というクラスを付加」するものになります。

jQuery

$('element').delay(3000).queue(function() {
	$(this).addClass('foo').dequeue();
});

もしくは以下のようにsetTimeoutを利用する形でも実装できます。

jQuery

setTimeout(function() {
	$('element').addClass('foo');
}, 3000);

目次へ

5. 外部リンクにtarget=”_blank”を付加する

jQuery

$('a[href^=http]').attr('target', '_blank');

上記はリンク先がhttpから始まる場合にtarget="_blank"を付加するというものになりますが、更にaddClassを併用したりすれば外部リンクだとわかりやすいアイコンを付けたりもできると思います。

もし、何かしらの理由で同じサイト内のリンクで別窓にしたくないのに絶対パスで記述しないといけない場合は、下記の記述で同ドメインのサイトは対象外にすることができます。

jQuery

$('a[href^=http]').not('[href*="'+location.hostname+'"]').attr('target', '_blank');

目次へ

6. リンク先によって異なるクラスを付加する

例えばリンク先がPDFとわかりやすいようにテキストリンク横にPDFアイコンを表示させたいという時に、以下のようなjQueryでリンク先がPDFになっているa要素に任意のクラスを付加することができます。
あとはそのクラスを用いてCSSを調整することでアイコンを表示させることができます。

jQuery

$('a[href$=pdf]').addClass('pdf');

上記サンプルはPDFでしたが、その他エクセル(xls / xlsx)や圧縮ファイル(zip)などでも同様に記述することで任意のクラスを付加できます。

また、リンク先URLを指定して任意のクラスを付加することもでき、下記サンプルでは「リンク先に https://www.google.co.jp/ が含まれている場合は”Google”というクラスを付加する」というものになります。

jQuery

$('a[href^="https://www.google.co.jp/"]').addClass('google');

もう少しだけ詳しく説明していたり、これをCSSのみで行う方法を以前書いているので、興味ある方はご覧になってみてください。

目次へ

7. 要素を順番にフェードインさせる

下記サンプルはli要素を上から順番にフェードインさせるものになります。

jQuery

$('ul li').hide();
$('ul li').each(function(i) {
	$(this).delay(200 * i).fadeIn(500);
});

目次へ

8. 要素の高さを一番高いものに合わせる

下記サンプルは複数あるdiv要素の中で、一番高さがあるものに合わせる記述となります。

jQuery

var maxHeight = 0;
$('div').each(function() {
	if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$('div').height(maxHeight);

上で高さを揃える実装方法を紹介はしましたが、このような動きは「jquery.heightLine.js」や「jquery.matchHeight.js」といったプラグインを使ったほうがレスポンシブにも対応していて非常に便利です。

目次へ

9. フォーカスすると表示領域が伸びる入力フィールド

検索フォームなどでたまに見かける、フォーカスすると表示領域が伸びて、外れると元のサイズに縮んでいく入力フィールドを実装する方法です。

jQuery

$("input[type='text']").on('focus', function() {
	$(this).animate({'width': '300px'}, 300);
}).on('blur', function() {
	$(this).animate({'width': '200px'}, 300);
});

目次へ

10. 確認ダイアログを表示する

入力フォームなどのページで見かけることがある、ページの移動や更新をしようとした際にダイアログを表示させる方法です。
実際に使用する際は、例えばフォームなら内容が入力されていない時に表示というように条件付きで実装するのが良いと思います。

jQuery

$(window).on('beforeunload', function() {
	return 'ここに表示させたい文章をいれる';
});

目次へ

上記以外のjQuery Snippetsに関しては下記ページにまとめているので、興味ある方はこちらもご覧ください。

Back to Top

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。