mootools 自定义事件 还有一些技巧 前4章

定义：

Element.Events.keyenter = {

    base: 'keyup',
    condition: function(e){
        // We can basically put any logic here.
        // In this example we return true, when the pressed key is the
        // Enter-Button so the keyenter event gets fired.
        return e.key=='enter';
    }

};

调用：

$('myElement').addEvent('keyenter', function(e){ 

　　......

})

 

技巧 1：

$('myOtherDivElement').set('text', 'Wheel ' + (e.wheel < 0 ? 'down' : 'up')).highlight(); 

 

技巧 2：

$('myOtherElement').addEvents({
        'mouseenter': function(){
            this.set('tween', {
                duration: 1000,
                transition: Fx.Transitions.Bounce.easeOut
            }).tween('height', '90px');
        },
        'mouseleave': function(){
            this.set('tween', {}).tween('height', '20px');
        }
}); 

技巧 3：

not

匹配所有class不为.intro的段落：$$('p:not(.intro)')

 

技巧4：

nth-child 

$$('div:nth-child(3n+1)') ，则匹配1，4，7......

 

:only-child 

:odd

:first-child 

:last-child 

:enabled

:contains

 

技巧5：

element[attribute=attribute value]

......//<input type="text" name="query" value="" />

......//$$('input[type=text]');

 

$$('img[src$=.jpg]')//src^=big

以.jpg结尾