jQueryのセレクタにご用心

jQueryを使うには$(セレクタ)のような書き方がよく出てきますが、このセレクタにもいくつか注意しないといけない点があります。

jQuery独自セレクタ

jQueryはquerySelectorAllどころかgetElementsByClassNameすらない時代から続いてきたこともあって、Sizzleという独自ライブラリをセレクタの処理に使っています。そして、独自ライブラリということもあって、本来のCSSにないセレクタを拡張しています。

独自セレクタはjQueryのサイトから一覧を確認できますが、以下のようなものがあります。なお、独自セレクタを使うと、

• querySelectorAllに任せられないためJavaScriptで処理する必要があり、遅い
• jQueryにロックインされる

などデメリットが多いので、ふつうのセレクタで書けるものはそちら優先で書いたほうがいいですし、書けないものでもできるだけ絞り込んでから.filterを使うなどしたほうがいい、とのことです。

inputの種類

:checkbox、:radioなど、<input>の種類ごとにセレクタが用意してありますが、これは標準の属性セレクタでinput[type="radio"]のように書けます¹。

逆向きのセレクタ

:parentには逆の意味の:emptyが、[attr!=value]には[attr=value]が標準でありますので、:not(:empty)とすれば標準のセレクタで書けます。

数を数える系のセレクタ

:even、:odd、:eqなど、jQuery要素を数えてフィルタリングするセレクタがありますが、これらは状況によっては標準セレクタの:nth-childに置き換え可能です。大きな違いとして、

• 複数の親要素に散らばっている場合、jQueryでは親要素を問わずに順番を数えるのに対して、:nth-childは親要素ごとに数える
• 数の基準が、jQueryは0オリジンなのに対して、:nth-childは1オリジン（なので、偶奇も逆転します）

セレクタで書けないもの

標準セレクタに:checkedがある割に:selectedがないのですが、jQuery拡張としては存在します（<option>のselectedプロパティを見ていく、という手段しかありません）。あと、:visibleや逆の:hiddenも存在しません（内部実装は、「エレメントのoffsetWidth、offsetHeight、getClientRects()のどれかが値を持つ」という条件で:visibleを判定していました）。

[checked]と:checkedの違い

これはCSSのセレクタなのでjQueryに限らない話ですが、:checked、:disabled、:requiredのようなセレクタがあります。[checked]などでも書け…そうに思えるかもしれませんが、これは意味が違います。[checked]はHTMLに書かれたchecked attributeを参照するのに対して、:checkedはエレメントの状態（プロパティ）を参照します。「ページ表示時点でcheckedだった要素」を取りたいという、確固とした意志のある状況でなければ、大半の場合に:checkedのほうが適切かと思います。

jQueryで使えないセレクタ

:invalidなど最近CSSに加わったセレクタは、jQueryに投げ込むとうまく認識されないことがあります。どうしてもjQueryで処理したい場合、$(document.querySelectorAll(':invalid'))のような形にすれば、とりあえずは通せます。

1. 等価なのは[type="radio"]ですが、<p type="radio">のような変な要素を探したいのでなければ、inputを付けておいたほうがわかりやすいのでおすすめです。 ↩