jQueryのセレクタの使い方いろいろ

 実際にやってみるとjQueryはかなりおもしろいです。私自身これまで殆どサーバーサイドのスクリプトしか使っていなかったので実際にJavascriptを使ってみるとかなりいい感じです。かつてはJavascriptが比較的へんてこな動き(というのも初心者向けに書かれた解説本の殆どがなんか田舎臭いへんてこなサンプルしかない...)だったので、全く興味が持てなかったのですが、jQuery的なライブラリーが手軽に使える現在、これはかなりおもしろいです。いろんなことができそうです。
 セレクタの使い方なのですが、jQuery初心者の皆様には結構な朗報かもしれません。(って、普通みんな知っているだろうけど。)
 jQueryのよいところはxhtmlにオブジェクトとして簡単にアクセスできることです。直感ですが数年後には標準でこの機能がブラウザーに組み込まれていてもおかしくないといった感じがしないでもないですが、今現在のところjQueryを使うと一番便利なのです。そのxhtmlの値に何らかの手段でアクセスするわけですが、やり口としては殆どCSSのセレクタのような感じなんですね。しかしCSSが個々のxhtmlタグにアクセスしその表面的なデザインに手を加えてゆくのに対してjQueryでは変数を使ってかなり動的にアクセスできるわけです。もちろんCSSでも*(アスタリスク)を使って全体を網羅しつつアクセスできるわけですが、完全にW3Cの勧告によるネスト構造にしかアクセスできない。不規則にアクセスできないんですね。しかしそれがjQueryだとできてしまうわけですよ。

セレクタに変数を使う

jQueryのコード
$(function(){
    // フィールドにフォーカスされた時に背景色を変える
    // inputにIDがある時のみです。
    $(":input").focus(function(){
        var id = $(this).attr("id");
        $('#'+id).css("background-color","#f00");
       
        // フォーカスが外れたら元に戻す
        $('#'+id).blur(function(){
            $('#'+id).css("background-color","#fff");
        }) 
    })
})
xhtmlソース
姓 <input id="pre_name" name="pre_name" value="" type="text" />
名 <input id="post_name" name="post_name" value="" type="text" />
こんな感じです。

解説

 まずは、inputというフォームタグにアクセスします。これは共通にどのinputタグにアクセスしても機動するようになっています。つまりフォームのフィールドにマウスを置いた時点(フォーカスされた時点)で機動するわけです。その部分が、
$(":input").focus(...
です。実に簡単。
 次いで、そのフォーカスされたinputタグにつけられたIDを取得します。これまた簡単。
var id = $(this).attr("id");
いろいろと使いたいので変数に入れておきます。こうしておくと後からこの取得したIDをいくらでも取り出すことができるわけです。このthisというjQuery特有のオブジェクトもいいです。これはいい。つまり、ここではフォーカスされたinputタグがそのままthisになってくれるのでいちいち個別に変数を用意する必要がないわけです。
 で、このIDなのですが、jQueryのセレクタでは#IDという風にまるでCSS風にIDを指定してやるとそのxhtmlタグにアクセスできちゃいます。個別にアクセスする場合、$("#input_id").css("background-color","#f00");みたいな感じでアクセスするのですが、ここではセレクタに変数を用いることができるので、
$('#'+id).css("background-color","#f00");
となるんですね。どこからどこがJavascriptでどこからどこがjQuery特有の記述方法なのかよくわからなくなってきますが、使っているうちにわかってくると思います。
 ここで保存しておいたIDはblurイベントの際も同様に使えます。
$('#'+id).blur(function(){
こんなんです。
 バリデートの際にblur時に何らかのエラーメッセージなどを表示させたい場合は、あらかじめエラーを表示させるタグをxhtmlファイル上に作っておき、$('p#'+id+"_error").text("blur");という風にその個別のIDをあてにしつつ表示することができます。
$('p#'+id+"_error").text("blur");
<p id="<それぞれのID>_error"></p>
と、こんな感じでしょうか。








プロフィール



  • Name :: 山上オサム ♂(37)
  • Hobby :: 武術
  • Work :: Web Designer