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

接着上一篇：mootools常用特性和示例（基础篇1）

 

1.表单操作

html:

<form id="myForm" action="submit.php">
    <input name="email" value="bob@bob.com" />
    <input name="zipCode" value="90210" />
</form>

js:

// 读取子input元素，生成一个查询字符串
$('myForm').toQueryString(); // returns "email=bob@bob.com&zipCode=90210".

// 返回选中的select元素
$('country-select').getSelected(); // returns whatever the user selected.

 

2.属性操作,getProperty,getProperties,setProperty,setProperties……

// 返回一个元素的属性
var imgProps = $('myImage').getProperty('src'); // returns: 'mootools.png'.

// 返回多个元素的属性
var imgProps = $('myImage').getProperties('id', 'src', 'title', 'alt');
// returns: { id: 'myImage', src: 'mootools.png', title: 'MooTools, the compact JavaScript framework', alt: '' }

// 设置元素的属性
$('myImage').setProperty('src', 'mootools.png');

// 设置多个元素的属性
$('myImage').setProperties({
    src: 'whatever.gif',
    alt: 'whatever dude'
});

// 移除元素的属性
$('myAnchor').removeProperty('onmousedown');

// 移除元素多个属性
$('myAnchor').removeProperties('id', 'href', 'title');

 

3.操作html,text,tag

// 设置元素的innerHTML
$('myElement').set('html', '<div></div><p></p>');

// 返回元素的innerHTML
myElement.get('html');

// 设置元素的内部文本
$('myElement').set('text', 'some text');
// the text of myElement is now 'some text'.

// 获取元素的内部文本
var myText = $('myElement').get('text'); // myText = 'my text'.

// 返回小写的元素名称
var myTag = $('myImage').get('tag'); // myTag = 'img'