包含了对元素的扩展原型方法, 和 $ 函数配合使用。
MIT-style license.
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 | 清空元素的所有子元素 |
属性 | |
initialize | 根据传入的类型创建一个新元素 |
根据传入的类型创建一个新元素
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' });
返回经过扩展过的元素
el | 一个元素的引用,或则代表元素的id的字符串 |
$('myElement');
var div = document.getElementById('myElement'); $(div) ;
一个DOM或false(没有找到该元素)
你可以调用$ 来获取元素的所有扩展原型方法。但调用多次的话也不会产生什么坏的影响, 因为会自动探测元素是否已经被扩展过。
选择并扩展多个元素。它所返回的元素集合将包含 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元素的数组(这些元素都经过了$方法的扩展)。 |
属性 | |
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 | 清空元素的所有子元素 |
可是用来设置事件,样式和属性
把元素插入到给出的元素之前
el | 目标参照的元素或元素的Id |
html代码: <div id="myElement"></div> <div id="mySecondElement"></div>
js代码: $('mySecondElement').injectBefore('myElement');
结果html: <div id="mySecondElement"></div> <div id="myElement"></div>
用法和 Element.injectBefore相同,但插入到元素之后
用法和 Element.injectBefore相同,但插入到元素之内
用法和 Element.injectInside,相同,但插入到元素之内的最上方
把给出的元素插入到本元素之内
要出入的元素引用, 或是id, 或是有选择器选取一组元素(如:$$(‘stuff’)), 或是一组id
从DOM树中删除掉本元素
$('myElement').remove()
复制本元素并返回本元素的副本
contents | 布尔值。当为true时元素的子节点也将被复制。默认为 true |
被复制的元素
var clone = $('myElement').clone().injectAfter('myElement');
将本元素替换成给出的一个元素
el | 要替换入的元素的id, 或元素引用,或是元素标签(将自动创建该标签的元素) |
传入的元素
$('myOldElement').replaceWith($('myNewElement'));
//$('myOldElement') 被 $('myNewElement') 替换掉。
为DOM元素添加文本
text | 要添加的文本 |
<div id="myElement">hey</div>
$('myElement').appendText(' howdy'); //myElement的innerHTML现在变为"hey howdy"
检查元素的class中是否有给出的class名称
true | 元素含有该css class |
false | i元素不含有该css class |
className | 字符串,要检查的css class名 |
<div id="myElement" class="testClass"></div>
$('myElement').hasClass('testClass'); //返回true
为元素添加class样式(如果该class样式在本元素上还没有)
className | 要被加入的css class名 |
<div id="myElement" class="testClass"></div>
$('myElement').addClass('newClass');
//html变为: <div id="myElement"class="testClass newClass"></div>
和 Element.addClass相反,移除元素上指定的class
添加/删除 元素上的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>
为元素设置一个css样式属性
property | 要设置的属性 |
value | 属性值。对于那些有“px”这个单位的值,也可以直接写数字,不用加这个单位 |
$('myElement').setStyle('width', '300px'); $('myElement').setStyle('width', 300);
为元素设置多个css样式属性
source | 一个包含了样式属性的对象或字符串(如果是字符串形式的,那么元素的style属性值将全部被覆盖掉) |
$('myElement').setStyles({ border: '1px solid #000', width: 300, height: 400 });
或者:
$('myElement').setStyles('border: 1px solid #000; width: 300px;height: 400px;');
设置元素的透明度。如果opacity 为0,则也设置visibility 为“hidden” ;如果opacity > 0,则也设置visibility
为 “visible”
opacity | 浮点数;范围为0 ~ 1. |
$('myElement').setOpacity(0.5) //使元素透明度为50%
获取一个给出的css属性的值
property | 要获取的css属性名 |
$('myElement').getStyle('width'); //返回如: "400px"
//你也可以这样使用: $('myElement').getStyle('width').toInt(); //返回: 400
字符串形式的属性值
获取一个包含了多个css属性值的对象,示例:
$('myElement').getStyles('width','height','padding');
//返回一个包含形如下列属性值的对象: {
width: "10px",
height: "10px",
padding: "10px 0px 10px 0px"
}
获取前一个相邻元素(不包括文本节点)
$('myElement').getPrevious();
前一个相邻元素,或则没有找到的话返回 undefined
获取后一个相邻元素(不包括文本节点)
获取第一个相邻元素(不包括文本节点)
获取最后一个相邻元素(不包括文本节点)
获取$(element.parentNode)
获取所有 $(element.childNodes),不包括文本节点
判断元素是否有子元素
获取元素的一个属性的值
property | 属性名 |
$('myImage').getProperty('src') // 返回如: whatever.gif
如果有属性值,则返回该值;没有,则返回空字符串。
删除元素上的属性
property | 属性名 |
获取元素的多个属性的值
设置元素的一个属性
property | 属性名 |
value | 属性值 |
$('myImage').setProperty('src', 'whatever.gif');
//myImage的src属性值现在变为whatever.gif
设置元素的多个属性
source | 包含属性键值对的一个对象 |
$('myElement').setProperties({ src: 'whatever.gif', alt: 'whatever dude' });
//结果为:
<img id="myElement" src="whatever.gif" alt="whatever dude">
设置元素的innerHTML
html | 字符串。代表要设置给元素的innerHTML |
$('myElement').setHTML(newHTML)
设置元素的inner text
text | 字符串。代表要设置给元素的文本内容 |
$('myElement').setText('some text')
获取元素的inner text
返回元素的标签名(小写形式)
$('myImage').getTag() // 返回: 'img'
元素的标签名(小写形式)
清空元素的所有子元素
$('myDiv').empty() // 清空myDiv中的所有内容并返回自身
本元素
Documentation by Aaron Newton & Mootools Developers, generated by NaturalDocs and tidy, and GeSHi
文档中文翻译:zarknight 勘误Email:zarknight@gmail.com asp之家