jQueryの便利な独自拡張セレクタ

jQueryのセレクタはCSSのセレクタと同じように

$('#IdName');
$('.ClassName');

のような形で指定出来るのでCSSが書ける人にとっては直感的でとてもわかりやすいですよね。

ただ、見落としがちなのですが、jQueryにはCSSにはない独自のセレクタが存在しています。
それを利用するとより簡潔なプログラムが書けるようになるので今回はjQueryの独自拡張セレクタを紹介したいと思います。

便利な独自拡張セレクタの紹介

:animated

jQueryのanimate関数によりアニメーション中の要素を取得します。

よく使う使い方はis関数を使用して

if ($('#IdName').is(':animated')) {
  // アニメーション中の処理
}

のようにして、選択中の要素がアニメーション中なら処理を行うといった場合に使用します。

実例

ソースコード

<style>
  #AnimateBox {
    width: 100px;
    height: 100px;
    background-color: black;
  }
</style>

<script>
  $(function() {
    var $button = $('#AnimateButton');
    var $box    = $('#AnimateBox');
    $button.on('click', function() {
      if (!$box.is(':animated')) {
        $box.animate({
          width: '200px'
        }).animate({
          width: '100px'
        });
      }
    });
  });
</script>

<div id="AnimateWrapper">
  <button id="AnimateButton">アニメーション</button>
  <div id="AnimateBox"></div>
</div>

実例では、ボタンを押した際にアニメーション中かどうか判断して、アニメーション中でない時だけanimate関数を実行しています。
この条件分岐を入れていないとアニメーション中かどうかに関わらず、ボタンをクリックした回数だけアニメーションが繰り返されてしまい、場合によっては不自然に見えてしまいます。

このセレクタの存在を知る前はわざわざアニメーション判断用のフラグを用意したりしていたので、このセレクタは是非覚えておいた方がいいと思います。

注意としては、CSSアニメーションによってアニメーションしているかどうかの判断には使用出来ない事に注意が必要です。

:visible/:hidden

:visibleは画面中に表示されている要素、:hiddenは逆に表示されていない要素を取得します。

このセレクタも:animatedと同様に、

if ($('#IdName').is(':visible')) {
  //表示されている時の処理
} else {
  //表示されていない時の処理
}

のような形で、is関数を使用して条件分岐に使用すると便利です。

実例

×

ソースコード

<style>
  #ToggleBox {
    width: 100px;
    height: 100px;
    background-color: black;
  }
</style>

<script>
  $(function() {
    var $button = $('#ToggleButton');
    var $box    = $('#ToggleBox');
    
    $button.on('click', function() {
      $box.slideToggle(500, function() {
        if ($box.is(':visible')) {
          $button.html('×');
        } else {
          $button.html('三');
        }
      });
    });
  });
</script>


<button id="ToggleButton">×</button>
<div id="ToggleBox"></div>

実例では、slideToggleアニメーション完了時に、is(‘:visible’)でboxが表示されているか判断して、その状態によってボタンの表示を変えています。
よくあるトグル型のナビに使用すると良さそうですね。

「display: none;」である要素以外に、width/height共に0pxの要素も取得できますが、「opacity: 0;」や「visibility: hidden;」の要素は取得しません。

その他の独自拡張セレクタ一覧

説明が大変なので詳細な説明は省きますが、jQueryには以下のように他にも多くの独自拡張セレクタが存在しています。

特定の位置の要素を取得

• :first/:last
  最初・最後の要素を取得
• :even/:odd
  偶数・奇数番目の要素を取得
• :eq(x)/:gt(x)/:lt(x)
  x番目/x番目より後ろ/x番目より手前の要素を取得
  （xは0スタートなので、最初の要素を取得したい時は:eq(0)となることに注意）

フォーム関係

• :input
  input,select,textarea,buttonを取得
• :submit
• :image
• :reset
• :button
• :checkbox
• :radio
• :file
• :password
• :text
  それぞれ、type=~の要素を取得
• :selected
  選択中のoptionを取得

他

• :header
  h1~h6の要素を取得
• :parent
  子・孫要素を持つ要素を取得
• :has(~)
  括弧内の要素を持つ要素を取得

以上

独自拡張セレクタは、知らなくてもなんとかなることはなりますが、使った方が簡潔なソースに出来る事が多いので頭の片隅には置いておいた方がいいかなーと。

以上、たにっぱでした〜。