1)、document.Id;页面元素Id的选择
var myElement = document.id('myElement'); // 比较简单,选择页面中某Id名为myElement的元素
var div = document.getElementById('myElement'); //先获取某个元素的Id 赋给变量div ,然后用document.id(div)直接获取变量div中保存的Id值,通过引用来获取
div = document.id(div);
2)、$美金选择符这个跟jQuery挺像的,jQuery把这个选择符的功能用到了极致,Mootools里的基本用法也差不多。
var myElement = $('myElement'); // 用$选择符选择页面中Id名为myElement的元素
var myElement2 = document.id('myElement'); // 用document.id 选择页面中Id名为myElement的元素
myElement == myElement2; // returns true // 两种选择方式是通用的
由于很多Javascript框架都会用到$选择符,因此,Mootools不建议在页面中将这些框架混用,可能会导致不可预知的错误。比如“Mootools”和“jLib”混用的情况,会导致其中一种框架的$选择符罢工。
3)、$$双美金选择符
可以选择多个元素,这点不像jQuery,$选择符一个、多个都通吃,Mootools相对比较严谨。
$$('a'); // 选择页面中所有的链接元素
$$(element1, element2, element3); // 可以同时选择多个元素的Id
$$([element1, element2, element3]); // 如果元素的Id保存在数组中,也可以选择多个元素
$$(document.getElementsByTagName('a')); // 选择页面中所有的链接元素
$$('#myElement'); // 选择Id为myElement的元素
$$('#myElement a.myClass'); // 选择Id为myElement的元素中链接的样式名为myClass的元素
$$('a, b'); // 选择页面中所有的粗体字的链接
4)、构造一个页面元素
var myAnchor = new Element('a', { //构造一个链接
href: 'http://mootools.net', //href:'链接地址'
'class': 'myClass', //'class':'样式表名',
html: 'Click me!', //html:'链接文字',
styles: { //style:{样式},
display: 'block',
border: '1px solid black'
},
events: { //events:{ 链接事件,这里定义了click和mouseover 两个事件,多个事件用","隔开 }
click: function(){
alert('clicked');
},
mouseover: function(){
alert('mouseovered');
}
}
});
测试这段代码,可以使用doomready方法,在页面加载时自动生成这个链接。当然,也可以通过点击触发。
window.addEvent('domready', function() {
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');
}
}
});
5)、getElement 获取第一个指定标签名的元素
var firstDiv = $(document.body).getElement('div'); // 获取第一个div元素
6)、getElements 获取页面中所有制定标签名的元素
var allAnchors = $(document.body).getElements('a'); // 获取页面中所有的链接元素
7)、getElementById 已知某页面元素的id,可以获取该元素中包含的元素
如果页面中有div元素,并包含a元素
<div id='myParent'><a id="myChild"></a></div>
可以通过以下的例子获取div中包含的a元素
var myChild = $('myParent').getElementById('myChild');
8)、set 设置某元素属性
如果页面中有链接元素<a id='myElement'></a>
可以通过下面的例子设置该元素的属性
$('myElement').set('text', 'text goes here');//设置链接元素的文字
$('myElement').set('class', 'active');//设置链接元素的类型,这里设置成锚点
var body = $(document.body).set('styles', { //设置页面body的字体
font: '12px Arial',
color: 'blue'
});
也可以通过对象的方式来设置
var myElement = $('myElement').set({
// 设置myElement的style属性
styles: {
font: '12px Arial',
color: 'blue',
border: '1px solid #f00'
},
// 为元素添加事件
events: {
click: function(){ alert('click'); },
mouseover: function(){ this.addClass('over'); }
},
//改变元素的id名
id: 'documentBody'
});
9)、get获取某元素的属性
如果页面中有链接元素<div id='myDiv'></div>
通过下面的例子可以获取的这个元素的标签名
var tag = $('myDiv').get('tag'); 变量tag的值为div
var id = $('myDiv').get('id'); // 变量id的值为myDiv
var value = $('myInput').get('value'); // 获得某输入框的值