jQueryで使えるCSSセレクタを動的に確認できるサイトの紹介。

jQuery1.2.1（現時点で最新版）のセレクタを入力し、選択されたノードの背景をハイライトする。

複雑な選択対象が必要なら「Markup to test against」の内容が変更可能なので変更すればいい。

jQueryはいくつかの独自拡張セレクタも使う事が出来るので、使用可能なセレクタはjQueryマニュアル - API/1.2/Selectorsを見ながら試せばとても快適です。

快適なノード選択ライフを貴方に、jQuery。

Interactive jQuery selector tester

http://www.woods.iki.fi/interactive-jquery-tester.html

JavaScriptでonkey～系のイベントハンドラを使いその操作をマウスを使っても行える場合、忘れずその処理も加えるという事。

onClickでの処理にショートカットとしてonKey系の処理を付け加えた場合などはそんなに忘れる事も無いが、最近では良くあるフォームの入力中に送信可否を出したり文字数計算やらをする場合に忘れがち。onKeyupでフォームにキーボードからの入力は拾えても、マウスのみの操作で右クリックから貼り付けを拾えないのはよろしくない。

例えば、名前とコメントが空でなければSubmitボタンを有効にするような場合にonKeyupの処理しかないと、どちらかがマウスで貼り付けのみであった場合Submitボタンが無効化されたままになってしまう。

そういう時には忘れずonBlurやonMouseupで拾ってやって同じ処理を加えてやる事。

貼り付けは常にCtrl+Vを使っていたりするとついつい忘れてしまうので注意。

かなり昔から言われてる事で、頻繁にJavaScriptを書く人には至極当然なんだろうけども･･･。

GoogleのSyntaxhighligterを入れてみた。 PHPだとこんな感じ。

class Example {
    static public $foo;
    privae $var;

    protected function fooBar() {
        $this->$var = self::$foo;
    }
}

ハイライト用のJavaScriptの読み込みはこんな感じ。

<script type="text/javascript" src="http://apecell.com/js/SyntaxHighlighter/shCore.js"></script>
<script type="text/javascript" src="http://apecell.com/js/SyntaxHighlighter/shBrushPhp.js"></script>
<script type="text/javascript" src="http://apecell.com/js/SyntaxHighlighter/shBrushXml.js"></script>
<script type="text/javascript" src="http://apecell.com/js/SyntaxHighlighter/shBrushCss.js"></script>
<script type="text/javascript" src="http://apecell.com/js/SyntaxHighlighter/shBrushSql.js"></script>
<script class="javascript" type="text/javascript">
dp.SyntaxHighlighter.ClipboardSwf = 'http://apecell.com/js/SyntaxHighlighter/clipboard.swf';
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

JavaScriptの読み込みが多いとそれだけで悪い事をしている気分になるのはなんでだろう。