element.md.svn-base

一款开源强大的javascript控件

------------------------------------------------------

获取本元素的一个指定属性值

### 语法:

	var myProp = myElement.getProperty(property);

### 参数:

* property - (*string*) 属性名

### 返回值:

* (*string*) 属性值

### 示例:

##### HTML

	<img id="myImage" src="mootools.png" title="MooTools, the compact JavaScript framework" alt="" />

##### JavaScript

	var imgProps = $('myImage').getProperty('src'); //返回: 'mootools.png'.



Element 方法: getProperties {#Element:getProperties}
------------------------------------------------------

获取元素的多个属性值

### 语法:

	var myProps = myElement.getProperties(properties);

### 参数:

* properties - (*strings*) 任意数量的属性名

### 返回值:

* (*object*) 一个包含属性键值对的对象

### 示例:

##### HTML

	<img id="myImage" src="mootools.png" title="MooTools, the compact JavaScript framework" alt="" />

##### JavaScript

	var imgProps = $('myImage').getProperties('id', 'src', 'title', 'alt');
	/**返回: 
	 *{ 
	 *	id: 'myImage', 
	 *	src: 'mootools.png', 
	 *	title: 'MooTools, the compact JavaScript framework', 
	 *	alt: '' 
	 *}
	 */



Element 方法: setProperty {#Element:setProperty}
--------------------------------------------------

设置元素的一个属性

### 参数:

1. property - (*string*) 属性名
2. value - (*mixed*) 属性值

### 返回值:

* (*element*) - 主调元素

### 示例:

##### HTML

	<img id="myImage" />

##### JavaScript

	$('myImage').setProperty('src', 'mootools.png');

##### 结果 HTML

	<img id="myImage" src="mootools.png" />



Element 方法: setProperties {#Element:setProperties}
------------------------------------------------------

设置元素的多个属性

### 参数:

1. properties - (*object*) 属性键值对对象

### 返回值:

* (*element*) 主调元素

### 示例:

##### HTML

	<img id="myImage" />

##### JavaScript

	$('myImage').setProperties({
		src: 'whatever.gif',
		alt: 'whatever dude'
	});

##### 结果 HTML

	<img id="myImage" src="whatever.gif" alt="whatever dude" />



Element 方法: removeProperty {#Element:removeProperty}
--------------------------------------------------------

删除元素的一个属性

### 语法:

	myElement.removeProperty(property);

### 参数:

1. property - (*string*) 属性名

### 返回值:

* (*element*) 主调元素

### 示例:

##### HTML

	<a id="myAnchor" href="#" onmousedown="alert('click');"></a>

##### JavaScript

	$('myAnchor').removeProperty('onmousedown');

##### 结果 HTML

	<a id="myAnchor" href="#"></a>



Element 方法: removeProperties {#Element:removeProperties}
--------------------------------------------------------

删除元素的多个属性

### 语法:

	myElement.removeProperties(properties);

### 参数:

1. properties - (*strings*) 任意个属性名

### 返回值:

* (*element*) 主调元素

### 示例:

##### HTML

	<a id="myAnchor" href="#" title="hello world"></a>

##### JavaScript

	$('myAnchor').removeProperties('id', 'href', 'title');

##### 结果 HTML

	<a></a>
	

Element 方法: store {#Element:store}
--------------------------------------------------------

向元素的存储区中存放一个项

### 语法:

	myElement.store(key, value);

### 参数:

1. key - (*string*) 键
2. value - (*mixed*) 存储的值(任意类型)

### 返回值:

* (*element*) 主调元素

### 示例:

	$('element').store('someProperty', someValue);


Element 方法: retrieve {#Element:retrieve}
--------------------------------------------------------

从元素的存储区中获取一个值

### 语法:

	myElement.retrieve(key);

### 参数:

1. key - (*string*) 键

### 返回值:

* (*mixed*) 键对应的值

### Example:

	$('element').retrieve('someProperty');




Hash: Element.Properties {#Element-Properties}
==============================================

Element.Properties是一个Hash实例, 用于存放在调用[Element:get][], [Element:set][] 和 [Element:erase][]对属性操作时的自定义规则.

### 添加自定义的元素属性设置/获取规则:

	Element.Properties.disabled = {
		
		get: function(){
			return this.disabled;
		}
		
		set: function(value){
			this.disabled = !!value;
			this.setAttribute('disabled', !!value);
		}
		
	};

### 使用该自定义的属性设置/获取规则:

	$(element).get('disabled');			//获取"disabled"属性
	$(element).set('disabled', true);	//设置"disabled"属性为true

### 备注:

set的返回值自动为主调元素, 不用在set函数中显式的return

### 根据一个键值对对象来设置属性:

另外, 你可以在[set](#Element:set)方法上使用一个键值对对象作为参数

### 示例:

	//对已有元素
	$(divElement).set({
		html: '<p>Hello <em>People</em>!</p>', 
		style: 'background:red'
	});

	//在新创建元素时:
	new Element('input', {
		type: 'checkbox', 
		checked: true, 
		disabled: true
	});



Element 属性: html {#Element-Properties:html}
-------------------------------------------------
(Mootools内置的自定义属性操作规则)

### 设置:

设置元素的innerHTML

#### 语法:

	myElement.set('html', [htmlString[, htmlString2[, htmlString3[, ..]]]);

#### 参数:

1. 任意个数的HTML字符串

#### 返回值:

* (*element*) 主调元素

#### 示例:

##### HTML

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

##### JavaScript

	$('myElement').set('html', '<div></div>', '<p></p>');

##### 结果 HTML

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

### 获取:	
	
获取元素的innerHTML

#### 语法:

	myElement.get('html');

#### 返回值:

* (*text*) 本元素的innerHTML



Element 属性: text {#Element-Properties:text}
-------------------------------------------------
(Mootools内置的自定义属性操作规则)

### 设置:

设置元素的innerText

#### 语法:

	myElement.set('text', text);

#### 参数:

1. text - (*string*) 文本

#### 返回值:

* (*element*) 主调元素

#### 示例:

##### HTML

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

##### JavaScript

	$('myElement').set('text', 'some text'); //myElement内的文本变成'some text'

##### Resulting HTML

	<div id="myElement">some text</div>
	
### 获取:

获取元素的innerText

#### 语法:

	var myText = myElement.get('text');

#### 返回值:

* (*string*) 元素的innerText

#### 示例:

##### HTML

	<div id="myElement">my text</div>

##### JavaScript

	var myText = $('myElement').get('text'); //myText = 'my text'.



Element 属性: tag {#Element-Properties:tag}
-----------------------------------------------
(Mootools内置的自定义属性操作规则)

### 获取:

返回元素的标签名(小写)

#### 语法:

	var myTag = myElement.get('tag');

#### 返回值:

* (*string*) 小写形式的标签名

#### 示例:

##### HTML

	<img id="myImage" />

##### JavaScript

	var myTag = $('myImage').get('tag'); // myTag = 'img'.



Native: IFrame {#IFrame}
========================

本框架自定义的原生类, 可方便的创建和操作iframe


IFrame 方法: constructor {#IFrame:constructor}
------------------------------------------------

创建一个iframe元素(或包装一个已有的iframe), 并对它的window和document进行功能加强

### 语法:

	var myIFrame = new IFrame([el][, props]);

### 参数:

1. el - (*mixed*, 可选) 已有iframe元素的id, 或实际iframe元素引用. 如果未传入任何值, 则将创建一个新的iframe
2. props - (*object*, 可选) 要添加到新建IFrame上的属性. 和[Element:constructor](#Element:constructor)中提供的属性相同

### 返回值:

* (*element*) 新建的IFrame HTML元素

### 示例:

	var myIFrame = new IFrame({

		src: 'http://mootools.net/',

		styles: {
			width: 800,
			height: 600,
			border: '1px solid #ccc'
		},

		events: {

			mouseenter: function(){
				alert('Welcome aboard.');
			},

			mouseleave: function(){
				alert('Goodbye!');
			},

			load: function(){
				alert('The iframe has finished loading.');
			}

		}

	});


### 备注:

- 如果iframe中的内容来自同一个域下,则它的window和document将获得Mootools的功能加强, 可以在该iframe中使用MooTools提供功能
- 如果iframe中的内容是跨域内容, 则它的window和document将不会获得Mootools的功能
- 如果iframe是页面上一个已经存在的iframe, 并且它的name和id的值不同, 则该iframe的name将被修改成和id相同的值



Native: Elements {#Elements}
============================

Elements类允许[Element][]和[Array][]的方法工作在[Elements][]上, 可以对元素进行批量操作


Elements 方法: constructor {#Elements:constructor}
----------------------------------------------------


### 语法:

	var myElements = new Elements(elements[, options]);

### 参数:

1. elements - (*mixed*) 一个元素数组,或是HTMLCollection对象

### 返回值:

* (*array*) 一个扩展了[Element][], [Elements][], [Array][] 三个类中的方法的数组对象

### 示例:

#### 设置每个段落(p)的字体颜色为红色:

	//常规的做法
	$$('p').each(function(el){
		el.setStyle('color', 'red');
	});

	//使用Elements的做法
	$$('p').setStyle('color', 'red');


#### 从数组创建Elements对象:

	var myElements = new Elements(['myElementID', $('myElement'), 'myElementID2', document.getElementById('myElementID3')]);


### 备注:

- 在MooTools中, 每个可返回一个节点集合的函数(如: [$$][]), 其返回类型都是Elements
- 由于Elements其实也是一个数组, 所以其从[Array][]获取的方法的优先级比从[Element][]和[Elements][]上获取的要高
- Elements实例中包含的元素具有[Element][]的所有方法

### 另参考:

- [$$][], [$][], [Element][], [Elements][], [Array][]



Elements 方法: filter {#Elements:filter}
----------------------------------------------

通过给出的标签名来过滤元素集合.

如果使用了[Selectors][],则可使用CSS选择器来进行过滤.

它也可以像[Array:filter](/Native/Array/#Array:filter)一样工作, 通过使用一个过滤函数来进行过滤.

### 语法:

	var filteredElements = elements.filter(selector);

### 参数:

1. selector - (*mixed*) CSS选择器

### 返回值:

* (*array*) 主调[Elements][]实例的子集



[$]: #dollar
[$$]: #dollars

[Array]: /Native/Array
[Selectors]: /Selectors/Selectors

[Element]: #Element
[Elements]: #Elements
[Element:set]: #Element:set
[Element:get]: #Element:get
[Element:erase]: #Element:erase
[Element:setProperty]: #Element:setProperty
[Element:getProperty]: #Element:getProperty
[Element:removeProperty]: #Element:removeProperty
[Element:getElement]: #Element:getElement
[Element:getElements]: #Element:getElements
[Element.Properties]: #Element-Properties
[Element:getPrevious]: #Element:getPrevious

[Element:addEvents]: /Element/Element.Event#Element:addEvents
[Element:setStyles]: /Element/Element.Style#Element:setStyles