亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

通過Mootools 1.2來操縱HTML DOM元素

 更新時間:2009年09月15日 18:50:56   作者:  
今天我們來深入地學習一下如果操縱HTML元素。通過MooTools 1.2,你可以添加新元素到一個HTML頁面中,也可以刪除元素,以及改變?nèi)魏螛邮交蛘咴貐?shù),這些都非常容易。
我們已經(jīng)學習過如何來選取DOM元素,怎么創(chuàng)建數(shù)組,怎么創(chuàng)建函數(shù),怎么把事件添加到元素,今天我們來深入地學習一下如果操縱HTML元素。通過MooTools 1.2,你可以添加新元素到一個HTML頁面中,也可以刪除元素,以及改變?nèi)魏螛邮交蛘咴貐?shù),這些都非常容易。
基本方法
.get();
這個工具可以讓你獲取元素的屬性(property)。元素的屬性是組成一個HTML元素的各種不同部分,例如src、value、name等等。使用.get();方法非常簡單:
參考代碼:
復制代碼 代碼如下:

// 下面這行將返回id為“id_name”的元素的html標記名(div、a、span……)
$('id_name').get('tag');


參考代碼:
復制代碼 代碼如下:

<div id="body_wrap">
<span id="id_name">Element</span> <!-- 上面的代碼將返回“span” -->
</div>

你可以使用.get();方法獲得更多屬性,而不只是html標記名:
id
name
value
href
src
class(如果有多個CSS類名,則將返回全部CSS類名)
text (一個元素的文本內(nèi)容)
等等…
.set();
.set();方法和.get();方法一樣,不過不是獲得一個值,而是設置一個值。當和事件聯(lián)合使用時比較有用,通過這個方法你可以在頁面加載之后改變一些屬性值。
參考代碼:
// 這將設置id為id_name的元素鏈接地址為“http://www.google.com”
$('id_name').set('href', 'http://www.google.com');

參考代碼:
復制代碼 代碼如下:

<div id="body_wrap">
<!-- 上面的代碼將改變鏈接地址為“http://www.google.com” -->
<a id="id_name" >Search Engine</a>
</div>

.erase();
通過.erase();方法,你可以清除一個元素的屬性值。它和前面兩個方法類似。選取元素,然后選擇你要清除的屬性。
參考代碼:
// 這講移除id為id_name的元素的href屬性
$('id_name').erase('href');

參考代碼:
復制代碼 代碼如下:

<div id="body_wrap">
<!-- 上面的代碼將清除鏈接地址 -->
<a >Search Engine</a>
</div>


移動元素
.inject();
要移動頁面上一個已經(jīng)存在的元素,你可以使用.inject();方法。和我們看到的其它方法類似,它用起來也非常簡單,可以在你的用戶界面上給你更多操控權。要使用.inject();方法,首先要設置一些包含元素變量:
參考代碼:
復制代碼 代碼如下:

var elementA = $('elemA');
var elementB = $('elemB');
var elementC = $('elemC');

上面的代碼把下面這個HTML分別賦值給了不同的變量,這樣用MooTools來操作時會比較簡單。
參考代碼:
復制代碼 代碼如下:

<div id="body_wrap">
<div id="elemA">A</div>
<div id="elemB">B</div>
<div id="elemC">C</div>
</div>

現(xiàn)在,要改變這些元素的順序,我們可以通過四種方式來使用.inject();方法。我們可以把元素注入到:
底部(bottom,默認)
頂部(top)
在某個元素的前面(before)
在某個元素的后面(after)
bottom和top將把這個元素注入到一個選中元素的內(nèi)部,在元素內(nèi)最底部或者最頂部。相對地,before和after將把一個元素注入到另外一個元素的頂部或者底部,但是不是注入到元素內(nèi)部。
因此,讓我們把元素順序改變?yōu)锳-C-B。由于我們不需要把一個元素注入到另外一個元素的內(nèi)部,我們可以使用before或者after。
參考代碼:
復制代碼 代碼如下:

// 下面這句的意思是:把元素C放到元素B之前
elementC.inject(elementB, 'before');
// 下面這句的意思是:把元素B放到元素C之后
elementB.inject(elementC, 'after');

