topElement.js

包含了对元素的扩展原型方法, 和 $ 函数配合使用。

License

MIT-style license.

Credits

  • Some functions are inspired by those found in prototype.js http://prototype.conio.net/ (c) 2005 Sam Stephenson sam [at] conio [dot] net, MIT-style license
Summary
Element.js 包含了对元素的扩展原型方法, 和 $ 函数配合使用。
Element
属性
initialize 根据传入的类型创建一个新元素
Elements
工具函数
函数
$ 返回经过扩展过的元素
$$ 选择并扩展多个元素
Element
属性
set 可是用来设置事件,样式和属性
injectBefore 把元素插入到给出的元素之前
injectAfter 用法和 Element.injectBefore相同,但插入到元素之后
injectInside 用法和 Element.injectBefore相同,但插入到元素之内
injectTop 用法和 Element.injectInside,相同,但插入到元素之内的最上方
adopt 把给出的元素插入到本元素之内
remove 从DOM树中删除掉本元素
clone 复制本元素并返回本元素的副本
replaceWith 将本元素替换成给出的一个元素
appendText 为DOM元素添加文本
hasClass 检查元素的class中是否有给出的class名称
addClass 为元素添加class样式(如果该class样式在本元素上还没有)
removeClass Element.addClass相反,移除元素上指定的class
toggleClass 添加/删除 元素上的class
setStyle 为元素设置一个css样式属性
setStyles 为元素设置多个css样式属性
setOpacity 设置元素的透明度。如果opacity 为0,则也设置visibility 为“hidden” ;如果opacity > 0,则也设置visibility 为 “visible”
getStyle 获取一个给出的css属性的值
getStyles 获取一个包含了多个css属性值的对象
getPrevious 获取前一个相邻元素(不包括文本节点)
getNext 获取后一个相邻元素(不包括文本节点)
getFirst 获取第一个相邻元素(不包括文本节点)
getLast 获取最后一个相邻元素(不包括文本节点)
getParent 获取$(element.parentNode)
getChildren 获取所有 $(element.childNodes),不包括文本节点
hasChild 判断元素是否有子元素
getProperty 获取元素的一个属性的值
removeProperty 删除元素上的属性
getProperties 获取元素的多个属性的值
setProperty 设置元素的一个属性
setProperties 设置元素的多个属性
setHTML 设置元素的innerHTML
setText 设置元素的inner text
getText 获取元素的inner text
getTag 返回元素的标签名(小写形式)
empty 清空元素的所有子元素

topElement

概要
属性
initialize 根据传入的类型创建一个新元素

top属性

topinitialize

根据传入的类型创建一个新元素

参数

el 字符串; 要创建的元素的标签名。也可以传入一个元素的引用, 然后将会以它作为扩展。
props 对象; 要加入到所创建的元素上的属性。接受的键: Element.setProperties支持的所有键,以及events和styles这两个。

示例

new Element('a', {
    'styles': {
	'display': 'block',
	'border': '1px solid black'
    },
    'events': {
	'click': function(){
	    //aaa
	},
	'mousedown': function(){
	    //aaa
	}
    },
    'class': 'myClassSuperClass',
    'href': 'http://mad4milk.net'
});

topElements

  • Elements类的目的是使 Element 中所有的方法在Elements 这个元素数组上同样可用。
  • Elements也是一个数组,所以它有 Array 的所有方法。

示例

$$('myselector').each(function(el){
 //...
});

也可以进行迭代, $$(‘myselector’)返回的也是一个数组:

$$('myselector').setStyle('color', 'red');

所有 $$(‘myselector’) 中的元素也包含有 Element 定义的所有方法,在这个示例中,所欲元素的字体颜色将变为红色。

top工具函数

概要
函数
$ 返回经过扩展过的元素
$$ 选择并扩展多个元素

top函数

top$

返回经过扩展过的元素

参数

el 一个元素的引用,或则代表元素的id的字符串

示例

$('myElement');

var div = document.getElementById('myElement'); $(div) ;

返回值

  一个DOM或false(没有找到该元素)

备注

你可以调用$ 来获取元素的所有扩展原型方法。但调用多次的话也不会产生什么坏的影响, 因为会自动探测元素是否已经被扩展过。

top$$

选择并扩展多个元素。它所返回的元素集合将包含 Element 提供的所有方法。返回值的类型总是一个数组。

参数

HTML 元素集合, 元素数组, 元素id数组, 元素, css选择器。(并且没有数量限制,可以是多个前面给出的类型的参数)

