鞠婧祎海选视频,附身控制美女视频

通過(guò)JavaScript可以對(duì)XML文檔進(jìn)行控制。本節(jié)將介紹如何用JavaScript控制XML文檔的分頁(yè)顯示和通過(guò)XML實(shí)現(xiàn)留言簿。

實(shí)例355 用JavaScript控制XML文檔的分頁(yè)顯示

實(shí)例說(shuō)明

本實(shí)例將介紹如何使用JavaScript控制XML文檔的分頁(yè)顯示。運(yùn)行本實(shí)例，如圖14.7所示，在頁(yè)面中將顯示第一篇從XML文檔中獲取的博客文章，單擊“下一篇”超級(jí)鏈接，即可查看下一篇博客文章，單擊“上一篇”超級(jí)鏈接，即可查看上一篇文章。

圖14.7 用JavaScript控制XML文檔的分頁(yè)顯示

技術(shù)要點(diǎn)

本實(shí)例主要通過(guò)XML數(shù)據(jù)島的recordset對(duì)象的absoluteposition屬性、recordcount屬性、movenext()方法和moveprevious()方法實(shí)現(xiàn)數(shù)據(jù)的分頁(yè)導(dǎo)航功能。下面分別進(jìn)行介紹。

l absoluteposition：該屬性用于返回當(dāng)前記錄的記錄號(hào)。

l recordcount：該屬性用于返回總記錄數(shù)。

l movenext()：該方法用于將記錄指針移動(dòng)到下一條記錄。

l moveprevious()：該方法用于將記錄指針向前移動(dòng)一條記錄。

實(shí)現(xiàn)過(guò)程

（1）編寫doc.xml文件，在該文件中創(chuàng)建一個(gè)docs根元素，該元素由多個(gè)doc元素組成，代碼如下：

<?xml version="1.0" encoding="gb2312"?>

<docs>

<doc>

<content>你現(xiàn)在好嗎？今天快樂(lè)嗎？我從遠(yuǎn)方送你的祝福收到了嗎？</content>

</doc>

<doc>

<content>東風(fēng)來(lái)了，春天的腳步近了.....</content>

</doc>

</docs>

（2）首先使用一個(gè)XML數(shù)據(jù)島（id=d）載入 doc.xml文檔，然后使用<span>標(biāo)記的datasrc屬性與id為d的XML數(shù)據(jù)島進(jìn)行綁定，再使用<span>標(biāo)記的datafld屬性與XML文檔對(duì)應(yīng)的XML元素進(jìn)行綁定，關(guān)鍵代碼如下：

<table width="90%" border="1" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF"

bordercolordark="#FFFFFF" bordercolorlight="#999999">

<tr>

<td height="25" colspan="2">博客ID號(hào)：<span datasrc="#d"

datafld="id"></span></td>

</tr>

<tr>

<td height="25" colspan="4">博客主題：<span datasrc="#d"

datafld="topic"></span></td>

</tr>

<tr>

</tr>

</table>

（3）編寫自定義的JavaScript函數(shù)moveNext()，用于向后移動(dòng)一條記錄，代碼如下：

