jQueryのセレクタ

以下のページでjQueryやDOMについて学んでいます。 www.mojage.club

本記事は、jQueryのセレクタについて纏めています。

Sponsored Link

セレクタ

セレクタの指定は単体でも可

filter()などで要素を選択する際は$('div:hidden').の様に完全に指定しなくても、一要素での指定ができます。

$(':hidden');

is()メソッドはboolean値を返す

<div id="i1"></div>

alert($('div').is('#i1'));  // true

複数要素を一つのセレクタで指定可

<div>jQuery</div>
<p>is the</p>
<ul>
  <li>best!</li>
</ul>

(function($){
  alert($('div, p, ul li').text());  // jQuery is the best!

  alert($('div').text() + $('p').text() + $('ul li').text()); // 上の行と同様の処理
})(jQuery);

.lengthプロパティで既存確認

使用したい表現(id名やclass名など)を.lengthプロパティで存在するか確認ができます。.lengthが0以上を返した場合、存在することになります。

alert($('#noteHere').length);  // 0

カスタムフィルタの作成

例えば、style="position:absolute"などを抽出するフィルタはデフォルトで存在しないので、:positionAbsoluteフィルターを自作します。

<div style="position:absolute">absolute</div>
<span stype="position:absolute">abab</span>

(function($){
  // カスタムフィルタの定義
  $.expr[':'].positionAbsolute = function(element){
    return $(element).css('position') === 'absolute';
  };

  // position:absoluteが設定されている要素はいくつあるか
  alert($(':positionAbsolute').length); // 2

  // div要素でposition:absoluteが設定されている要素はいくつあるか
  alert($('div:positionAbsolute').lenght); //1

})(jQuery)

jQueryが提供するフィルター

数学的な指定方法
  • :first
  • :last
  • :even
  • :odd
  • :eq(index)
  • :gt(index)
  • :lt(indes)
CSS表現での指定方法
  • ancestor descendant
  • [parent] > [child]
  • [prev] + [next]
  • [prev] ~ [siblings]
  • :nth-child(selector)
  • :first-child
  • :last-child
  • :only-child
  • :empty
  • :has(selector)
  • :parent

エスケープ文字

idがid="#foo[bar]"の様なメタ文字を含む場合は、エスケープ文字を使用する必要があります。\\<-バックスラッシュ2つを文字の前に付けます。 以下の文字がエスケープが必要な文字です。
!"#$%&'()*+,./:;<=>?@[\]^{|}~`

<div id="#foo[bar]">jQuery</div>

(function($){
  alert($('#\\#foo\\[bar\\]').text());  // jQuery
})(jQuery);

複数プロパティでのフィルタ

<a title="jQuery">jQuery.com</a>
<a href="http://www.jquery.com" title="jQuery" class="foo">jQuery.com</div>
<a href="">jQuery.com</a>
<a href="http://www.jquery.com" title="jQuery">jQuery.com</div>

~~~

(function($){
  // titleが"jQuery"、hrefが"http://"から始まる、classが何かしら適用されているものを抽出
  alert( $('a[title="jQuery"][href^="http://"][class!=""]').length); // 1
})(jQuery);

フィルタのネスト

<div>javascript</div>
<div><span class="jQuery">jQuery</span></div>
<div>javascript</div>
<div><span class="jQuery">jQuery</span></div>
<div>javascript</div>
<div><span class="jQuery">jQuery</span></div>

~~~

  // 全てのdiv要素の中から、class="jQuery"をもつ要素を除いたものを選択
  alert($('div:not(:has(.jQuery))').text()); 

効果的な>の使い方

<ul id="firstUL">
  <li>text</li>
    <li>
      <ul id="secondUL">
        <li>text</li>
        <li>text</li>
      </ul>
    </li>
  <li>text</li>
</ul>

  // 最初のul要素が持つ直下のli要素の数
  alert($('ul:first').find('> li').length);  // 3

  // or

  // alert($('> li', 'ul:first').length);

Reference from : jQuery Enlightenment