备注

如果你加入了 Element.Selectors.js这个JS文件,则 $$ 方法可以接受css选择器,否则,只支持到以元素标签名称来做选择

示例

$$('a')     	//页面上所有的超链接标签元素a
$$('a', 'b') 	//页面上所有的超链接标签元素a和粗体标签b
$$('#myElement') //一组id 为 myElement 的元素. (需要包含 <Element.Selectors.js>)
$$('#myElement a.myClass') //一组id为myElement的元素下的class为"myClass"的超链接元素a
//(需要包含 <Element.Selectors.js>)

$$(myelement, myelement2, 'a', ['myid', myid2, 'myid3'], document.getElementsByTagName('div'))
//--返回的结果是一个数组,其中包含的项有--:
// myelement所引用的元素,
// myelement2所引用的元素,
// 页面上所有的超链接标签元素a,
// id为'myid' 的元素
// id为'idmyid2'的元素
// id为'myid3'的元素
// 页面上所有的div元素

返回值

array a所有匹配的DOM元素的数组(这些元素都经过了$方法的扩展)。

topElement

概要
属性
set 可是用来设置事件,样式和属性
injectBefore 把元素插入到给出的元素之前
injectAfter 用法和 Element.injectBefore相同,但插入到元素之后
injectInside 用法和 Element.injectBefore相同,但插入到元素之内
injectTop 用法和 Element.injectInside,相同,但插入到元素之内的最上方
adopt 把给出的元素插入到本元素之内
remove 从DOM树中删除掉本元素
clone 复制本元素并返回本元素的副本
replaceWith 将本元素替换成给出的一个元素
appendText 为DOM元素添加文本
hasClass 检查元素的class中是否有给出的class名称
addClass 为元素添加class样式(如果该class样式在本元素上还没有)
removeClass Element.addClass相反,移除元素上指定的class
toggleClass 添加/删除 元素上的class
setStyle 为元素设置一个css样式属性
setStyles 为元素设置多个css样式属性
setOpacity 设置元素的透明度。如果opacity 为0,则也设置visibility 为“hidden” ;如果opacity > 0,则也设置visibility 为 “visible”
getStyle 获取一个给出的css属性的值
getStyles 获取一个包含了多个css属性值的对象
getPrevious 获取前一个相邻元素(不包括文本节点)
getNext 获取后一个相邻元素(不包括文本节点)
getFirst 获取第一个相邻元素(不包括文本节点)
getLast 获取最后一个相邻元素(不包括文本节点)
getParent 获取$(element.parentNode)
getChildren 获取所有 $(element.childNodes),不包括文本节点
hasChild 判断元素是否有子元素
getProperty 获取元素的一个属性的值
removeProperty 删除元素上的属性
getProperties 获取元素的多个属性的值
setProperty 设置元素的一个属性
setProperties 设置元素的多个属性
setHTML 设置元素的innerHTML
setText 设置元素的inner text
getText 获取元素的inner text
getTag 返回元素的标签名(小写形式)
empty 清空元素的所有子元素

top属性

topset

可是用来设置事件,样式和属性

topinjectBefore

把元素插入到给出的元素之前

参数

el 目标参照的元素或元素的Id

示例

html代码: 
<div id="myElement"></div>
<div id="mySecondElement"></div> 
js代码: $('mySecondElement').injectBefore('myElement');
结果html: <div id="mySecondElement"></div> <div id="myElement"></div>

topinjectAfter

用法和 Element.injectBefore相同,但插入到元素之后

topinjectInside

用法和 Element.injectBefore相同,但插入到元素之内

topinjectTop

用法和 Element.injectInside,相同,但插入到元素之内的最上方

topadopt

把给出的元素插入到本元素之内

参数

要出入的元素引用, 或是id, 或是有选择器选取一组元素(如:$$(‘stuff’)), 或是一组id

topremove

从DOM树中删除掉本元素

示例

$('myElement').remove() 

topclone

复制本元素并返回本元素的副本

参数

contents 布尔值。当为true时元素的子节点也将被复制。默认为 true

返回值

被复制的元素

示例

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

topreplaceWith

将本元素替换成给出的一个元素

参数

el 要替换入的元素的id, 或元素引用,或是元素标签(将自动创建该标签的元素)

返回值

传入的元素

示例

$('myOldElement').replaceWith($('myNewElement'));
//$('myOldElement') 被 $('myNewElement') 替换掉。

topappendText

为DOM元素添加文本

参数

text 要添加的文本

示例

