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'