mootools常用特性和示例（基础篇1）

Posted 2021-02-04 basic0001

网上关于mootools这个库的信息很少。

公司一些老的项目用到了mootools库，因为要维护，所以接触到了mootools。

mootools（文档）官网：http://www.chinamootools.com/

举一些常用的特性和方法及其示例

1.dom ready

就像使用jquery需要一个ready方法一样，mootools也有一个dom加载完毕后的方法，这是写代码的开始吧。

window.addEvent(‘domready‘, function() {
    alert(‘The DOM is ready!‘);
});

 

2.事件对象侦听

（1）addEvent 对元素设置一个侦听器

示例：

$(‘myElement‘).addEvent(‘click‘, function(){
    alert(‘clicked!‘);
});

（2）addEvents 增加多个事件侦听

示例：

$(‘myElement‘).addEvents({
    mouseover: function(){
        alert(‘mouseover‘);
    },
    click: function(){
        alert(‘click‘);
    }
});

 

3.获取元素

（1）document.id（别名：$）

var myElement = document.id(‘myElement‘);

var myElement = $(‘myElement‘);

（2）$$

$$(‘a‘); // 标签名
$$(element1, element2, element3); // 多个元素实例
$$([element1, element2, element3]); // 一个元素集合
$$(document.getElementsByTagName(‘a‘)); // 也是一个元素集合
$$(‘#myElement‘); // css选择器
$$(‘#myElement a.myClass‘); // 同上
$$(‘a, b‘); // 同上

返回：一个类数组的元素集合

 

4.元素对象 Element

（1）new Element 创建一个元素，示例：

// 用一个对象创建一个新的元素
var myAnchor = new Element(‘a‘, {
    href: ‘http://mootools.net‘,
    ‘class‘: ‘myClass‘,
    html: ‘Click me!‘,
    styles: {
        display: ‘block‘,
        border: ‘1px solid black‘
    },
    events: {
        click: function(){
            alert(‘clicked‘);
        },
        mouseover: function(){
            alert(‘mouseovered‘);
        }
    }
});
 
// 使用选择的元素
var myNewElement = new Element(‘a.myClass‘);

 

（2）getElement 取得第一个子元素

var firstDiv = $(document.body).getElement(‘div‘);

（3）getElements 取得元素数组

var allAnchors = $(document.body).getElements(‘a‘);

 

（4）set 设置元素属性

两个参数的写法，示例：

$(‘myElement‘).set(‘text‘, ‘text goes here‘);
$(‘myElement‘).set(‘class‘, ‘active‘);
// the ‘styles‘ property passes the object to Element:setStyles.
var body = $(document.body).set(‘styles‘, {
    font: ‘12px Arial‘,
    color: ‘blue‘
});

一个参数的写法，示例：

var myElement = $(‘myElement‘).set({
    // the ‘styles‘ property passes the object to Element:setStyles.
    styles: {
        font: ‘12px Arial‘,
        color: ‘blue‘,
        border: ‘1px solid #f00‘
    },
    // the ‘events‘ property passes the object to Element:addEvents.
    events: {
        click: function(){ alert(‘click‘); },
        mouseover: function(){ this.addClass(‘over‘); }
    },
    //Any other property uses Element:setProperty.
    id: ‘documentBody‘
});

（5）get 取得元素属性

var tag = $(‘myDiv‘).get(‘tag‘); // 返回 "div".
var id = $(‘myDiv‘).get(‘id‘); // 返回 "myDiv".
var value = $(‘myInput‘).get(‘value‘); // 返回myInput的值

（6）erase 移除一个元素的属性

$(‘myDiv‘).erase(‘id‘); // 从myDiv上移除了id
$(‘myDiv‘).erase(‘class‘); // myDiv元素上不再有class属性

（7）contains 检查是否包含某元素

html:

<div id="Darth_Vader">
    <div id="Luke"></div>
</div>

js:

if ($(‘Darth_Vader‘).contains($(‘Luke‘))) alert(‘Luke, I am your father.‘); //tan tan tannn...

（8）inject 在某个元素中注入或插入另一个元素

示例：

// 创建三个元素
var myFirstElement  = new Element(‘div‘, {id: ‘myFirstElement‘});
var mySecondElement = new Element(‘div‘, {id: ‘mySecondElement‘});
var myThirdElement  = new Element(‘div‘, {id: ‘myThirdElement‘});

// 生成的html
<div id="myFirstElement"></div>
<div id="mySecondElement"></div>
<div id="myThirdElement"></div>


// 注入到底部：
myFirstElement.inject(mySecondElement);

// 生成的html
<div id="mySecondElement">
    <div id="myFirstElement"></div>
</div>


// 注入到顶端
myThirdElement.inject(mySecondElement, ‘top‘);

// 生成的html
<div id="mySecondElement">
    <div id="myThirdElement"></div>
    <div id="myFirstElement"></div>
</div>


// 注入前端
myFirstElement.inject(mySecondElement, ‘before‘);

// 生成的html
<div id="myFirstElement"></div>
    <div id="mySecondElement"></div>


// 注入后端
myFirstElement.inject(mySecondElement, ‘after‘);

// 生成的html
<div id="mySecondElement"></div>
<div id="myFirstElement"></div>

 

（9）adopt 在一个元素内部插入一新元素

js代码：

var myFirstElement  = new Element(‘div#first‘);
var mySecondElement = new Element(‘p#second‘);
var myThirdElement  = new Element(‘ul#third‘);
var myFourthElement = new Element(‘a#fourth‘);
 
var myParentElement = new Element(‘div#parent‘);
 
myFirstElement.adopt(mySecondElement);
mySecondElement.adopt(myThirdElement, myFourthElement);
myParentElement.adopt([myFirstElement, new Element(‘span#another‘)]);

生成的html:

<div id="parent">
    <div id="first">
        <p id="second">
            <ul id="third"></ul>
            <a id="fourth"></a>
        </p>
    </div>
    <span id="another"></span>
</div>

 

（10）dispose 从DOM中移除元素

示例：

html:

<div id="myElement"></div>
<div id="mySecondElement"></div>

js:

$(‘myElement‘).dispose();

生成的html:

<div id="mySecondElement"></div>

 

（11）clone 克隆一个元素，并返回克隆体

html:

<div id="myElement">ciao</div>

js:

// 克隆myElement元素，并添加到它的后面
var clone = $(‘myElement‘).clone().inject(‘myElement‘,‘after‘);

生成的html:

<div id="myElement">ciao</div>
<div>ciao</div>

（12）其他

// hasClass 测试元素是否有某class
$(‘myElement‘).hasClass(‘testClass‘); // returns true

// 为元素增加一个类
$(‘myElement‘).addClass(‘newClass‘);

// 删除元素的一个类
$(‘myElement‘).removeClass(‘newClass‘);

// 切换类，如果已存在则删除，否则添加
$(‘myElement‘).toggleClass(‘myClass‘);

// 返回前一个兄弟元素节点，不包含纯文本节点
var previousSibling = myElement.getPrevious([match]);

// getAllPrevious 返回元素之前所有匹配的元素

// 返回后一个兄弟元素节点，不包含纯文本节点
var nextSibling = myElement.getNext([match]);

// 返回父节点
var parent = myElement.getParent([match]);

// 返回元素的兄弟节点
var siblings = myElement.getSiblings([match]);

// 返回所有元素的子元素
var children = myElement.getChildren([match]);

// 清空一个元素的所有子元素
$(‘myElement‘).empty();

 

太长了……

分篇吧

下一篇：mootools常用特性和示例（基础篇2）