創(chuàng)建一個新元素
new Element
你可以使用“new Element”構造器來創(chuàng)建一個行的HTML元素。這和寫一個正常的HTML元素非常類似,只不過你需要調整一下語法,以便能夠在MooTools下正常運行:
參考代碼:
// 首先命名一個變量并聲明一個“new Element”
// 然后定義元素的類型(div、a、span...)
var newElementVar = new Element('div', {
// 在這里設置元素的所有屬性
'id': 'id_name',
'text': 'I am a new div',
'styles': {
// 在這里設置元素的所有樣式參數(shù)
'width': '200px',
'height': '200px',
'background-color': '#eee',
'float': 'left'
}
});
現(xiàn)在你就有一個元素了,你可以通過我們剛才學的inject();方法把這個元素放在頁面上的某個位置。我們從下面這個簡單的HTML開始:
參考代碼:
<div id="body_wrap">
<div id="content_id">Some div content</div>
</div>
現(xiàn)在,我們把ID為content_id的元素轉換為一個變量:
參考代碼:
var bodyWrapVar = $('body_wrap');
和我們剛才學的一樣,我們可以把我們創(chuàng)建的這個元素注入到當前的HTML中:
參考代碼:
// 這句的意思是說:“把newElementVar注入到bodyWrapVar內(nèi)部,并放置到頂部”
newElementVar.inject(bodyWrapVar , 'top');
這個代碼最終可能是這樣的:
參考代碼:
<div id="body_wrap">
<!-- 這個元素被注入到內(nèi)部頂部 -->
<div id="id_name">I am a new div</div>
<div id="content_id">Some div content</div>
</div>

示例
為了這個例子,我們來創(chuàng)建一個表單,可以讓你添加一個行元素到你的HTML頁面。首先,建立一些文本框和按鈕。
參考代碼:
復制代碼 代碼如下:

<div id="body_wrap">
ID: <input id="id_input" name="id" />
text: <input id="text_input" name="text" />
<button id="new_div">創(chuàng)建一個新的div</button>
</div>

現(xiàn)在,我們來用MooTools寫JavaScript來實現(xiàn)讓這個HTML表單可以插入一個新的元素到你的頁面中。首先,我們先給這個按鈕添加一個事件,并寫一個函數(shù)來包含我們的代碼:
參考代碼:
復制代碼 代碼如下:

var newDiv = function() {
// 我們將把“添加一個新元素”的代碼放在這里
};
window.addEvent('domready', function() {
$('new_div').addEvent('click', newDiv);
});

下一件事我們要做的就是指定我們要處理的變量。要使用輸入表單中的數(shù)據(jù),我們需要使用.get();方法:
參考代碼:
復制代碼 代碼如下:

var idValue = $('id_input').get('value');
var textValue = $('text_input').get('value');

現(xiàn)在,上面代碼中的變量idValue和textValue就包含了它們指定的輸入表單的值。由于我們需要在用戶點擊“創(chuàng)建一個新的div”按鈕時獲得輸入框的值,我們需要把上面的代碼放在newDiv();這個函數(shù)中。如果我們需要在這個函數(shù)外面獲得這個值,我們需要在頁面加載時獲得,而不是點擊時。
參考代碼:
復制代碼 代碼如下:

var newDiv = function() {
var idValue = $('id_input').get('value');
var textValue = $('text_input').get('value');
};
window.addEvent('domready', function() {
$('new_div').addEvent('click', newDiv);
});

接下里,我們需要獲得我們新元素要插入到的元素:
參考代碼:
復制代碼 代碼如下:

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)建一個新元素了:
參考代碼:
復制代碼 代碼如下:

var newDiv = function() {
var idValue = $('id_input').get('value');
var textValue = $('text_input').get('value');
var bodyWrapVar = $('newElementContainer');
var newElementVar = new Element('div', {
// 這將設置這個元素的id為idValue的值
'id': idValue,
// 這將設置這個元素的文本為textValue的值
'html': textValue
});
};
window.addEvent('domready', function() {
$('new_div').addEvent('click', newDiv);
});

剩下我們要做的就是把這個新元素插入到我們的頁面中了:
參考代碼:
復制代碼 代碼如下:

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
});
// 下面這句是說:“把newElementVar插入到bodyWrapVar的內(nèi)部頂部”
newElementVar.inject(bodyWrapVar, 'top');
};
var removeDiv = function() {
// 這將刪除內(nèi)部的html值(就是div標記類的所有東西)
$('newElementContainer').erase('html');
}
window.addEvent('domready', function() {
$('new_div').addEvent('click', newDiv);
$('remove_div').addEvent('click', removeDiv);
});