function moveNext(){

x=d.recordset;

if (x.absoluteposition < x.recordcount){

x.movenext();

}

（4）編寫自定義的JavaScript函數(shù)movePrevious()，用于向前移動(dòng)一條記錄，代碼如下：

function movePrevious(){

x=d.recordset;

if (x.absoluteposition > 1){

x.moveprevious();

}

</script>

（5）在頁(yè)面的適當(dāng)位置添加“上一篇”和“下一篇”超級(jí)鏈接，并在其onClick事件中調(diào)用相應(yīng)方法，代碼如下：

舉一反三

根據(jù)本實(shí)例，讀者可以：

實(shí)現(xiàn)網(wǎng)上社區(qū)中的文章瀏覽；

實(shí)現(xiàn)分頁(yè)顯示留言信息。

實(shí)例356 通過(guò)操作XML數(shù)據(jù)島實(shí)現(xiàn)添加、刪除留言信息

實(shí)例說(shuō)明

本實(shí)例將介紹如何通過(guò)操作XML數(shù)據(jù)島實(shí)現(xiàn)添加、刪除留言信息。運(yùn)行本實(shí)例，在“留言人”文本框中輸入“wgh”，在“表情”文本框中輸入“微笑”，在“電話”文本框中輸入“495****”，在“留言內(nèi)容”文本框中輸入“祝大家新年快樂(lè)！”，單擊“添加留言”按鈕，在頁(yè)面中將以列表形式顯示留言信息，如圖14.8所示，單擊“刪除第一條留言”按鈕，將刪除第一條留言信息，單擊“刪除最后一條留言”超級(jí)鏈接，即可刪除最后一條留言信息。

圖14.8 通過(guò)操作XML數(shù)據(jù)島實(shí)現(xiàn)添加、刪除留言信息

技術(shù)要點(diǎn)

本實(shí)例主要通過(guò)XML DOM對(duì)象實(shí)現(xiàn)。XML DOM對(duì)象的全稱是XML Document ObjectModel，即XML文檔對(duì)象模型，XML DOM定義了訪問(wèn)和操作XML文檔的標(biāo)準(zhǔn)方式。下面將對(duì)本實(shí)例中應(yīng)用的XML DOM對(duì)象的屬性和方法進(jìn)行介紹。

1．createElement()方法

createElement()方法用于創(chuàng)建一個(gè)指定名稱的元素，其語(yǔ)法格式如下：

xmlDocument.createElement(tagName);

參數(shù)說(shuō)明

l tagName：用于指定新元素的名稱，區(qū)分大小寫。

2．createAttribute()方法

createAttribute()方法用于創(chuàng)建一個(gè)指定名稱的屬性，其語(yǔ)法格式如下：

xmlDocument.createAttribute(name);

參數(shù)說(shuō)明

l name：用于指定屬性名稱。

3．createNode()方法

createNode()方法用于創(chuàng)建一個(gè)指定類型、名稱及命名空間的新節(jié)點(diǎn)，其語(yǔ)法格式如下：

xmlDocument.createNode(type, name, nameSpaceURI);

參數(shù)說(shuō)明

l type：用于指定將要?jiǎng)?chuàng)建的節(jié)點(diǎn)的類型。

l name：用于指定新節(jié)點(diǎn)的名稱。

l nameSpaceURI：用于指定一個(gè)定義命名空間的URI。

4．createTextNode()方法

createTextNode()方法用于創(chuàng)建一個(gè)新的text節(jié)點(diǎn)，并包含指定的數(shù)據(jù)，其語(yǔ)法格式如下：

xmlDocument.createTextNode(data);

參數(shù)說(shuō)明

l data：用于指定一個(gè)代表新text節(jié)點(diǎn)的字符串。需要注意的是，此時(shí)的text節(jié)點(diǎn)并沒(méi)有添加到文件樹中。若要將該節(jié)點(diǎn)添加到文件樹中，必須使用插入方法（例如：insertBefore、replaceChild或appendChild）。

5．insertBefore()方法

insertBefore()方法用于在指定的節(jié)點(diǎn)前插入一個(gè)子節(jié)點(diǎn)，其語(yǔ)法格式如下：

objDocumentNode=xmlDocumentNode.insertBefore(newChild,refChild);

參數(shù)說(shuō)明

l newChild：用于指定一個(gè)包含新子節(jié)點(diǎn)地址的對(duì)象。

l refChild：用于指定參照節(jié)點(diǎn)的地址。新的子節(jié)點(diǎn)將被插到參照節(jié)點(diǎn)之前。如果refChild參數(shù)沒(méi)有包含在內(nèi)，新的子節(jié)點(diǎn)會(huì)被插到子節(jié)點(diǎn)列表的末端。

6．removeChild()方法

removeChild()方法用于將指定的節(jié)點(diǎn)從節(jié)點(diǎn)列表中移除，其語(yǔ)法格式如下：

objDocumentNode=xmlDocumentNode.removeChild(oldChild);

參數(shù)說(shuō)明

l oldChild：用于指定一個(gè)要被移除的節(jié)點(diǎn)對(duì)象。

7．a(chǎn)ppendChild()方法

appendChild()方法用于在當(dāng)前節(jié)點(diǎn)的最后加入一個(gè)新的節(jié)點(diǎn)，其語(yǔ)法格式如下：

xmlDocumentNode.appendChild(newChild);

參數(shù)說(shuō)明

l newChild：用于指定一個(gè)要添加新子節(jié)點(diǎn)的地址。

8．hasChildNodes ()方法

如果指定的節(jié)點(diǎn)有一個(gè)或更多個(gè)子節(jié)點(diǎn)，hasChildNodes ()方法將返回True，否則將返回False，其語(yǔ)法格式如下：

boolValue=xmlDocumentNode.hasChildNodes() ;

9．lastChild屬性

lastChild屬性為只讀屬性，用于返回一個(gè)對(duì)象。如果節(jié)點(diǎn)中沒(méi)有包含最后子元素，將返回null，其語(yǔ)法格式如下：

