MooTools DOM 之 Manipulating elements(操纵元素)
根据在《MooTools DOM 基本分类》 日志中的分类方法,在上一节中我们介绍了《MooTools DOM 之 Accessing elements(访问元素)》。既然,我们已经学会了如何获得元素,那我们对元素进行操作就没有问题了。操作元素,包括添加或删除一个element 的 css class 和
获取或设置元素的属性,以及如何获取表单相关元素的值
等等的操作。由于我们一直用原始的JavaScript来操作元素,它给我们带来了繁琐和复杂的操作,还有一些不兼容的问题一直困扰着我们。
然而,JavaScript
Libraries 的出现,为我们提供了丰富的,快捷的,实用的wrapper functions(包装函数),
让我们更加专注于元素的行为处理。
正如我们下面所介绍的:
属性操作
对于目前的规范是使用setAttribute方法来设置属性,使用getAttribute方法来获取属性。根据W3C标准,假如我们不论实际情况如何,都用它们来进行属性操作的话,我会遇到一些问题,因为它没有很好的落实在所有的浏览器 中。但是MooTools早已注意到这一点,增加了更多的选项和功能,其中最为强大是set() ,get()和erase()它们是’动态参数’方法。其它的setProperty(),setProperties(),getProperty(),getProperties(),removeProperty(),removeProperties()它们是’静态参数’方法,顾名思义,你可以看出’静态参数’方法,就只是针对HTML元素的常用属性进行操作。
1.获取属性和设置属性
Element.set
用于设置元素的属性值.
这是一个’动态参数’方法. 传入的参数可以是任意在Element.Properties中定义过类型.
当和事件联合使用时比较有用,通过这个方法你可以在页面加载之后改变一些属性值。
语法:
Element.set(‘property’, value);
Example:
使用’属性-值’:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | $('myElement').set('html', '<div>new html!我是一个类似于JavaScript中innerHTML属性的操作.</div>'); $('myElement').set('text', '文本内容在这里,我是一个类似于JavaScript中innerText属性的操作.'); $('myElement').set('class', 'active'); $('myElement').setStyle('border', '1px solid blue'); $('myElement').set('styles', {'border': '1px solid blue'}); //'styles'属性设置的对象值会进一步传递给Element:setStyles方法 var body = $(document.body).set('styles', { 'font': '12px Arial', 'color': 'blue' }); $('mylink').set('href',newHref); $('myImg').set('src', newUrl); $('myImg').set('alt', 'The cake is a lie'); |
使用属性键值对对象:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | $('myImg').set({ 'src': '/foo.jpg', 'alt': 'this is foo', //Class is a reserved word in JS, //so we must use quotes 'class': 'fooClass', //In addition to standard attributes, you can also //use set for some special attributes defined by //MooTools 'events': { click: function(){ alert('click!');} }, 'styles': { border: '1px solid blue', marginTop: '10px' }, etc... }); //另一个例子 var myElement = $('myElement').set({ //'styles'属性设置的对象值会进一步传递给Element:setStyles方法 'styles': { 'font': '12px Arial', 'color': 'blue', 'border': '1px solid #f00' }, //'events'属性设置的对象之会进一步传递给Element:addEvents方法 'events': { 'click': function(){ alert('click'); }, 'mouseover': function(){ this.addClass('over') } }, //其他设置的属性值会传递给Element:setProperty方法 'id': 'documentBody' }); |
备注:你可以通过set()设置 events, styles ,properties(src, href, value,title,alt,class,id,for 等等)和自定义属性,通过get()获取元素的属性(property) 。
Element.get
用于获取元素的属性值.
这是一个’动态参数’方法.
传入的参数可以是任意在Element.Properties中定义过类型.
它一次只能获得一个属性值。
语法:
myElement.get(property);
Example:
获取自定义的属性:
1 2 3 | var tag = $('myDiv').get('tag'); //返回 "div". var ih=$('myElement').get('html');//'myElement'元素的HTML代码 var it=$('myElement').get('text');//'myElement'元素的文本内容 |
获取原生属性:
1 2 3 4 5 6 | //返回 "myDiv". var id = $('myDiv').get('id'); //返回 myInput元素的value属性值(myInput为input元素,具有原生value属性). var value = $('myInput').get('value'); //返回图片的 ‘http://.... ’ $('myImg').get('src'); |
注意:
通过get()获取元素的属性(property) ,元素的属性是组成一个HTML元素的各种不同部分,例如id,name,value,href,src,class(如果有多个CSS类名,则将返回全部CSS类名,text等等,而不只是html标签名。
Element.setProperty
设置元素的一个属性。
语法:
var myProp = myElement.setProperty(property);
Example:
1 2 | //设置ID 为‘myImage’的元素src属性 $('myImage').setProperty('src', 'mootools.png'); |
Element.getProperty
获取本元素的一个指定属性值。
语法:
var myProp = myElement.getProperty(property);
Example:
1 2 | var imgProps = $('myImage').getProperty('src'); //返回ID 为‘myImage’的元素src属性值: 'mootools.png'. |
Element.setPropertys
一次可以为同一个元素设置多个属性。
将一个 “名:值” 形式的对象设置为匹配元素的属性。
语法:
var myProps = myElement.setProperties({property :value,…});
Example:
HTML
1 | <img id="myImage" /> |
JavaScript
1 2 3 4 5 | //设置ID 为‘myImage’的元素的多个属性 $('myImage').setProperties({ 'src': 'whatever.gif', 'alt': 'whatever dude' }); |
Element.getPropertys
获取元素的多个属性值。
语法:
var myProps = myElement.getProperties(properties);
Example:
HTML
<img id="myImage" src="mootools.png" title="MooTools, the compact JavaScript framework" alt="" /> |
JavaScript
1 2 3 4 5 6 7 8 9 | var imgProps = $('myImage').getProperties('id', 'src', 'title', 'alt'); /**返回: *{ * 'id': 'myImage', * 'src': 'mootools.png', * 'title': 'MooTools, the compact JavaScript framework', * 'alt': '' *} */ |
2.删除属性
在某些情况下,我们需要删除文档中元素的特定属性,它们是set(),setProperty()setProperties()的相反操作。我们可以使用 ‘动态参数’方法 erase() ,如果要删除的属性在Element.Properties中未定义, 则使用Element:removeProperty()和Element:removePropertys()来删除一个或多个属性。
Element.erase
用于删除元素的属性值.
这是一个’动态参数’方法. 传入的参数可以是任意在Element.Properties中定义过类型.
语法:
myElement.erase(property);
Example:
1 2 | $('myDiv').erase('id'); //删除myDiv上的id $('myDiv').erase('class'); //删除myDiv上的class属性 |
Element.removeProperty
删除元素的一个属性。
语法:
myElement.removeProperty(property);
Example:
1 | $('img').removeProperty('alt'); |
Element.removeProperties
删除元素的多个属性。
语法:
myElement.removeProperties(properties);
Example:
HTML
<a id="myAnchor" href="#" title="hello world"></a> |
JavaScript
1 | $('myAnchor').removeProperties('id', 'href', 'title'); |
结果 HTML
<a></a> |
样式操作
我们知道JavaScript允许你改变站点的CSS表示层。当我们想拥有更绚丽的页面和更吸引人的特效时,改变样式是极佳的做法。
我们最终的目的就是“把用户的注意力吸引到这些元素上”。
对于样式的操作无非就是修改,移除,添加,切换,获取 。
以上操作中我们经常用到的就是修改,而修改样式我们通常都采用修改style属性或改变class或id的方式。
在CSS中,我们通常不建议使用内嵌样式来设计元素的显示效果。同样,在JavaScript中也不推荐使用style属性来呈现元素的显示效果。
下面的代码就是使用元素的内联样式:
1 | <div style="background-color:#F00;color:#FFF;width:200px;height:100px;"></div> |
用JavaScrip改变元素显示效果的最佳方法是修改类。对于style属性的使用背景是在:‘需要动态计算CSS值的情况下才建议使用的’。例如,在页面上移动对象(如跟随鼠标指针),或者对特定属性实现动画效果(如黄褪技术,也就是让元素先为黄色,然后逐渐淡出,渐渐恢复成背景色)。
注意: HTML元素的style属性让我们得以访问该元素的内联样式。
以下就是MooTools为我们提供的样式操作方法,它给我们的开发带来了极大方便。
注意:MooTools提供的setStyle(),setStyles()方法设置的样式为内联样式。如果不想设置为内联样式,我可以通过上面学过的set(),setProperty()方法来设置元素的class和id选择器,最终结果是通过内嵌样式表或是链入式样式表来设置样式的。当我们的元素想拥有多个css class类时,我们需要addClass()方法来追加样式。
作为Example演示的HTML代码:
1 2 3 4 5 6 7 8 9 10 11 12 | <ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">(X)Html / Css</a></li> <li><a href="#">Ajax / RIA</a></li> <li><a href="#">GoF</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">JavaWeb</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">MooTools</a></li> <li><a href="#">Python</a></li> <li><a href="#">Resources</a></li> </ul> |
1.获取和设置样式表属性
Element.setStyle
这个函数可以允许你设置一个元素的样式属性。我们在前面的一些例子中已经使用过了。你要做的就是把它放在你的 选择器之后,那么它将改变一个元素或者多个元素的样式属性。
语法:
myElement.setStyle(property, value);
Example:
1 2 3 4 | //给id为‘menu’的ul元素设置背景色 $('menu').setStyle('background-color', '#eeeeee'); //给所有的li元素下的a元素设置背景色 $$('li a').setStyle('background-color', '#369'); |
Element.getStyle
同样,这个方法就像它的字面意思一样。.getStyle();将返回一个元素的一个CSS属性值。
语法:
var style = myElement.getStyle(property);
Example:
1 2 3 | //获得id为'menu'的ul元素的背景色 $('menu').getStyle('background-color'); //返回“#eeeeee” |
Element.setStyles
.setStyles();就像你所想象的那样,可以让你一次给一个元素或者一个元素数组设置多个属性值。为了能够同时设置多个样式表属性值,.setStyles();的语法与setStyle();的语法相比略有一点不同。
语法:
myElement.setStyles(styles);
styles – (object) CSS属性’名/值’对象
Example:
1 2 3 4 5 6 7 8 | // 还是从你的选择器开始,然后在后面加上.setStyles({});格式为:'property': 'value',.... $('menu').setStyles({ 'width': '1000px', 'height': '1000px', // 特别注意:最后一个属性没有逗号 // 如果有逗号,将不能跨浏览器 'background-color': '#eeeeee' }); |
注意:实际上,属性选择器也可以不需要单引号,除非属性名中有连接符“-”,比如在“background-color”中,为了保持简单,给每个属性选择器都加上单引号更容易一些。
同时也要注意:属性值可能更灵活多变一些(比如“100px”或者“#eeeeee”)。除了字符串(一个只有字母的串,我们会在以后的教程中更深入地讲解这个),你也可以传入数字(这可能在大多数情况下会被解释为px)或者变量而不需要引号。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | // 这个把变量setBGColor的值设置为字符串(String)'#eeeeee' var setBGColor = '#eeeeee'; // 你可以把一个变量传递给另外一个变量 // 这使得变量BGColor的值也等于字符串(String)'#eeeeee' var BGColor = setBGColor; // 这个把变量divWidth的值设置为数字(Number)500 var tagWidth = 500; $('menu').setStyles({ // 在这种情况下,变量名是不需要用引号包围起来的 'width': tagWidth, // 数字也一样,不需要引号包围 'height': 1000, // 另外一个变量 'background-color': BGColor, // 字符串就是用单引号引起来的一系列字符组成的串 'color': 'black' }); |
Element.getStyles
这个方法可以让你一次获得一个元素的多个样式属性。这个和我们看到的上面的略有一些不同,因为它包含了多个数据集,每个数据集有一个键(key,属性名)和一个值(value,属性值)。这个数据集叫做对象,.getStyles();方法可以非常容易地把多个属性值放入这些对象中,并可以很简单地把它们取回来。
语法:
var styles = myElement.getStyles(property[, property2[, property3[, …]]]);
Example:
1 2 3 4 | //获得一个元素的多个样式属性值 var ss=$('menu').getStyles('width', 'height', 'background-color'); //通过ss对象,指定属性的名(键)来得到一个值 alert(ss['background-color']); |
注意:如果你要从你的样式表对象中取得一个单独的属性,首先取得一个对象变量(在这个例子中是“ss”),然后使用方括号和单引号([”]),最后填入属性名key(如width或者background-color)。
2.追加样式
Element.addClass
如果指定样式名在元素上不存在,则添加该样式名。
它就是添加指定的一个或多个类名称到指定的元素。
语法:
myElement.addClass(classNames);
classNames – 一个字符串,包含将要删除的一个类名称,或者包含空格分隔的,将要删除的多个类名称。
Example:
HTML CODE
1 | <div id="myElement" class="testClass"></div> |
JavaScript CODE
1 | $('myElement').addClass('newClass'); |
结果 HTML
1 | <div id="myElement" class="testClass newClass"></div> |
3.移除样式
Element.removeClass
将指定样式名从元素上删除。
从元素里删除指定的一个或多个类名称。
语法:
myElement.removeClass(classNames);
classNames – 一个字符串,包含将要删除的一个类名称,或者包含空格分隔的,将要删除的多个类名称。
Example:
HTML CODE
1 | <div id="myElement" class="testClass newClass"></div> |
JavaScript CODE
1 | $('myElement').removeClass('newClass'); |
结果 HTML
1 | <div id="myElement" class="testClass"></div> |
4.切换样式
Element.toggleClass
添加/删除元素上指定的样式名。
如果在元素中指定的类名称不存在,则添加指定类名称;如果元素已拥有指定类名称,则从元素中删除指定类名称。请注意,每个元素单独测试,所以元素被添加类名称,而其他则被删除类名称。
语法:
myElement.toggleClass(className);
Example:
HTML CODE
1 | <div id="myElement" class="myClass"></div> |
JavaScript CODE
1 | $('myElement').toggleClass('myClass'); |
结果 HTML
1 | <div id="myElement" class=""></div> |
JavaScript
1 | $('myElement').toggleClass('myClass'); |
结果 HTML
1 | <div id="myElement" class="myClass"></div> |
5.判断是否含有某个样式
Element.hasClass
检测元素上是否包含指定的样式名。
语法:
var result = myElement.hasClass(className);
Example:
HTML CODE
1 | <div id="myElement" class="testClass"></div> |
JavaScript CODE
1 | $('myElement').hasClass('testClass'); //返回 true |
设置和获取HTML ,文本和值
Mootools内置的自定义属性,通过set()和get()可以操作JavaSscript中的innerHTML属性,innerText属性,value属性。
下面就是几个默认的自定义属性:
html – gets and sets the inner html
text – gets and sets the text value of a node
tag – gets the tag of a node
value – gets the value of an input
具体介绍如下:
1.Element 属性: html (设置和获取 innerHTML)
此方法类似于JavaScript中的innerHTML属性,可以用来读取或者设置某一个元素中的HTML内容。
语法:
设置:myElement.set(‘html’, [htmlString[, htmlString2[, htmlString3[, ..]]]);
获取:myElement.get(‘html’);
Example:
1 2 3 4 | //设置素的innerHTML ,参数为‘HTML字符串’ $('myElement').set('html', '<div></div>', '<p></p>'); //返回本元素的innerHTML myElement.get('html'); |
2.Element 属性: text (设置和获取 innerText)
此方法类似于JavaScript中的innerText属性,可以用来读取或者设置某一个元素中的文本内容。
语法:
设置:myElement.set(‘text’, text);
获取:var myText = myElement.get(‘text’);
Example:
1 2 | $('myElement').set('text', 'some text'); //myElement内的文本变成'some text' var myText = $('myElement').get('text'); //myText = 'my text'. |
3.Element 属性: tag (获取标签名)
获取元素的标签名。
返回元素的标签名为小写。
语法:
获取:var myTag = myElement.get(‘tag’);
Example:
1 | var myTag = $('myImage').get('tag'); // myTag = 'img'. |
4.Element 属性: value (获取和设置输入值)
此方法类似于JavaScript中的value属性,可以用来设置和获取元素值。
语法:
设置:myElement.set(‘value’, value);
获取:myElement.get(‘value’);
Example:
HTML CODE
1 2 3 4 | <form id="myForm" action="submit.php"> <input id="email" name="email" value="bob@bob.com" /> <input id="fullName" name="fullName" value="" /> </form> |
JavaScript CODE
1 2 | $('email').get('value'); $('fullName').set('fullName'); |
5.toQueryString ()和getSelected ()
Element.toQueryString
读取子元素中的数据输入元素(如input, select等)的值, 并生成查询字符串
语法:
var query = myElement.toQueryString();
Example:
HTML CODE
1 2 3 4 | <form id="myForm" action="submit.php"> <input name="email" value="bob@bob.com" /> <input name="zipCode" value="90210" /> </form> |
JavaScript CODE
1 | $('myForm').toQueryString(); //返回 "email=bob@bob.com&zipCode=90210". |
Element.getSelected
返回下拉列表框元素中的选中项。
本方法返回的总是一个数组,不管选中多少项。
语法:
var selected = mySelect.getSelected();
Example:
HTML CODE
1 2 3 4 | <select id="country-select" name="country"> <option value="US">United States</option ><option value ="IT">Italy</option> </select> |
JavaScript CODE
1 | $('country-select').getSelected(); |
文章评论 已经有 1 条评论!