<div id="myElement">hey</div> 
$('myElement').appendText(' howdy'); //myElement的innerHTML现在变为"hey howdy"

tophasClass

检查元素的class中是否有给出的class名称

返回值

true 元素含有该css class
false i元素不含有该css class

参数

className 字符串,要检查的css class名

示例

<div id="myElement" class="testClass"></div> 
$('myElement').hasClass('testClass'); //返回true

topaddClass

为元素添加class样式(如果该class样式在本元素上还没有)

参数

className 要被加入的css class名

示例

<div id="myElement" class="testClass"></div> 
$('myElement').addClass('newClass');
//html变为: <div id="myElement"class="testClass newClass"></div>

topremoveClass

Element.addClass相反,移除元素上指定的class

toptoggleClass

添加/删除 元素上的class

参数

className 将被操作的css class

示例

<div id="myElement" class="myClass"></div> 
$('myElement').toggleClass('myClass'); //调用(1)
//变为: <div id="myElement" class=""></div>
$('myElement').toggleClass('myClass'); //调用(2)
//变为: <div id="myElement" class="myClass"></div>

topsetStyle

为元素设置一个css样式属性

参数

property 要设置的属性
value 属性值。对于那些有“px”这个单位的值,也可以直接写数字,不用加这个单位

示例

$('myElement').setStyle('width', '300px'); 	
$('myElement').setStyle('width', 300); 

topsetStyles

为元素设置多个css样式属性

参数

source 一个包含了样式属性的对象或字符串(如果是字符串形式的,那么元素的style属性值将全部被覆盖掉)

示例

$('myElement').setStyles({
   border: '1px solid #000',
   width: 300,
   height: 400
});

或者:

$('myElement').setStyles('border: 1px solid #000; width: 300px;height: 400px;');

topsetOpacity

设置元素的透明度。如果opacity 为0,则也设置visibility 为“hidden” ;如果opacity > 0,则也设置visibility 为 “visible”

参数

opacity 浮点数;范围为0 ~ 1.

示例

$('myElement').setOpacity(0.5) //使元素透明度为50%

topgetStyle

获取一个给出的css属性的值

参数

property 要获取的css属性名

示例

$('myElement').getStyle('width'); 		//返回如: "400px" 
//你也可以这样使用: $('myElement').getStyle('width').toInt(); //返回: 400

返回值

字符串形式的属性值

topgetStyles

获取一个包含了多个css属性值的对象,示例:

$('myElement').getStyles('width','height','padding'); 
//返回一个包含形如下列属性值的对象: {
width: "10px",
height: "10px",
padding: "10px 0px 10px 0px"
}

topgetPrevious

获取前一个相邻元素(不包括文本节点)

示例

$('myElement').getPrevious(); 

返回值

前一个相邻元素,或则没有找到的话返回 undefined

topgetNext

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

topgetFirst

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

topgetLast

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

topgetParent

获取$(element.parentNode)

topgetChildren

获取所有 $(element.childNodes),不包括文本节点

tophasChild

判断元素是否有子元素

topgetProperty

获取元素的一个属性的值

参数

property 属性名

示例

$('myImage').getProperty('src') // 返回如: whatever.gif

返回值

如果有属性值,则返回该值;没有,则返回空字符串。

topremoveProperty

删除元素上的属性

参数

property 属性名

topgetProperties

获取元素的多个属性的值

topsetProperty

设置元素的一个属性

参数

property 属性名
value 属性值

示例

$('myImage').setProperty('src', 'whatever.gif'); 
//myImage的src属性值现在变为whatever.gif

topsetProperties

设置元素的多个属性

参数

source 包含属性键值对的一个对象

示例

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

//结果为:
<img id="myElement" src="whatever.gif" alt="whatever dude">

topsetHTML

设置元素的innerHTML

参数

html 字符串。代表要设置给元素的innerHTML

示例

$('myElement').setHTML(newHTML) 

topsetText

设置元素的inner text

参数

text 字符串。代表要设置给元素的文本内容

示例

$('myElement').setText('some text') 

topgetText

获取元素的inner text

topgetTag

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

示例

$('myImage').getTag() // 返回: 'img'

返回值

元素的标签名(小写形式)

topempty

清空元素的所有子元素

示例

$('myDiv').empty() // 清空myDiv中的所有内容并返回自身

返回值

本元素

Documentation by Aaron Newton & Mootools Developers, generated by NaturalDocs and tidy, and GeSHi

文档中文翻译:zarknight 勘误Email:zarknight@gmail.com asp之家