标签：fun top 事件对象 cond before href 兄弟节点 next 对象
网上关于mootools这个库的信息很少。
公司一些老的项目用到了mootools库，因为要维护，所以接触到了mootools。
mootools（文档）官网：http://www.chinamootools.com/
举一些常用的特性和方法及其示例
就像使用jquery需要一个ready方法一样，mootools也有一个dom加载完毕后的方法，这是写代码的开始吧。
window.addEvent(‘domready‘, function() { alert(‘The DOM is ready!‘); });
（1）addEvent 对元素设置一个侦听器
示例：
$(‘myElement‘).addEvent(‘click‘, function(){ alert(‘clicked!‘); });
（2）addEvents 增加多个事件侦听
示例：
$(‘myElement‘).addEvents({ mouseover: function(){ alert(‘mouseover‘); }, click: function(){ alert(‘click‘); } });
（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‘); // 同上
返回：一个类数组的元素集合
（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();
太长了……
分篇吧
标签：fun top 事件对象 cond before href 兄弟节点 next 对象
原文地址：https://www.cnblogs.com/basic0001/p/10283663.html
