Javascriptでは比較演算子による文字列の大小比較演算が可能。
※比較はUnicodeの文字コード値ベースで判定される。

主な規則は下記の通り。

・英語アルファベットは辞書順
・英語大文字は小文字より前
・数字、記号は英文字よりも前（一部記号は英文字より後）
・平仮名はカタカナより前
・平仮名、カタカナはそれぞれ辞書順
・濁点、半濁点は「へ」「べ」「ぺ」「ほ」「ぼ」「ぽ」「ま」といった順
・漢字は平仮名、カタカナよりも後
・漢字の並び順は基本的に音読みの辞書順（例外あり）

var str1 = 'abc';
var str2 = 'def';
console.log(str1 < str2)
// true
console.log(str1 > str2)
// false

前にもエントリー作ったけど、もうちょっと詳しく。

■関数定義（ver1.7?）
引数の渡し方によって解釈が異なる。

// bind構文
$(selector).on(eventName, function)
// delegate構文
$(scope).on(eventName, selector, function);

■引数解説

■使用例

$(document).on('click', '.hoge', function(){...});
$('.fuga').on('keydown', '.piyo', function(){...});

調査範囲にdocumentを指定すると全てのDOM要素が.onの管理下におかれるため、非常にシンプルかつ強力な動的バインドが期待できる半面、イベントが発生するごとにドキュメント全体を走査するので処理的にはとても重たいという点に注意されたし。できるのであれば操作範囲は必要最小限に設定することが望ましい。

また、同時に複数のイベントに対して同じ動作を割り当てたい場合、下記のように第一引数を羅列してやればよい。

$('.hoge').on('click keydown blur', '.fuga', function(){...});

それぞれのイベントに対して、別々の動作を割り当てたい場合は第一引数にオブジェクトを渡してやり、第二引数にバインド対象となるDOM要素のセレクターを記述する。

$('.scope').on({
	'click': function(){...},
	'keydown': function(){...},
	'blur': function(){...}
}, '.hoge');

下記のように引数を渡すことも可能。

// この場合各イベントで「myData」というアラートが表示される。
$(document).on({
	'click': function(arg){alert(arg.data)},
	'keydown': function(arg){alert(arg.data)},
	'blur': function(arg){alert(arg.data)}
}, '.target', 'myData');

オブジェクトも渡せる。

$(document).on({
	'click': function(arg){alert(arg.data.arg1)},
	'keydown': function(arg){alert(arg.data.arg2)},
	'blur': function(arg){alert(arg.data.arg3)}
}, '.target', {'arg1':'aaa', 'arg2':'bbb', 'arg3':'ccc'});

単一のイベントに対して引数を渡す際の書式は以下の通り。

$(document).on('click', '.target', {'arg1':'aaa'}, function(arg){alert(arg.data.arg1)});

.on()クッソ便利。

セレクタで要素中に特定の値（テキスト）を含む条件を指定したい場合:contains()を用いてフィルターをかけると便利だが、こいつは完全一致ではないため文字列が含まれていればそのまま引っ張ってきてしまう。しかも正規表現が使用できないので完全一致の場合のみ選択したいとなるとちょっとこまる。

ということで調べてみた結果、結局ひっかかった要素をループでまわして評価していくしかなさそうなので下記のような感じで実装した。

下記のような同一のクラスを持つ要素の中で、「testtt」という文字列をもった要素のみテキストを書き換えたいとする。
この場合、普通に:contains()でフィルターをかけると4行目、5行目の要素も選択されてしまう。

<div class="target">test</div>
<div class="target">testt</div>
<div class="target">testtt</div>
<div class="target">testttt</div>
<div class="target">testtttt</div>

なので以下のようにする。

<script>
$(function(){
	var txt = 'testtt';
	var elem = null;
	$('.target:contains('+txt+')').each(function(){
		if($(this).text() == txt) elem = $(this);
	});
	elem.text('match!!');
})
</script>

ごり押しで解決。笑

めも。

下記のようなHTMLがあったと仮定。

<table class="table">
<thead>
<tr><th>hoge</th><th>fuga</th><th>piyo</th></tr>
</thead>
<tbody>
<tr><td>data1</td><td>data1</td><td>data1</td></tr>
<tr><td>data2</td><td>data2</td><td>data2</td></tr>
<tr class="target"><td>data3</td><td>data3</td><td>data3</td></tr>
<tr><td>data4</td><td>data4</td><td>data4</td></tr>
<tr><td>data5</td><td>data5</td><td>data5</td></tr>
</tbody>
</table>

<button type="button" class="js_btn">append</button>

ボタンをクリックした時、特定要素（.target）の手前に一行追加したい場合は、下記の通り。

<script>
$(function(){
	$('.js_btn').click(function(){
		var elem = '<tr><td>data999</td><td>data999</td><td>data999</td></tr>';
		$(elem).insertBefore('tr.target');
	})
})
</script>

ちなみに。

$(a).insertBefore(b)、は「b」の手前に「a」が挿入される。
$(a).before(b)、は「a」の手前に「b」が挿入される。