更多學習...

一定要花一些時間看一些MooTools文檔中的Elements這一節(jié):

  • Element這一節(jié)包含了我們這里講到的大多數(shù)內(nèi)容,還有很多其它內(nèi)容
  • Element.style可以給你在元素樣式屬性上更多的控制權(有些東西我們將在以后的教程中深入講解)
  • Element.dimentions包含了處理位置、坐標、尺寸大小等東西的工具

相關文章

  • MooTools 頁面滾動浮動層智能定位實現(xiàn)代碼

    MooTools 頁面滾動浮動層智能定位實現(xiàn)代碼

    MooTools 頁面滾動浮動層智能定位實現(xiàn)代碼,需要的朋友可以參考下。
    2011-08-08
  • MooTools 1.2介紹

    MooTools 1.2介紹

    有人最近要求我們寫一個關于MooTools 1.2的30天的教程,這似乎也是個很不錯的主意,于是我們決定現(xiàn)在就開始。在這些教程中,我們假設用戶沒有任何MooTools或者是JavaScript經(jīng)驗,但是至少有基本的HTML和CSS知識。
    2009-09-09
  • Mootools 1.2教程(2) DOM選擇器

    Mootools 1.2教程(2) DOM選擇器

    今天開始本系列教程的第2講。在這一講中,我們會學習幾種選擇HTML元素的方法。在許多方面,這是MooTools用得最多最基本的。畢竟,要創(chuàng)建一個基于HTML元素的交互性用戶體驗,你必須首先把它們掌握在手中。
    2009-09-09
  • 基于mootools 1.3框架下的圖片滑動效果代碼

    基于mootools 1.3框架下的圖片滑動效果代碼

    容器采用相對定位,圖片采用絕對定位,當鼠標移動到相應的圖片上,改變?nèi)eft屬性,用tween實現(xiàn)動畫效果.
    2011-04-04
  • Mootools 1.2教程 滑動效果(Slide)

    Mootools 1.2教程 滑動效果(Slide)

    今天繼續(xù)我們的Mootools 1.2教程的第23課,我們今天來講一下Fx插件中的Fx.Slide。通過該插件,可以讓你把內(nèi)容以滑動的方式顯示出來。它使用起來非常簡單,是你UI工具箱中一個很好的工具。
    2009-09-09
  • Mootools 1.2教程(3) 數(shù)組使用簡介

    Mootools 1.2教程(3) 數(shù)組使用簡介

    在上一篇教程——《Mootools 1.2教程(2)——DOM選擇器》中,我們介紹了一下選擇器,其中有很多方法就會返回數(shù)組(一個你可以對其中內(nèi)容進行多種操作的特殊列表)。
    2009-09-09
  • Mootools 1.2教程 Fx.Morph、Fx選項和Fx事件

    Mootools 1.2教程 Fx.Morph、Fx選項和Fx事件

    今天,我們繼續(xù)探索一下這個庫的Fx部分
    2009-09-09
  • 使用Mootools動態(tài)添加Css樣式表代碼,兼容各瀏覽器

    使用Mootools動態(tài)添加Css樣式表代碼,兼容各瀏覽器

    這個函數(shù)很有用處,尤其是當我們在使用Mootools開發(fā)插件的時候,例如Tips等,當我們需要額外的Css來支撐插件內(nèi)的效果時,通常我們的做法是把Css放到單獨的css文件里調用
    2011-12-12
  • 通過Mootools 1.2來操縱HTML DOM元素

    通過Mootools 1.2來操縱HTML DOM元素

    今天我們來深入地學習一下如果操縱HTML元素。通過MooTools 1.2,你可以添加新元素到一個HTML頁面中,也可以刪除元素,以及改變?nèi)魏螛邮交蛘咴貐?shù),這些都非常容易。
    2009-09-09
  • Mootools 1.2教程 正則表達式

    Mootools 1.2教程 正則表達式

    今天我們將先簡要地看一下正則表達式,然后再看一下MooTools提供的一些讓正則表達式更容易使用的功能。
    2009-09-09

最新評論