DOMmy.js

DOMを簡単にそうさできる、とても軽いスクリプトです。これは、ページ上のさまざまなようそをそうさしたり、ようそにCSSアニメーションをてきようしたり、CSSのぞくせいやプロパティのそうさ、ようそのストレージそうさなどが可能です。しかも、他のスクリプトにいぞんしないで、たんどくでどうさします。

DOMmy.jsのとくちょう

DOMmy.jsは、じっこうがちょうこうそくで、とても簡単にDOMをそうさできます。IE9をふくむクロスブラウザに対応しています。ライセンスは、MITライセンスです。

とても軽いスクリプトです。
他のスクリプトやライブラリにいぞんしません。
ページ上のすべてのDOMを簡単にそうさできます。
ページ上にきょうりょくなCSSアニメーションをさくせいできます。
たんどくまたはふくすのイベント、ストレージ、CSSのぞくせいやプロパティをくわえることができます。
こうぞうてきにきのうし、DOM Readyをサポートします。

サポートブラウザ

しゅようブラウザをサポートしています。

Chrome
Firefox
Opera
Safari
Internet Explorer

※IE8以下はみサポートです。

DOMmy.jsの使い方

外部ファイル

当スクリプトを外部ファイルとして書いて、スクリプトをしょきかします。


<script src="http://www.riccardodegni.com/projects/dommy/dommy-min.js"></script>
<script>
    // do some DOMmy stuff
    $$$(function() {
        // ...
    });
</script>

// do some DOMmy stuff

$$$(function() {

// ...

});

</script>

DOMのそうさ

DOMようその選択。


// select an element by ID
$('myel');
 
// select a collection of elements by css selector
$$('#myid div.myclass p');

// select an element by ID

$('myel');

// select a collection of elements by css selector

$$('#myid div.myclass p');

ようそにイベントをついか。


// add an event to an element
$('myel').on('click', function() {
    log('Hey!');
});
 
// add a events to an element
$$('#myel p').on(
    'click': function() {
        log('Hey!');
    },
    
    'mouseout': function() {
        log('Hey!');
    }
});

// add an event to an element

$('myel').on('click', function() {

log('Hey!');

});

// add a events to an element

$$('#myel p').on(

'click': function() {

log('Hey!');

'mouseout': function() {

log('Hey!');

}

});

ようそにプロパティをついか。


// set html
$('myel').html('new content');

// get an attribute
var title = $('myel').attr('title');

// set an attribute
$('myel').attr('title', 'my title');

// set attributes
$('myel').attr({'title': 'my title', 'alt': 'alternate text'});

// set html

$('myel').html('new content');

// get an attribute

var title = $('myel').attr('title');

// set an attribute

$('myel').attr('title', 'my title');

// set attributes

$('myel').attr({'title': 'my title', 'alt': 'alternate text'});

ようそにアニメーションをついか。


// simple animation
$('myel').fx({'width': '300px'}, 2000, callBack);

// queue animations
$$('.myel').fx({'width': '300px'}, 2000, callBack, true);
           .fx({'width': '300px'}, 2000, callBack, true);

// simple animation