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

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

擬似要素のCSSを変更する #1

jQueryを使えば指定した要素のスタイルを変更することは簡単にできますが、その指定した要素の::before, ::afterといった擬似要素のスタイルを変更したいとなると、例えば$('element::before').css('color', 'red');のように記述しても非DOMのためにスタイルは変更できません。
それをどうにかしてjQueryを利用して擬似要素のスタイルを変更したいという場合は、ひとつの方法としてまず要素に.addClass()等でclassを付与し、それを利用して擬似要素のスタイルを変更するという方法があります。

下記は例としてボタンをクリックすると要素に.is-activeというclassがpに付与されるというもので、あとはCSSであらかじめp.is-activeの擬似要素に対してのスタイルを記述しておけば、結果的にjQueryを利用して擬似要素のスタイルが変化するように見せることができます。

jQuery
$('button').on('click', function() {
  $('p').addClass('is-active');
});
p::before {
  content: '★';
}
p.is-active::before {
  color: red;
}

擬似要素のCSSを変更する #2

同じくjQueryを利用して::before, ::afterといった擬似要素のスタイルを変更する方法で、こちらは直接head内にstyleを記述してしまうというものになります。

下記は例としてボタンをクリックするとheadにstyleが追加されるというもので、追加されるstyle内にはp::beforeへのスタイルを記述しておきます。

jQuery
$('button').on('click', function() {
  $('head').append('<style>p::before { color: red; } </style>');
});

別ページから遷移した時に特定のタブを開いた状態にする

以前「10. タブ切り替え – jQuery Snippets #1」で紹介したjQueryを利用したタブ切り替えコンテンツの応用版で、以前紹介した方法だとハッシュ付きでリンク設定したとしても最初のタブが表示される状態のみですが、下記のように記述することで別ページから遷移してきたとしても特定のタブが開かれている状態にすることができます。

例えば<a href="example.html#tab2">tab 2を開いた状態にしたリンク</a>という形でリンクを指定した場合は「example.htmlにページ遷移して且つtab 2が初期表示で開いた状態」になります。
また、通常のページ遷移の場合はそのまま最初のタブが開かれている状態になっています。

<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 hash = location.hash,
    $tabNav = $('.tab-nav li'),
    $tabContents = $('.tab-contents'),
    activeClass = 'is-active';

