idとclass

通常HTMLとJavascriptの関係といえば、予めHTML要素としてidまたはclass属性を指定しておき、その属性に対してjavascript側からidやclassを指定して要素を特定しますが、jQueryを使うことによってidやclassを一切かかなくてもjavascriptで操作することが可能になるみたいです。

jQueryで要素を作成

よくある方法として、

<span class="synIdentifier">var</span> hoge = $(<span class="synStatement">document</span>.body).append(<span class="synConstant">'<div>test</div>'</span>);
Code language: JavaScript (javascript)

のようにして要素を追加をするやり方がありますが、これだとhogeには要素の追加先であるdocument.bodyの要素が参照されます。

しかしこれだと追加した要素を操作することができないためidかclass属性を使用するか $(“document.body:last”)というスマートじゃない方法を使用するしかないです。

これを解決するには、こうします。

<span class="synIdentifier">var</span> hoge = $(<span class="synConstant">'<div>test</div>'</span>);
$(<span class="synStatement">document</span>.body).append(hoge);
Code language: JavaScript (javascript)

やってることは上と一緒ですが、このやり方だとhogeにはjavascriptによって操作したい要素がそのまま参照されるので、このhogeを自由に書き換えることができます。しかも、javascriptで準備してから、appendで画面に表示ということができるので、準備時間があり、ローディング時において画面が瞬間的に点滅したり表示が崩れている様子を隠すこともできます。

jQueryプラグイン

有名どころで[coliss.com/:title=コリス]とかあるけども、jQueryプラグインを紹介しているブロガーの方が最近すごく増えてきているとおもいます。いろんなプラグインがあるんだなぁと見て回っていたりしていたのですが、ふと、functionなんかで関数定義せずに全部jQueryプラグインにしてしまったほうが早いんじゃ・・と気づきjQueryプラグインを効率よく作る方法はないかと探したらありました。

jQuery Boilerplate

jQuery Boilerplate
http://jqueryboilerplate.com/

このテンプレートはMITライセンスで配布されているもので、MITなので著作権表示さえすれば自己責任で自由に使えるというものです。なので再頒布も可能です。

というわけでjQuery Boilerplateにコメントを割り振ったものをここに載せちゃいます。

• ライセンス MIT License

;(<span class="synIdentifier">function</span> ($, <span class="synStatement">window</span>, <span class="synStatement">undefined</span>) <span class="synIdentifier">{</span>
    <span class="synComment">//プラグインネームの定義</span>
    <span class="synIdentifier">var</span> pluginName = <span class="synConstant">'defaultPluginName'</span>,

        <span class="synComment">//ドキュメント</span>
        <span class="synStatement">document</span> = <span class="synStatement">window</span>.<span class="synStatement">document</span>,

        <span class="synComment">//デフォルト値</span>
        defaults = <span class="synIdentifier">{</span>
            propertyName: <span class="synConstant">"value"</span>
        <span class="synIdentifier">}</span>;
    <span class="synComment">//プラグインの初期化</span>
    <span class="synIdentifier">function</span> Plugin(element, options) <span class="synIdentifier">{</span>

        <span class="synComment">//要素</span>
        <span class="synIdentifier">this</span>.element = element;

        <span class="synComment">//オプション</span>
        <span class="synIdentifier">this</span>.options = $.extend(<span class="synIdentifier">{}</span>, defaults, options);

        <span class="synComment">//デフォルト値設定</span>
        <span class="synIdentifier">this</span>._defaults = defaults;

        <span class="synComment">//プラグインネーム設定</span>
        <span class="synIdentifier">this</span>._name = pluginName;

        <span class="synComment">//初期化</span>
        <span class="synIdentifier">this</span>.init();
    <span class="synIdentifier">}</span>
    Plugin.prototype.init = <span class="synIdentifier">function</span> () <span class="synIdentifier">{</span>
        <span class="synComment">//プラグインの初期化</span>
        console.log(<span class="synConstant">"プラグインの初期化を行っています"</span>, <span class="synIdentifier">this</span>.element, <span class="synIdentifier">this</span>.options);
    <span class="synIdentifier">}</span>;
    $.fn<span class="synIdentifier">[</span>pluginName<span class="synIdentifier">]</span> = <span class="synIdentifier">function</span> (options) <span class="synIdentifier">{</span>
        <span class="synStatement">return</span> <span class="synIdentifier">this</span>.each(<span class="synIdentifier">function</span> () <span class="synIdentifier">{</span>

            <span class="synComment">//初期化</span>
            <span class="synStatement">if</span> (!$.data(<span class="synIdentifier">this</span>, <span class="synConstant">'plugin_'</span> + pluginName)) <span class="synIdentifier">{</span>
                console.log(<span class="synConstant">"初めてプラグインが実行されたのでプラグインの初期化を行います"</span>);
                $.data(<span class="synIdentifier">this</span>, <span class="synConstant">'plugin_'</span> + pluginName, <span class="synStatement">new</span> Plugin(<span class="synIdentifier">this</span>, options));
            <span class="synIdentifier">}</span>

            <span class="synComment">//実装</span>
            console.log(<span class="synConstant">"実装部分をここに書きます"</span>, <span class="synIdentifier">this</span>, options);
        <span class="synIdentifier">}</span>);
    <span class="synIdentifier">}</span>;
<span class="synIdentifier">}</span>(<a class="keyword" href="http://d.hatena.ne.jp/keyword/jQuery">jQuery</a>, <span class="synStatement">window</span>));
$(<span class="synStatement">document</span>.body).defaultPluginName(<span class="synIdentifier">{</span>
    propertyName: <span class="synConstant">'a custom value'</span>
<span class="synIdentifier">}</span>);
Code language: JavaScript (javascript)

