[JS]DOMエレメントを操作するシンプルで超軽量のスクリプト -Chibi

Post on:2012年8月3日

jQueryなどの他のスクリプトに依存せず、DOMエレメントを操作するシンプルで超軽量（2KB gzipped）のスクリプトを紹介します。

サイトのキャプチャ

Chibi -GitHub

Chibiの対応ブラウザ

IE6をはじめ、ほとんど全てのデスクトップ・スマートフォン用のブラウザをサポートしています。

  • Android Browser 2.1+
  • Blackberry Browser 6+
  • Chrome
  • Chrome Android
  • Firefox 3.5+
  • Firefox Mobile
  • Internet Explorer 6+
  • Internet Explorer Mobile 9+
  • Opera 10+
  • Opera Mini
  • Opera Mobile 10+
  • Safari 3.2+
  • Safari Mobile 3.2+
  • Symbian^3 Browser or higher

Chibiの使い方

Chibiの基本書式はjQueryと似ており、「$(selector).method()」とシンプルなフォーマットです。
以下、メソッドごとにChibiの使い方を紹介します。

$().ready(handler)

DOMエレメントへのアクセスを準備します。

$().ready(function(){
    // Do awesome
});

または、

function foo() {
    // Do awesome
}

$().ready(foo);

$().loaded(handler)

ページがロードされた際にスクリプトを実行します。

function foo() {
    // Do awesome
}

$().loaded(foo);

$(selector).find(filter)

DOMエレメントを探します。

<p>Foo</p>
<p>Bar</p>
<p>Foo</p>
<p>Bar</p>
<script>
    $('p').find(); // 全てのp要素を返します
    $('p').find('first'); // 最初のp要素を返します
    $('p').find('last'); // 最後のp要素を返します
    $('p').find('odd'); // 奇数番目のp要素を返します
    $('p').find('even'); // 偶数番目のp要素を返します
    $('.foo').find(); // 存在しないので、returns false; です
</script>

$(selector).loop(function)

DOMエレメント上のfunctionを実行します。

<p>Foo</p>
<p>Bar</p>
<script>
    function foo(elm) {
        elm.style.color = "red";
    }

    $('p').loop(foo); // 全てのp要素をredにします
</script>

$(selector).hide()

DOMエレメントを非表示にします。

<p>Foo</p>
<p>Bar</p>
<script>
    $('p').hide(); // 全てのp要素を非表示にします
</script>

$(selector).show()

DOMエレメントを表示します。

<p>Foo</p>
<p>Bar</p>
<script>
    $('p').show(); // 全てのp要素を表示します
</script>

$(selector).toggle()

表示・非表示を切り替えます。

<p>Foo</p>
<p style="display:none">Bar</p>
<script>
    $('p').toggle(); // 一番目は非表示、二番目は表示します。
</script>

$(selector).remove()

DOMツリーから取り除きます。

<p>Foo</p>
<p>Bar</p>
<script>
    $('p').remove(); // 全てのp要素をDOMツリーから取り除きます
</script>

$(selector).css(property,value)

CSSのプロパティの値を取得、またはセットします。

<style>
.bold {font-weight:900}
</style>

<p>Foo</p>
<p class="bold">Bar</p>
<script>
    $('p').css('font-weight'); // font-weightの値を取得します
    $('p').css('color','red'); // colorをredにセットします
</script>

$(selector).cls(class,replace/add/remove/toggle/has)

classの値を操作します。

<style>
.bold {font-weight:900}
.red {color:red}
.mono {font-family:monospace}
</style>

<p>Foo</p>
<p class="mono">Bar</p>
<script>
    $('p').cls(); // p要素のclassを取得します
    $('p').cls('mono','has'); // 配列を使ってclassの値を調べます
    $('p').cls('mono','toggle'); // classの値を切り替えます
    $('p').cls('red bold'); // classを置き換えます
    $('p').cls('red bold','replace'); // 同じくclassを置き換えます
    $('p').cls('mono','add'); // classに値を加えます
    $('p').cls('bold','remove'); // classから値を取り除きます
</script>

$(selector).html(html,before/after)

DOMエレメントの前後にHTMLを加えます。

<p>Foo</p>
<p>Bar</p>
<script>
    $('p').html(); // p要素のinnerHTMLを返します
    $('p').html('<i>Foobar</i>'); // p要素にinnerHTMLを加えます
    $('p').html('<p>Foobar</p>','after'); // 
    $('p').html('<p>Foobar</p>','before'); // p要素の前にinnerHTMLを加えます
</script>

$(selector).attr(property,value)

プロパティの値を取得、セットします。

<p><a href="http://en.wikipedia.org/wiki/Foobar">Foobar</a></p>
<script>
    $('a').attr('href'); // hrefの値を返します
    $('a').attr('target','_blank'); // プロパティをセットします
</script>

$(selector).val(value)

フォームエレメントの値を取得、セットします。

<form>
<input type="text" value="Foobar" name="text">
</form>
<script>
    $('input').val(); // input要素の値を返します
    $('input').val('Foo Bar'); // input要素の値をセットします

$(selector).on(event,listener,clear)

イベントを加えたり、取り除きます。

<p>Foo</p>
<p>Bar</p>
<script>
    function foo() {
        // Do awesome
    }

    $('p').on('click',foo); // p要素にイベントを加えます
    $('p').on('click',foo,true); // p要素にイベントを取り除きます
</script>

sponsors

top of page

©2024 coliss