jQueryの$()が多機能すぎる件について。5種類も仕事があるよ。（軽めのjQuery Advent Calendar 2012 – 01日目）

jQueryってあるじゃないですか。便利ですよね。いろんなところで紹介されてるっていうかもう普通に使われてると思うんですけど。

`jQuery()`

APIについてはこちら。

jQueryと$は同じものなので、jQuery()と$()は同じです。これ、実は関数なんですよ。

というわけで、以下使い方。

たぶんこれが一番多いですよね。

var $theElement = $('div#target > .enabled:not(.hidden):eq(0)');

ちなみに複雑なセレクターを書くより、関数で分割した方が実行は高速です。

これもぼちぼち使いますね。HTMLを画面から探してくるんじゃなくて、新しく作成します。属性を付けたり、入れ子のHTMLをまとめて作る事も可能です。

var $newElement = $('<div id="hoge"><span class="fuga">piyo</span></div>');

第二引数には属性を設定する事も出来ます。

var $newElement = $('<div />', { id:'hoge', class:'fuga', text:'piyo&piyo' });
// => <div id="hoge" class="fuga">piyo&amp;piyo</div>

意外と速度面ではこちらの方が不利っぽいのだけれど、 適切にエスケープしてくれる という非常に大きな利点があります。外部から得た値等、不確実な内容で要素構築する場合は、必ずこちらを利用するようにしましょう。

JSファイル全体を括ったりしてるのを見た事があるはず。

alert('1');
$(function(){
  alert('3');
});
alert('2');

画面の読み込みが終わるまで待ってから、中身を実行します。

えーとアレです、 .click() とかの中で使うやつですね。

$('a').click(function() {
  var url = $(this).attr('href');
  alert(url);
});

このときthisはクリックされたa要素の生のオブジェクトです。jQueryじゃないので .attr()は使えません。なので$(this)でjQueryのオブジェクトにしてから、 .attr()を使っています。

空のjQueryオブジェクトを返します。セレクターで検索して結果0件だった場合とだいたい一緒です。

まーあんまり使わないと思う。

いやー、実に多機能ですね。第二引数は知らない人多そうなので、一度APIのドキュメントを眺めてみると良いかと思います。

どっとはらい。