idとclass

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

jQueryで要素を作成

よくある方法として、

var hoge = $(document.body).append('<div>test</div>');Code language: JavaScript (javascript)

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

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

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

var hoge = $('<div>test</div>');
$(document.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

;(function ($, window, undefined) {
    //プラグインネームの定義
    var pluginName = 'defaultPluginName',

        //ドキュメント
        document = window.document,

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

        //要素
        this.element = element;

        //オプション
        this.options = $.extend({}, defaults, options);

        //デフォルト値設定
        this._defaults = defaults;

        //プラグインネーム設定
        this._name = pluginName;

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

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

            //実装
            console.log("実装部分をここに書きます", this, options);
        });
    };
}(jQuery, window));
$(document.body).defaultPluginName({
    propertyName: 'a custom value'
});Code language: JavaScript (javascript)

初期化関数

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

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

jQueryが使える？！

あの忌まわしいprototype汚染から逃れることが可能で、しかもクロスブラウザ対応にもできちゃうという魔法のフレームワークjQueryがはてなブログでは使えるの！？はたしてその真相はいかに！？

というわけでためしてみた

<script type="text/javascript">
$(document).ready(function(){
var hoge = $("<button>これはボタンです</button>");
    hoge.click(function(){
        alert("ボタンがあったらクリックしたくなるのが人間というものです。");
    });
    $(".entry-content:first").append(hoge);
});
</script>Code language: HTML, XML (xml)