objLastChild = xmlDocumentNode.lastChild;

實(shí)現(xiàn)過(guò)程

（1）編寫board.xml文件，在該文件中創(chuàng)建一個(gè)boards根元素，該元素由多個(gè)board元素組成，代碼如下：

<?xml version="1.0" encoding="gb2312"?>

<board>

<message>你現(xiàn)在好嗎？今天快樂(lè)嗎？我從遠(yuǎn)方送你的祝福收到了嗎？</message>

</board>

</boards>

（2）使用一個(gè)XML數(shù)據(jù)島（id= board）載入board.xml文檔，并將其綁定到HTML表格（datasrc=# board）上，再將<span>標(biāo)記的datafld屬性和XML文檔對(duì)應(yīng)的XML元素相互綁定，關(guān)鍵代碼如下：

<table width="100%" border="1" cellpadding="0" cellspacing="0" datasrc="#board"

bordercolor="#FFFFFF" bordercolordark="#FFFFFF" bordercolorlight="#96E2FA">

<thead>

<tr>

</tr>

</thead>

<tr>

</tr>

</table>

（3）編寫自定義的JavaScript函數(shù)addElement ()，用于在id為board的XML數(shù)據(jù)島中添加一條留言信息，代碼如下：

xmldoc = board;

//添加留言信息

function addElement() {

var rootElement = xmldoc.documentElement;

//創(chuàng)建留言元素

var newBoard = xmldoc.createElement('board');

//添加留言人子元素

var person = xmldoc.createElement('person');

var personF = xmldoc.createTextNode(document.myform.person.value);

person.appendChild(personF);

newBoard.appendChild(person);

//添加表情子元素

var humor = xmldoc.createElement('humor');

var humorF = xmldoc.createTextNode(document.myform.humor.value);

humor.appendChild(humorF);

newBoard.appendChild(humor);

//添加電話子元素

var tel = xmldoc.createElement('tel');

var telF = xmldoc.createTextNode(document.myform.tel.value);

tel.appendChild(telF);

newBoard.appendChild(tel);

//添加留言信息子元素

var message = xmldoc.createElement('message');

var messageF = xmldoc.createTextNode(document.myform.message.value);

message.appendChild(messageF);

newBoard.appendChild(message);

//向文檔中追加一條留言信息

rootElement.appendChild(newBoard);

}

</script>

（4）編寫自定義的JavaScript函數(shù)deleteFirstElement ()，用于刪除第一個(gè)節(jié)點(diǎn)，代碼如下：

function deleteFirstElement(){ //刪除第一個(gè)節(jié)點(diǎn)

var rootElement = xmldoc.documentElement;

if (rootElement.hasChildNodes())

rootElement.removeChild(rootElement.childNodes.item(0)); //刪除第一個(gè)節(jié)點(diǎn)

}

</script>

（5）編寫自定義的JavaScript函數(shù)deleteLastElement ()，用于刪除最后一個(gè)節(jié)點(diǎn)，代碼如下：

function deleteLastElement(){ //刪除最后一個(gè)節(jié)點(diǎn)

var rootElement = xmldoc.documentElement;

if (rootElement.hasChildNodes())

rootElement.removeChild(rootElement.lastChild); //刪除最后一個(gè)節(jié)點(diǎn)

}

</script>

（6）在頁(yè)面的適當(dāng)位置添加用于收集留言信息的表單，在該表單中添加“添加留言”按鈕、“刪除第一條留言”按鈕和“刪除最后一條留言”按鈕，并在這3個(gè)按鈕的onClick事件中調(diào)用相應(yīng)方法，代碼如下：

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td height="40" colspan="2" align="center"><input name="button" type="button"

class="btn_grey" onClick="check(myform);" value="添加留言" />

<input name="button22" type="button" class="btn_grey"

onClick="deleteFirstElement();" value="刪除第一條留言" />

<input name="button2" type="button" class="btn_grey"

onClick="deleteLastElement();" value="刪除最后一條留言" />

</td>

</tr>

</table>

</form>

舉一反三

根據(jù)本實(shí)例，讀者可以：

實(shí)現(xiàn)動(dòng)態(tài)添加或刪除網(wǎng)上論壇的主題信息。

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。

国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

實(shí)例說(shuō)明

技術(shù)要點(diǎn)

實(shí)現(xiàn)過(guò)程

舉一反三

實(shí)例說(shuō)明

技術(shù)要點(diǎn)

實(shí)現(xiàn)過(guò)程

舉一反三