if ( hash ) {
  var hash = (hash.match(/^#tab\d+$/) || [])[0],
      tabNumber = hash.slice(4) - 1;
  $tabNav.eq(tabNumber).addClass(activeClass).show();
  $tabContents.not(hash).hide();
} else {
  $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;
});

テキストを1文字ずつ任意のタグで括る

jQueryを使ってテキストを1文字ずつ任意のタグで括る方法です。
下記はp要素内にある各テキストをspanで括るという動きのもので、タグを変更したい場合はハイライト表示している箇所を任意のタグに変更してください。

jQuery
$('p').children().addBack().contents().each(function() {
  if ( this.nodeType == 3 ) {
    $(this).replaceWith($(this).text().replace(/(\S)/g, '<span>$1</span>'));
  }
});

もちろんタグで括るだけでなく、下記のようにすればclass付きのタグで括るということも可能です。
サンプルコードは同じくp要素に対して実装しているもので、各p要素内にあるテキストがそれぞれ.split-textというclass付きのspanタグで括られるというものになります。

jQuery
$('p').children().addBack().contents().each(function() {
  if ( this.nodeType == 3 ) {
    $(this).replaceWith($(this).text().replace(/(\S)/g, '<span class="split-text">$1</span>'));
  }
});

テキストを1文字ずつ任意のタグで括る -番号付きclassを付ける-

上の方法でテキストを1文字ずつ任意のclass付きのタグで括ることはできますが、何らかの理由でそこへさらに番号を付けたいという時は下記のように記述することで実装できます。

jQuery
$('p').children().addBack().contents().each(function() {
  if ( this.nodeType == 3 ) {
    $(this).replaceWith($(this).text().replace(/(\S)/g, '<span class="split-text">$1</span>'));
  }
});
$('.split-text').each(function(i) {
  i = i+1;
  $(this).addClass('split-text' + i);
});

まず各p要素内のテキストを1文字ずつ.split-textというclass付きのspan要素で括り、その後そのspan class="split-text"に対して番号を付けるという動きになり、それぞれに.split-text.split-text1, .split-text.split-text2, .split-text.split-text3 … という感じで番号付きclassが付与されます。

上記でそれぞれに番号付きclassを付与しましたが、この場合は単純に上から順に番号を付けているだけなので、例えば複数のp要素がある場合に2つ目以降のp要素は1文字目だからといって.split-text.split-text1というclassが付与されるわけではありません。
これをできれば各要素毎で1からちゃんと番号が始まるようにclass付与させたい場合は、下記のように記述することで実装できます。

jQuery
$('p').children().addBack().contents().each(function() {
  if ( this.nodeType == 3 ) {
    $(this).replaceWith($(this).text().replace(/(\S)/g, '<span class="split-text">$1</span>'));
  }
});
$('p').each(function() {
  $(this).find('.split-text').each(function(i) {
    i = i+1;
    $(this).addClass('split-text' + i);
  });
});

テキストを1文字ずつ表示させる

今であればCSSでアニメーションなど実装することも容易になったので、上で紹介した方法にCSSを組み合わせるということでも表現可能ですが、それをjQueryのみでやるという時は下記のように記述することで実装できます。
下記はp要素内にあるテキストが1文字ずつフェードインで表示されるというもので、表示の感じを変更したければ.delay()と.animate()内の数値を調整するなどしてください。

jQuery
$('p').children().addBack().contents().each(function() {
  if ( this.nodeType == 3 ) {
    $(this).replaceWith($(this).text().replace(/(\S)/g, '<span class="split-text">$1</span>'));
  }
});
$('.split-text').css('opacity', 0);
$('.split-text').each(function(i) {
  $(this).delay(i*50).animate({'opacity': 1}, 500);
});

ちなみに、フェードのエフェクトは必要ないのであれば基本的には上と同じコードを使用しつつ.animate()のdurationの値を0にすれば簡単に切ることができます。

jQuery
$('.split-text').each(function(i) {
  $(this).delay(i*50).animate({'opacity': 1}, 0);
});

ページ最下部にスクロールさせる

よく見かけるのはページ上部にスクロールさせるというものですが、それとは逆にページ最下部にスクロールさせる動きを実装する方法です。
また、.animate()のdurationの値を0にすることでアクセス直後にページ最下部にいるという動きを実装することもできます。

jQuery
$('html, body').animate({ scrollTop: $(document).height() }, 1000, 'linear');

ページ表示後に特定の箇所へスクロールさせる

同じくページスクロールに関する小ネタで、こちらはページ表示後に特定の箇所へスクロールさせるというものになります。
下記のように記述することでページ表示後に$('#target')の部分に指定した要素までスクロールされるようになり、もう少し時間をあけてからスクロールさせたいという時は.delay()の値を変更すれば調整できます。

jQuery
var targetPosition = $('#target').offset().top;
$('html, body').delay(500).animate({ scrollTop: targetPosition }, 1000, 'linear');

サムネイルをクリックして、メインイメージを切り替える

イメージ切り替え時にエフェクトをつけたいとかオートやループ処理も実装したいなど、いろいろやりたい場合はプラグインを利用するなどした方が手っ取り早いですが、簡易的なものでよければ下記で実装できます。

<div class="image">
  <img src="img01.jpg">
</div>
<ul class="thumbnail">
  <li><a href="img01.jpg"><img src="thumbnail01.jpg"></a></li>
  <li><a href="img02.jpg"><img src="thumbnail02.jpg"></a></li>
  <li><a href="img03.jpg"><img src="thumbnail03.jpg"></a></li>
</ul>
jQuery
var $image = $('.image img'),
    $thumbnail = $('.thumbnail li'),
    activeClass = 'is-active';

$thumbnail.first().addClass(activeClass);
$thumbnail.find('a').on('click', function() {
  $thumbnail.removeClass(activeClass);
  $(this).parent().addClass(activeClass);
  $image.attr('src', $(this).attr('href'));
  return false;
});

動きとしては.thumbnail内にあるa要素のhrefにそれぞれメインイメージで表示（切り替え）させたいイメージへのパスを指定しておき、a要素をクリックするとその要素のhrefをattr()で取得、あとはメインイメージのsrcを先ほど取得したものに差し替えるというものになります。
また、サムネイル部分には現在選択されているもの（クリックしたもの）にclassを付与するようにしており、これを利用してCSSでスタイルをつければ現在どのサムネイルが選択されているのかをわかりやすくすることができます。

ここではサムネイルをクリックする動きで紹介していますが、少し記述を変更すればホバーした時に差し替える動きにもできます。

iframeをリロードする

ネイティブでも短い記述で実装は可能ですが、jQueryの場合は下記のような記述で実装できます。

jQuery
$('iframe').attr('src', $('iframe').attr('src'));

見たままですが、attr()を利用してiframeのsrcを取得しつつ書き換えを行うことで、iframeがリロードされているように見せるものになります。

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