element.md.svn-base

mooltools源码很不错的源码

### 另参考:

[Element:grab](#Element:grab), [Element:inject](#Element:inject), [Element:wraps](#Element:wraps)



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

将本元素包裹在指定的元素的外层(成为该元素的父元素).

和[Element:grab](#Element:grab)类似, 与之不同的是: 本元素的位置将移动到目标子元素的位置.

和[Element:grab](#Element:grab)类似, 但一次可操作多个元素.

### 语法:
	
	myParent.wrap(el[, where]);
	
### 参数:

1. el - (*mixed*) 目标元素的id,引用,或一个元素数组
2. where - (*string*, 可选: 默认为'bottom') 子元素在内部的位置. 可为: 'top' 或 'bottom'

### 返回值:

* (*element*) 主调元素



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

向元素中添加一个文本节点

### 语法:

	myElement.appendText(text);

### 参数:

1. text  - (*string*) 文本内容
1. where - (*string*, 可选: 默认为'bottom') 插入的位置. 可为: 'top' 或 'bottom'

### 返回值:

* (*element*) 主调元素

### 示例:

##### HTML

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

##### JavaScript

	$('myElement').appendText(' Howdy.');

##### 结果 HTML

	<div id="myElement">Hey. Howdy.</div>



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

将元素从DOM中删除

### 语法:

	var removedElement = myElement.dispose();

### 返回值:

* (*element*) 主调元素(用于将元素插回DOM时使用)

### 示例:

##### HTML

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

##### JavaScript

	$('myElement').dispose();

##### Resulting HTML

	<div id="mySecondElement"></div>

### 另参考:

- [MDC Element:removeChild](http://developer.mozilla.org/en/docs/DOM:element.removeChild)



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

复制并返回元素的副本

### 语法:

	var copy = myElement.clone([contents, keepid]);

### 参数:

1. contents - (*boolean*, 可选: 默认为true) 如果为true, 则复制的时候连带子元素
2. keepid - (*boolean*, 可选: 默认为false) 如果true,则复制的副本元素(包括其子元素)将保留原有的id


### 返回值:

* (*element*) 副本元素

### 示例:

##### HTML

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

##### JavaScript

	var clone = $('myElement').clone().injectAfter('myElement');

##### 结果 HTML

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

### 备注:

- 返回的元素不会附带原本元素的事件监听. 如果要复制事件,则使用[Element:cloneEvents](/Element/Element.Event/#Element:cloneEvents).
- 复制的元素的id值将被移除(除非指定了keepid参数为true)

### 另参考:

- [Element:cloneEvents](/Element/Element.Events#Element:cloneEvents).



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

替换元素

### 语法:

	var element = myElement.replaces(el);

### 参数:

1. el - (*mixed*) 用于替换的元素的id或引用

### 返回值:

* (*element*) 主调元素

### 示例:

	$('myNewElement').replaces($('myOldElement')); 	//$('myOldElement')将被$('myNewElement')替换

### 另参考:

- [MDC Element:replaceChild](http://developer.mozilla.org/en/docs/DOM:element.replaceChild)



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

检测元素上是否包含指定的样式名

### 语法:

	var result = myElement.hasClass(className);

### 参数:

1. className - (*string*) 样式名

### 返回值:

* (*boolean*) 如果包含指定样式名,返回true; 否则返回false

### 示例:

##### HTML

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

##### JavaScript

	$('myElement').hasClass('testClass'); //返回 true



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

如果指定样式名在元素上不存在,则添加该样式名

### 语法:

	myElement.addClass(className);

### 参数:

1. className - (*string*) 样式名

### 返回值:

* (*element*) 主调元素

### 示例:

##### HTML

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

##### JavaScript

	$('myElement').addClass('newClass');

##### 结果 HTML

	<div id="myElement" class="testClass newClass"></div>



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

将指定样式名从元素上删除


### 语法:

	myElement.removeClass(className);

### 参数:

1. className - (*string*) 样式名

### 返回值:

* (*element*) 主调函数

### 示例:

##### HTML

	<div id="myElement" class="testClass newClass"></div>

##### JavaScript

	$('myElement').removeClass('newClass');

##### 结果 HTML

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



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

添加/删除元素上指定的样式名

### 语法:

	myElement.toggleClass(className);

### 参数:

1. className - (*string*) 样式名

### 返回值:

* (*element*) 主调元素

### 示例:

##### HTML

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

##### JavaScript

	$('myElement').toggleClass('myClass');

##### 结果 HTML

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

##### JavaScript

	$('myElement').toggleClass('myClass');

##### 结果 HTML

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



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

返回本元素的前一个兄弟元素(不包括文本节点).

### 语法:

	var previousSibling = myElement.getPrevious([match]);

### 参数:

1. match - (*string*, 可选): 兄弟元素的标签名. 如果使用了[Selectors][], 则可以使用CSS选择器

### 返回值:

* (*mixed*) 如果找到符合的兄弟元素,则返回该元素; 否则返回null



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

返回本元素之前的所有兄弟元素



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

返回本元素后的一个兄弟元素(不包括文本节点)


### 语法:

	var nextSibling = myElement.getNext([match]);

### 参数:

1. match - (*string*, 可选): 兄弟元素的标签名. 如果使用了[Selectors][], 则可以使用CSS选择器

### 返回值:

* (*mixed*) 如果找到符合的兄弟元素,则返回该元素;否则返回null


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

返回本元素之后的所有兄弟元素



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

获取第一个子元素(不包括文本节点)


### 语法:

	var firstElement = myElement.getFirst([match]);

### 参数:

1. match - (*string*, 可选): 子元素的标签名. 如果使用了[Selectors][], 则可以使用CSS选择器

### 返回值:

* (*mixed*) 如果找到符合的子元素,则返回该元素; 否则返回null



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

获取最后一个子元素(不包括文本节点)

### 语法:

	var lastElement = myElement.getLast([match]);

### 参数:

1. match - (*string*, 可选): 子元素的标签名. 如果使用了[Selectors][], 则可以使用CSS选择器

### 返回值:

* (*mixed*) 如果找到符合的子元素,则返回该元素; 否则返回null



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

获取直接父元素


### 语法:

	var parent = myElement.getParent([match]);

### 参数:

1. match - (*string*, 可选): 父元素的标签名. 如果使用了[Selectors][], 则可以使用CSS选择器

### 返回值:

* (*mixed*) 如果找到符合的父元素,则返回该元素; 否则返回null



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

获取本元素的所有符合条件的父级元素



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

返回所有子元素(不包括文本节点).

返回结果的类型为[Elements][]

### 语法:

	var children = myElement.getChildren([match]);

### 参数:

1. match - (*string*, 可选): 子元素的标签名. 如果使用了[Selectors][], 则可以使用CSS选择器

### 返回值:

* (*array*) 包含所有子元素(不包括文本节点)的数组([Elements](#Elements))



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

检测是否含有指定的子元素

### 语法:

	var result = myElement.hasChild(el);

### 参数:

1. el - (*mixed*) 元素的id或引用

### 返回值:

* (*boolean*) 如果找到指定的子元素,则返回true; 否则返回false

### 示例:

##### HTML

	<div id="Darth_Vader">
		<div id="Luke"></div>
	</div>

##### JavaScript

	if ($('Darth_Vader').hasChild('Luke')) {
		alert('Luke, I am your father.');
	}


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

删除所有子元素

### 语法:

	myElement.empty();

### 返回值:

* (*element*) 主调元素

### 示例:

##### HTML

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

##### JavaScript

	$('myElement').empty();

##### 结果 HTML

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



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

删除元素自身及其所有子元素(并进行内存垃圾收集)

### 语法:

	myElement.destroy();

### 返回值:

* (*null*)



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

读取子元素中的数据输入元素(如input, select等)的值, 并生成查询字符串

### 语法:

	var query = myElement.toQueryString();

### 返回值:

* (*string*) 查询字符串

### 示例:

##### HTML

	<form id="myForm" action="submit.php">
		<input name="email" value="[e-mail]" />
		<input name="zipCode" value="90210" />
	</form>

##### JavaScript

	$('myForm').toQueryString(); //返回 "email=[e-mail]&zipCode=90210".
	

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

返回下拉列表框元素中的选中项

### 语法:

	var selected = mySelect.getSelected();

### 返回值:

* (*array*) 包含选中元素的数组

### 示例:

##### HTML

	<select id="country-select" name="country">
		<option value="US">United States</option
		<option value ="IT">Italy</option>
	</select>

##### JavaScript

	$('country-select').getSelected();
	
### 备注:

本方法返回的总是一个数组,不管选中多少项


Element 方法: getProperty {#Element:getProperty}