Dom7

    Framework7は、DOM操作のためであってもサードパーティーのライブラリを使用せず、独自のカスタムDom7 ― 最先端かつ高性能なDOM操作が可能なDOMライブラリを持っています。これは、最も頻繁に使用されるメソッドとjQuery風の連鎖をサポートする、有名なjQueryライブラリと同じ構文を持っているため、使い方は非常に簡単で、何も新しいことを学ぶ必要はありません。

    これを使い始めるには Dom7 グローバルウィンドウ関数がありますが、$$ などより便利な名称のローカル変数に代入することが推奨されます。但し、jQueryやZeptoなど他のライブラリとの競合を防ぐために、"$"には代入しないでください:

    //容易にアクセスできるよう、Dom7をローカル変数にエクスポート
    var $$ = Dom7;

    使用例

    既にすべて知っているものでしょう:

    $$('.something').on('click', function (e) {
        $$(this).addClass('hello').attr('title', 'world').insertAfter('.something-else');
    });

    利用可能なメソッド

    これらのメソッドはすべて、jQueryやZeptoとほぼ同様の方法で、また同じ引数で動作します:

    $$(window).trigger('resize');
    クラス
    .addClass(className) 要素にクラスを追加
    // 全段落に"intro"クラスを追加
    $$('p').addClass('intro');
    .removeClass(className) 指定したクラスを削除
    // "big"クラスを持つ全リンクから、"big"クラスを追加
    $$('a.big').removeClass('big');
    .hasClass(className) マッチした要素のいずれかに、特定のクラスが割り当てられているかどうかを確認します:
    <p class="intro">Lorem ipsum...</p>
    $$('p').hasClass('intro'); //-> true
    .toggleClass(className) マッチした要素群の各要素から1つ以上のクラスを削除する(クラスが存在する場合)か、または(存在しない場合)追加します:
    <!-- 前 -->
    <h1 class="small">This is first title</h1>
    <h2>This is subtitle</h2>
    $$('h1, h2').toggleClass('small');
    <!-- 後 -->
    <h1>This is first title</h1>
    <h2 class="small">This is subtitle</h2>
    属性とプロパティ
    .prop(propName) プロパティの値を取得:
    var isChecked = $$('input').prop('checked');
    .prop(propName, propValue) 単一のプロパティ値を設定:
    // 全チェックボックスをチェック済みに
    $$('input[type="checkbox"]').prop('checked', true);
    .prop(propertiesObject) 複数のプロパティを設定:
    $$('input').prop({
      checked: false,
      disabled: true
    })
    .attr(attrName) 属性の値を取得:
    <a href="http://google.com">Google</a>
    var link = $$('a').attr('href'); //-> http://google.com
    .attr(attrName, attrValue) 単一の属性値を設定:
    // 全リンクをgoogleに設定
    $$('a').attr('href', 'http://google.com');
    .attr(attributesObject) 複数の属性を設定:
    $$('a').attr({
      id: 'new-id',
      title: 'Link to Google',
      href: 'http://google.com'
    })
    .removeAttr(attrName) 指定した属性を削除:
    // 全画像から"src"属性を削除
    $$('img').removeAttr('src');
    .val() マッチした要素群の最初の要素の、現在の値を取得
    <input id="myInput" type="text" value="Lorem ipsum"/>
    var inputVal = $$('#myInput').val(); //-> 'Lorem ipsum'
    .val(newValue) マッチした全要素に値を設定
    $$('input#myInput').val('New value here');
    データストレージ
    .data(key, value) マッチした要素に関連付けられた、任意のデータを保存
    $$('a').data('user', {
        id: '123',
        name: 'John',
        email: 'john@doe.com'
    });
    .data(key) data(key, value)、またはHTML5の"data- *"属性によって設定された、集合の最初の要素の、名前付きデータストアの値を返す
    var user = $$('a').data('user');
    //-> {id: '123', name: 'John', email: 'john@doe.com'}

    or

    <p data-id="123">Lorem ipsum...</p>
    var id = $$('p').data('id'); //-> 123
    .removeData(key) 指定したデータを削除
    $$('a').removeData('user')
    データセット
    .dataset() 要素のデータセット("data-"属性のセット)を、プレーンオブジェクトとして返す
    <div id="my-div" data-loop="true" data-animate-pages="false" data-index="0" data-hello="world">
        ...
    </div>
    var dataset = $$('#my-div').dataset();
    /*
    データセットには、キャメルケースキーと、フォーマット化されたbooleanおよび数値型を持つ、プレーンオブジェクトが含まれる
    {
        loop: true,
        animatePages: false,
        index: 0,
        hello: 'world'
    }
    */
    CSSのtransform、transition
    .transform(CSSTransformString) 接頭辞付きのCSS"transform"プロパティを追加:
    $$('a').transform('rotate(90deg)')
    .transition(transitionDuration) CSSの"transition-duration"プロパティを集合に設定:
    $$('p').transition(300)
    イベント
    .on(eventName, handler, useCapture) 選択した要素の1つ以上のイベントに、イベントハンドラ関数を追加
    $$('a').on('click', function (e) {
      console.log('clicked');
    });
    $$('input[type="text"]').on('keyup keydown change', function (e) {
      console.log('input value changed');
    });
    .on(eventName, delegatedTarget, handler, useCapture) Live/delegatedイベントハンドラ
    $$(document).on('click', 'a', function (e) {
      console.log('link clicked');
    });
    .once(eventName, handler, useCapture) 選択した要素の1つ以上のイベントに、一度だけ実行されるイベントハンドラ関数を追加
    $$('a').once('click', function (e) {
      console.log('clicked');
    });
    $$('input[type="text"]').once('keyup keydown change', function (e) {
      console.log('input value changed');
    });
    .once(eventName, delegatedTarget, handler, useCapture) 一度だけ実行される、Live/delegatedイベントハンドラ
    $$(document).once('click', 'a', function (e) {
      console.log('link clicked');
    });
    .off(eventName, handler, useCapture) イベントハンドラを削除
    function clickHandler(){
        console.log('clicked');
    }
    // イベントリスナーを追加
    $$('a').on('click', clickHandler);
    // イベントリスナーを削除
    $$('a').off('click', clickHandler);
    
    .off(eventName, delegatedTarget, handler, useCapture) Live/delegatedイベントハンドラを削除
    function clickHandler(){
        console.log('clicked');
    }
    // イベントリスナーを追加
    $$(document).on('click', 'a', clickHandler);
    // イベントリスナーを削除
    $$(document).off('click', 'a', clickHandler);
    .trigger(eventName, eventData) 指定したイベントの、マッチした要素に追加されたハンドラをすべて実行
    .transitionEnd(callback, permanent) 接頭辞付きの"transitionEnd"イベントハンドラを集合に追加:
    $$('a').transitionEnd(function(){ /* 動作 */ })
    .animationEnd(callback) 接頭辞付きの"animationEnd"イベントハンドラを集合に追加:
    $$('a').animationEnd(function(){ /* 動作 */ })
    スタイル
    .width() マッチした要素群の最初の要素について、現在計算されている幅を取得
    var boxWidth = $$('div#box').width();
    .outerWidth([includeMargin]) マッチした要素群の最初の要素について、パディングやボーダー、マージンを含む、現在計算されている幅を取得("includeMargin"が true の場合)
    var outerWidth = $$('div#box').outerWidth(true);
    .height() マッチした要素群の最初の要素について、現在計算されている高さを取得
    var boxHeight = $$('div#box').height();
    .outerHeight([includeMargin]) マッチした要素群の最初の要素について、パディングやボーダー、マージンを含む、現在計算されている高さを取得("includeMargin"が true の場合)
    var outerHeight = $$('div#box').outerHeight(true);
    .offset() ドキュメントに対する、最初の要素の現在の座標を取得
    var coords = $$('.content').offset(); //-> {top: 100, left: 200}
    var top = coords.top; //-> 100
    var left = coords.left; //-> 200
    .hide() マッチした要素に"display:none"を設定
    // 全段落を非表示
    $$('p').hide();
    .show() マッチした要素に"display:block"を設定
    // 全段落を表示
    $$('p').show();
    .css(property) 最初の要素に指定されたCSSプロパティの値を取得:
    $$('.content').css('left'); //-> 200px
    .css(property, value) マッチした要素に指定されたCSSプロパティの値を取得:
    $$('.content').css('left', '100px');
    .css(propertiesObject) マッチした要素に複数のCSSプロパティを設定
    $$('a').css({
        left: '100px',
        top: '200px',
        color: 'red',
        width: '300px',
        marginLeft: '17px',
        'padding-right': '20px'
    });
    スクロール
    .scrollTop() 要素の"scrollTop"位置を取得
    .scrollTop(position, duration, callback) "duration"(ミリ秒)の時間で、アニメーション付きで"scrollTop"の「位置」を設定。時間が指定されない場合は、一番上のスクロール位置が直ちに設定されます。"callback"関数を指定した場合は、スクロールが完了した後に実行されます。
    .scrollLeft() 要素の"scrollLeft"位置を取得
    .scrollLeft(position, duration, callback) "duration"(ミリ秒)の時間で、アニメーション付きで"scrollLeft"の「位置」を設定。時間が指定されない場合は、左のスクロール位置が直ちに設定されます。"callback"関数を指定した場合は、スクロールが完了した後に実行されます。
    .scrollTo(left, top, duration, callback) "duration"(ミリ秒)の時間で、アニメーション付きで"scrollLeft"および"scrollTop"の「位置」を設定。時間が指定されない場合は、スクロール位置が直ちに設定されます。"callback"関数を指定した場合は、スクロールが完了した後に実行されます。
    Dom操作
    .add(elements) マッチした要素群に要素を追加して、新しいDom7の集合を作成:
    var links = $$('a');
    var divs = $$('div');
    links.add('p').addClass('blue');
    links.add(divs).addClass('red');
    
    .each(callback) 集合に対して繰り返し、マッチした各要素に対してコールバック関数を実行
    .html() マッチした要素群の、最初の要素のHTMLコンテンツを取得
    .html(newInnerHTML) マッチした全要素のHTMLコンテンツを設定
    .text() マッチした要素群の、最初の要素のテキストコンテンツを取得
    .text(newTextContent) マッチした全要素のテキストコンテンツを設定
    .is(CSSSelector) CSSセレクタに対して、現在マッチしている要素群を確認
    .is(HTMLElement) HTML要素またはDom7の集合に対して、現在マッチしている要素群を確認
    .index() Dom7集合の最初の要素の、兄弟要素に対する位置を返す
    .eq(index) マッチした要素群を、指定したインデックスの要素に減らす
    .append(HTMLString) パラメータで指定したコンテンツを、マッチした要素群の各要素の末尾に挿入
    .append(HTMLElement) マッチした要素群の要素の末尾に、指定したHTML要素を挿入
    .appendTo(HTMLElement) パラメータで指定した要素の末尾に、コンテンツ/要素を挿入
    .prepend(newHTML) パラメータで指定したコンテンツを、マッチした要素群の各要素の先頭に挿入
    .prepend(HTMLElement) マッチした要素群の要素の先頭に、指定したHTML要素を挿入
    .prependTo(HTMLElement) パラメータで指定した要素の先頭に、コンテンツ/要素を挿入
    .insertBefore(target) マッチした要素群の全要素を、ターゲットの前に挿入。ターゲットはCSSセレクタ、HTML要素、またはDom7の集合として指定可能
    .insertAfter(target) マッチした要素群の全要素を、ターゲットの後に挿入。ターゲットはCSSセレクタ、HTML要素、またはDom7の集合として指定可能
    .next([selector]) マッチした要素群の各要素の、直後の兄弟要素を取得。セレクタが提供されている場合は、そのセレクタとマッチする場合に限り、次の兄弟要素を取得
    .nextAll([selector]) マッチした要素群の各要素の、後に続く兄弟要素をすべて取得。任意でセレクタによるフィルタリング
    .prev([selector]) マッチした要素群の各要素の、直前の兄弟要素を取得。任意でセレクタによるフィルタリング
    .prevAll([selector]) マッチした要素群の各要素の、前にある兄弟要素をすべて取得。任意でセレクタによるフィルタリング
    .siblings([selector]) マッチした要素群の各要素の、兄弟要素を取得。任意でセレクタによるフィルタリング
    .parent([selector]) マッチした要素群の各要素の、初めの親要素を取得。任意でセレクタによるフィルタリング
    .parents([selector]) マッチした要素群の各要素の、初めの子要素を取得。任意でセレクタによるフィルタリング
    .closest([selector]) 要素群の各要素について、要素自体をテストしてDOMツリー内のその先祖を通過していくことで、セレクタにマッチする最初の要素を取得
    .find(selector) マッチした要素群の各要素の、親要素を取得。セレクタによるフィルタリング
    .children(selector) マッチした要素群の各要素の、子要素を取得。任意でセレクタによるフィルタリング
    .filter(callback) 要素の集合をフィルタリング
    var redLinks = $$('a').filter(function(index, el) {
        return $$(this).hasClass('red');
    })
    
    .remove() Domから、マッチした要素を削除/デタッチ
    .empty() DOMから、マッチした要素群の子ノードをすべて削除/デタッチ。.html('') のエイリアス
    ショートカット
    .click() 集合に"click"イベントをトリガー
    .click(handler) 集合に"click"イベントハンドラを追加
    .blur() 集合に"blur"イベントをトリガー
    .blur(handler) 集合に"blur"イベントハンドラを追加
    .focus() 集合に"focus"イベントをトリガー
    .focus(handler) 集合に"focus"イベントハンドラを追加
    .focusin() 集合に"focusin"イベントをトリガー
    .focusin(handler) 集合に"focusin"イベントハンドラを追加
    .focusout() 集合に"focusout"イベントをトリガー
    .focusout(handler) 集合に"focusout"イベントハンドラを追加
    .keyup() 集合に"keyup"イベントをトリガー
    .keyup(handler) 集合に"keyup"イベントハンドラを追加
    .keydown() 集合に"keydown"イベントをトリガー
    .keydown(handler) 集合に"keydown"イベントハンドラを追加
    .keypress() 集合に"keypress"イベントをトリガー
    .keypress(handler) 集合に"keypress"イベントハンドラを追加
    .submit() 集合に"submit"イベントをトリガー
    .submit(handler) 集合に"submit"イベントハンドラを追加
    .change() 集合に"change"イベントをトリガー
    .change(handler) 集合に"change"イベントハンドラを追加
    .mousedown() 集合に"mousedown"イベントをトリガー
    .mousedown(handler) 集合に"mousedown"イベントハンドラを追加
    .mousemove() 集合に"mousemove"イベントをトリガー
    .mousemove(handler) 集合に"mousemove"イベントハンドラを追加
    .mouseup() 集合に"mouseup"イベントをトリガー
    .mouseup(handler) 集合に"mouseup"イベントハンドラを追加
    .mouseenter() 集合に"mouseenter"イベントをトリガー
    .mouseenter(handler) 集合に"mouseenter"イベントハンドラを追加
    .mouseleave() 集合に"mouseleave"イベントをトリガー
    .mouseleave(handler) 集合に"mouseleave"イベントハンドラを追加
    .mouseout() 集合に"mouseout"イベントをトリガー
    .mouseout(handler) 集合に"mouseout"イベントハンドラを追加
    .mouseover() 集合に"mouseover"イベントをトリガー
    .mouseover(handler) 集合に"mouseover"イベントハンドラを追加
    .touchstart() 集合に"touchstart"イベントをトリガー
    .touchstart(handler) 集合に"touchstart"イベントハンドラを追加
    .touchend() 集合に"touchend"イベントをトリガー
    .touchend(handler) 集合に"touchend"イベントハンドラを追加
    .touchmove() 集合に"touchmove"イベントをトリガー
    .touchmove(handler) 集合に"touchmove"イベントハンドラを追加
    .resize(handler) 集合に"resize"イベントをトリガー
    .scroll(handler) 集合に"scroll"イベントハンドラを追加

    アニメーション

    .animate(properties, parameters)- 一連のCSSプロパティのカスタムアニメーションを実行

    • properties - オブジェクト - アニメーションが付けられるCSSプロパティ
    • parameters - オブジェクト - アニメーションのパラメータ

    Dom7の集合を返します。

    $$('#animate-me').animate(
        /* アニメーションが付けられるCSSプロパティ。例えば: */
        {
            'margin-left': 100,
            'width': 200,
            'height': 300,
            'opacity': 0.5
        },
        /* アニメーションのパラメータ */
        {
            // アニメーションの長さ(ミリ秒)、任意(デフォルトでは300)
            duration: 300,
            // アニメーションイージング、任意(デフォルトでは'swing')、'linear'にも設定可能
            easing: 'swing',
            /* コールバック */
            // アニメーションが開始、任意
            begin: function (elements) {
                console.log('animation began');
            },
            // アニメーションが終了、任意
            complete: function (elements) {
                console.log('animation completed');
            },
            // アニメーションが進行中、任意
            progress: function (elements, complete, remaining, start) {
                /* ここでは、
                complete - 呼び出しの完了率(10進数)
                remaining - 呼び出し完了までの時間(ミリ秒)
                start - 呼び出しを開始した絶対時間(ミリ秒)
                */
                console.log('animation in progress');
            }
        }
    );

    チェイニングキューもサポートしています:

    $$('#animate-me')
        .animate(
            {
                'margin-left': 100,
                'width': 200,
                'height': 300,
                'opacity': 0.5
            }
        )
        .animate(
            {
                'width': 50,
                'height': 50
            }
        );