|
|
基本方法
.get();
這個(gè)工具可以讓你獲取元素的屬性（property）。元素的屬性是組成一個(gè)HTML元素的各種不同部分，例如src、value、name等等。使用.get();方法非常簡(jiǎn)單：
參考代碼：
復(fù)制代碼 代碼如下:
// 下面這行將返回id為“id_name”的元素的html標(biāo)記名（div、a、span……）
$('id_name').get('tag');
參考代碼：
復(fù)制代碼 代碼如下:
<div id="body_wrap">
<span id="id_name">Element</span> <!-- 上面的代碼將返回“span” -->
</div>
你可以使用.get();方法獲得更多屬性，而不只是html標(biāo)記名：
id
name
value
href
src
class（如果有多個(gè)CSS類名，則將返回全部CSS類名）
text （一個(gè)元素的文本內(nèi)容）
等等…
.set();
.set();方法和.get();方法一樣，不過(guò)不是獲得一個(gè)值，而是設(shè)置一個(gè)值。當(dāng)和事件聯(lián)合使用時(shí)比較有用，通過(guò)這個(gè)方法你可以在頁(yè)面加載之后改變一些屬性值。
參考代碼：
// 這將設(shè)置id為id_name的元素鏈接地址為“http://www.google.com”
$('id_name').set('href', 'http://www.google.com');
參考代碼：
復(fù)制代碼 代碼如下:
<div id="body_wrap">
<!-- 上面的代碼將改變鏈接地址為“http://www.google.com” -->
<a id="id_name" >Search Engine</a>
</div>
.erase();
通過(guò).erase();方法，你可以清除一個(gè)元素的屬性值。它和前面兩個(gè)方法類似。選取元素，然后選擇你要清除的屬性。
參考代碼：
// 這講移除id為id_name的元素的href屬性
$('id_name').erase('href');
參考代碼：
復(fù)制代碼 代碼如下:
<div id="body_wrap">
<!-- 上面的代碼將清除鏈接地址 -->
<a >Search Engine</a>
</div>
移動(dòng)元素
.inject();
要移動(dòng)頁(yè)面上一個(gè)已經(jīng)存在的元素，你可以使用.inject();方法。和我們看到的其它方法類似，它用起來(lái)也非常簡(jiǎn)單，可以在你的用戶界面上給你更多操控權(quán)。要使用.inject();方法，首先要設(shè)置一些包含元素變量：
參考代碼：
復(fù)制代碼 代碼如下:
var elementA = $('elemA');
var elementB = $('elemB');
var elementC = $('elemC');
上面的代碼把下面這個(gè)HTML分別賦值給了不同的變量，這樣用MooTools來(lái)操作時(shí)會(huì)比較簡(jiǎn)單。
參考代碼：
復(fù)制代碼 代碼如下:
<div id="body_wrap">
<div id="elemA">A</div>
<div id="elemB">B</div>
<div id="elemC">C</div>
</div>
現(xiàn)在，要改變這些元素的順序，我們可以通過(guò)四種方式來(lái)使用.inject();方法。我們可以把元素注入到：
底部（bottom，默認(rèn)）
頂部（top）
在某個(gè)元素的前面（before）
在某個(gè)元素的后面（after）
bottom和top將把這個(gè)元素注入到一個(gè)選中元素的內(nèi)部，在元素內(nèi)最底部或者最頂部。相對(duì)地，before和after將把一個(gè)元素注入到另外一個(gè)元素的頂部或者底部，但是不是注入到元素內(nèi)部。
因此，讓我們把元素順序改變?yōu)锳-C-B。由于我們不需要把一個(gè)元素注入到另外一個(gè)元素的內(nèi)部，我們可以使用before或者after。
參考代碼：
復(fù)制代碼 代碼如下:
// 下面這句的意思是：把元素C放到元素B之前
elementC.inject(elementB, 'before');
// 下面這句的意思是：把元素B放到元素C之后
elementB.inject(elementC, 'after');
創(chuàng)建一個(gè)新元素
new Element
你可以使用“new Element”構(gòu)造器來(lái)創(chuàng)建一個(gè)行的HTML元素。這和寫(xiě)一個(gè)正常的HTML元素非常類似，只不過(guò)你需要調(diào)整一下語(yǔ)法，以便能夠在MooTools下正常運(yùn)行：
參考代碼：
// 首先命名一個(gè)變量并聲明一個(gè)“new Element”
// 然后定義元素的類型（div、a、span...）
var newElementVar = new Element('div', {
// 在這里設(shè)置元素的所有屬性
'id': 'id_name',
'text': 'I am a new div',
'styles': {
// 在這里設(shè)置元素的所有樣式參數(shù)
'width': '200px',
'height': '200px',
'background-color': '#eee',
'float': 'left'
}
});
現(xiàn)在你就有一個(gè)元素了，你可以通過(guò)我們剛才學(xué)的inject();方法把這個(gè)元素放在頁(yè)面上的某個(gè)位置。我們從下面這個(gè)簡(jiǎn)單的HTML開(kāi)始：
參考代碼：
<div id="body_wrap">
<div id="content_id">Some div content</div>
</div>
現(xiàn)在，我們把ID為content_id的元素轉(zhuǎn)換為一個(gè)變量：
參考代碼：
var bodyWrapVar = $('body_wrap');
和我們剛才學(xué)的一樣，我們可以把我們創(chuàng)建的這個(gè)元素注入到當(dāng)前的HTML中：
參考代碼：
// 這句的意思是說(shuō)：“把newElementVar注入到bodyWrapVar內(nèi)部，并放置到頂部”
newElementVar.inject(bodyWrapVar , 'top');
這個(gè)代碼最終可能是這樣的：
參考代碼：
<div id="body_wrap">
<!-- 這個(gè)元素被注入到內(nèi)部頂部 -->
<div id="id_name">I am a new div</div>
<div id="content_id">Some div content</div>
</div>
示例
為了這個(gè)例子，我們來(lái)創(chuàng)建一個(gè)表單，可以讓你添加一個(gè)行元素到你的HTML頁(yè)面。首先，建立一些文本框和按鈕。
參考代碼：
復(fù)制代碼 代碼如下:
<div id="body_wrap">
ID: <input id="id_input" name="id" />
text: <input id="text_input" name="text" />
<button id="new_div">創(chuàng)建一個(gè)新的div</button>
</div>
現(xiàn)在，我們來(lái)用MooTools寫(xiě)JavaScript來(lái)實(shí)現(xiàn)讓這個(gè)HTML表單可以插入一個(gè)新的元素到你的頁(yè)面中。首先，我們先給這個(gè)按鈕添加一個(gè)事件，并寫(xiě)一個(gè)函數(shù)來(lái)包含我們的代碼：
參考代碼：
復(fù)制代碼 代碼如下:
var newDiv = function() {
// 我們將把“添加一個(gè)新元素”的代碼放在這里
};
window.addEvent('domready', function() {
$('new_div').addEvent('click', newDiv);
});
下一件事我們要做的就是指定我們要處理的變量。要使用輸入表單中的數(shù)據(jù)，我們需要使用.get();方法：
參考代碼：
復(fù)制代碼 代碼如下:
var idValue = $('id_input').get('value');
var textValue = $('text_input').get('value');
現(xiàn)在，上面代碼中的變量idValue和textValue就包含了它們指定的輸入表單的值。由于我們需要在用戶點(diǎn)擊“創(chuàng)建一個(gè)新的div”按鈕時(shí)獲得輸入框的值，我們需要把上面的代碼放在newDiv();這個(gè)函數(shù)中。如果我們需要在這個(gè)函數(shù)外面獲得這個(gè)值，我們需要在頁(yè)面加載時(shí)獲得，而不是點(diǎn)擊時(shí)。
參考代碼：
復(fù)制代碼 代碼如下:
var newDiv = function() {
var idValue = $('id_input').get('value');
var textValue = $('text_input').get('value');
};
window.addEvent('domready', function() {
$('new_div').addEvent('click', newDiv);
});
接下里，我們需要獲得我們新元素要插入到的元素：
參考代碼：
復(fù)制代碼 代碼如下:
var newDiv = function() {
var idValue = $('id_input').get('value');
var textValue = $('text_input').get('value');
var bodyWrapVar = $('newElementContainer');
};
window.addEvent('domready', function() {
$('new_div').addEvent('click', newDiv);
});
我們已經(jīng)有了我們的輸入表單的值了，現(xiàn)在我們可以創(chuàng)建一個(gè)新元素了：
參考代碼：
復(fù)制代碼 代碼如下:
var newDiv = function() {
var idValue = $('id_input').get('value');
var textValue = $('text_input').get('value');
var bodyWrapVar = $('newElementContainer');
var newElementVar = new Element('div', {
// 這將設(shè)置這個(gè)元素的id為idValue的值
'id': idValue,
// 這將設(shè)置這個(gè)元素的文本為textValue的值
'html': textValue
});
};
window.addEvent('domready', function() {
$('new_div').addEvent('click', newDiv);
});
剩下我們要做的就是把這個(gè)新元素插入到我們的頁(yè)面中了：
參考代碼：
復(fù)制代碼 代碼如下:
var newDiv = function() {
var bodyWrapVar = $('newElementContainer');
var idValue = $('id_input').get('value');
var textValue = $('text_input').get('value');
var newElementVar = new Element('div', {
'id': idValue,
'text': textValue
});
// 下面這句是說(shuō)：“把newElementVar插入到bodyWrapVar的內(nèi)部頂部”
newElementVar.inject(bodyWrapVar, 'top');
};
var removeDiv = function() {
// 這將刪除內(nèi)部的html值（就是div標(biāo)記類的所有東西）
$('newElementContainer').erase('html');
}
window.addEvent('domready', function() {
$('new_div').addEvent('click', newDiv);
$('remove_div').addEvent('click', removeDiv);
});
更多學(xué)習(xí)...
一定要花一些時(shí)間看一些MooTools文檔中的Elements這一節(jié)：
- Element這一節(jié)包含了我們這里講到的大多數(shù)內(nèi)容，還有很多其它內(nèi)容
- Element.style可以給你在元素樣式屬性上更多的控制權(quán)（有些東西我們將在以后的教程中深入講解）
- Element.dimentions包含了處理位置、坐標(biāo)、尺寸大小等東西的工具
JavaScript技術(shù)：通過(guò)Mootools 1.2來(lái)操縱HTML DOM元素，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