初期化関数

このプラグインが使用されたHTML要素が初めての使用だった場合必ず初期化関数が呼び出されます。同じ要素に対して二回目の実行を行なっても「プラグインの初期化を行っています」と書かれている場所は呼ばれません。

「実装部分をここに書きます」と書いてあるところは毎回呼ばれるので、初期化関数には要素のスタイルを適用したりして、毎回実行されるところにはデータの更新などの記述をすると便利になると思います。

jQueryプラグイン

有名どころで[coliss.com/:title=コリス]とかあるけども、jQueryプラグインを紹介しているブロガーの方が最近すごく増えてきているとおもいます。いろんなプラグインがあるんだなぁと見て回っていたりしていたのですが、ふと、functionなんかで関数定義せずに全部jQueryプラグインにしてしまったほうが早いんじゃ・・と気づきjQueryプラグインを効率よく作る方法はないかと探したらありました。

jQuery Boilerplate

jQuery Boilerplate
http://jqueryboilerplate.com/

このテンプレートはMITライセンスで配布されているもので、MITなので著作権表示さえすれば自己責任で自由に使えるというものです。なので再頒布も可能です。

というわけでjQuery Boilerplateにコメントを割り振ったものをここに載せちゃいます。

• ライセンス MIT License

;(<span class="synIdentifier">function</span> ($, <span class="synStatement">window</span>, <span class="synStatement">undefined</span>) <span class="synIdentifier">{</span>
    <span class="synComment">//プラグインネームの定義</span>
    <span class="synIdentifier">var</span> pluginName = <span class="synConstant">'defaultPluginName'</span>,

        <span class="synComment">//ドキュメント</span>
        <span class="synStatement">document</span> = <span class="synStatement">window</span>.<span class="synStatement">document</span>,

        <span class="synComment">//デフォルト値</span>
        defaults = <span class="synIdentifier">{</span>
            propertyName: <span class="synConstant">"value"</span>
        <span class="synIdentifier">}</span>;
    <span class="synComment">//プラグインの初期化</span>
    <span class="synIdentifier">function</span> Plugin(element, options) <span class="synIdentifier">{</span>

        <span class="synComment">//要素</span>
        <span class="synIdentifier">this</span>.element = element;

        <span class="synComment">//オプション</span>
        <span class="synIdentifier">this</span>.options = $.extend(<span class="synIdentifier">{}</span>, defaults, options);

        <span class="synComment">//デフォルト値設定</span>
        <span class="synIdentifier">this</span>._defaults = defaults;

        <span class="synComment">//プラグインネーム設定</span>
        <span class="synIdentifier">this</span>._name = pluginName;

        <span class="synComment">//初期化</span>
        <span class="synIdentifier">this</span>.init();
    <span class="synIdentifier">}</span>
    Plugin.prototype.init = <span class="synIdentifier">function</span> () <span class="synIdentifier">{</span>
        <span class="synComment">//プラグインの初期化</span>
        console.log(<span class="synConstant">"プラグインの初期化を行っています"</span>, <span class="synIdentifier">this</span>.element, <span class="synIdentifier">this</span>.options);
    <span class="synIdentifier">}</span>;
    $.fn<span class="synIdentifier">[</span>pluginName<span class="synIdentifier">]</span> = <span class="synIdentifier">function</span> (options) <span class="synIdentifier">{</span>
        <span class="synStatement">return</span> <span class="synIdentifier">this</span>.each(<span class="synIdentifier">function</span> () <span class="synIdentifier">{</span>

            <span class="synComment">//初期化</span>
            <span class="synStatement">if</span> (!$.data(<span class="synIdentifier">this</span>, <span class="synConstant">'plugin_'</span> + pluginName)) <span class="synIdentifier">{</span>
                console.log(<span class="synConstant">"初めてプラグインが実行されたのでプラグインの初期化を行います"</span>);
                $.data(<span class="synIdentifier">this</span>, <span class="synConstant">'plugin_'</span> + pluginName, <span class="synStatement">new</span> Plugin(<span class="synIdentifier">this</span>, options));
            <span class="synIdentifier">}</span>

            <span class="synComment">//実装</span>
            console.log(<span class="synConstant">"実装部分をここに書きます"</span>, <span class="synIdentifier">this</span>, options);
        <span class="synIdentifier">}</span>);
    <span class="synIdentifier">}</span>;
<span class="synIdentifier">}</span>(<a class="keyword" href="http://d.hatena.ne.jp/keyword/jQuery">jQuery</a>, <span class="synStatement">window</span>));
$(<span class="synStatement">document</span>.body).defaultPluginName(<span class="synIdentifier">{</span>
    propertyName: <span class="synConstant">'a custom value'</span>
<span class="synIdentifier">}</span>);
Code language: JavaScript (javascript)

初期化関数

このプラグインが使用されたHTML要素が初めての使用だった場合必ず初期化関数が呼び出されます。同じ要素に対して二回目の実行を行なっても「プラグインの初期化を行っています」と書かれている場所は呼ばれません。

「実装部分をここに書きます」と書いてあるところは毎回呼ばれるので、初期化関数には要素のスタイルを適用したりして、毎回実行されるところにはデータの更新などの記述をすると便利になると思います。