JavaScriptDom操作与高级应用（八）

一：Dom操作基础与高级应用

Node接口也定义了一些所有节点类型都包含的属性和方法.

二：创建和操作节点

1)创建新节点

createDocumentFragment()

创建文档碎片节点

createElement(tagname)

创建标签名tagname的元素

createTextNode(text)

创建包含文本text的文本节点

appendChild()

添加子元素

实例：

<html><head><title>createElementd()  Example</title><SCRIPT LANGUAGE="JavaScript"><!--function CreateP(){var Op = document.createElement("p");var oText = document.createTextNode("Hellow World");Op.appendChild(oText);document.body.appendChild(Op);}
function removeElement(){
var oP = document.body.getElementsByTagName("p")[0];
//document.body.removeChild(oP);
oP.parentNode.removeChild(oP);
}function ReplaceElement(){var oNewP = document.createElement("p");var oText = document.createTextNode("aaaaaaaaaaaaaaaa");oNewP.appendChild(oText);var oOldP=  document.body.getElementsByTagName("p")[0];oOldP.parentNode.replaceChild(oNewP,oOldP);
}function insertElement(){
var oNewP = document.createElement("p");
var oText = document.createTextNode("aaaaaaaaaaaaaaaa");
oNewP.appendChild(oText);
var oOldP=  document.body.getElementsByTagName("p")[0];
document.body.insertBefore(oNewP,oOldP);
}//--></SCRIPT></head><body><p> Hellow</p><p> how are you?</p><p> ok</p><input type="button" value="createElement" οnclick="CreateP()"/><input type="button" value="removeElement" οnclick="removeElement()"/><input type="button" value="ReplaceElement" οnclick="ReplaceElement()"/><input type="button" value="insertElement" οnclick="insertElement()"/></body>
</html>

鼠标放上和离开的样式：

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD><BODY>
<input type="button" value="click Me" style="background-color:white;color:black" οnmοuseοver="this.style.backgroundColor='black';this.style.color='white';" οnmοuseοut="this.style.backgroundColor='white';this.style.color='black'"/>
</BODY>
</HTML>

鼠标放上去的提示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<meta charset="utf-8" /><SCRIPT LANGUAGE="JavaScript">
<!--function showTip(oEvent){//alert(document.documentElement.scrollTop);var oDiv = document.getElementById("divTip1");oDiv.style.visibility ="visible";oDiv.style.left = document.documentElement.scrollLeft+ oEvent.clientX+5;oDiv.style.top = document.documentElement.scrollTop+oEvent.clientY+5;}function hiddenTip(oEvent){var oDiv = document.getElementById("divTip1");oDiv.style.visibility = "hidden";}//-->
</SCRIPT>
</HEAD><BODY><a href="javascript:void(0)"  οnmοuseοver="showTip(event)"
onmouseout = "hiddenTip(event)">click me</a>
<div id="divTip1" style="background-color:Yellow;position:absolute;visibility:hidden;padding:5px;"><span>这是提示<br />提示</span>
</div></BODY>
</HTML>

表格排序：

一、数组排序

例：

var arr = [3,32,5,34];

arr.sort();

alert(arr.toString()); //output “3,32,34,5”

问题：如何实现正确的排序?

一个基本的比较函数:

function comparison_function(value1,value2){

if (value1<value2)

return -1

else if (value1>value2)

return 1

else

return 0

}

//说明：返回1代表升序,返回-1代表降序,返回0代表相等

var arr = [3,32,5,34];

arr.sort(comparison_function);

alert(arr.toString()); //output “3,5,32,34”

如果要降序？

function comparison_function(value1,value2){

if (value1<value2)

return 1

else if (value1>value2)

return -1

else

return 0

}

var arr = [3,32,5,34];

arr.sort(comparison_function);

alert(arr.toString()); //output “34,32,5,3”

ureverse()方法

var arr = [3,32,5,34];

arr.sort(comparison_function);

alert(arr.toString()); //output “34,32,5,3”

//反转

arr.reverse();

alert(arr.toString()); //output “3,5,32,34”

说明：如果数组已经以一种顺序排序了，使用reverse()方法将其按照相反的顺序排序，要比再次调用sort()快得多

三：表格排序

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--

//升序
   function comparisonTRs(oTR1,oTR2){
      var value1 = oTR1.cells[0].firstChild.nodeValue;
      var value2 = oTR2.cells[0].firstChild.nodeValue;
      if (value1<value2)
       return -1
      else if (value1>value2)
       return 1
      else
       return 0
   }
   var sourceHeader = "";
   function SortTable(sTableID,header)
   {

       var oTable = document.getElementById(sTableID);
       var oTBody = oTable.tBodies[0];
       var colDataRows = oTBody.rows;
       var oTRs = new Array();
       for(var i=0;i<colDataRows.length;i++)
       {
          oTRs.push(colDataRows[i]);
       }
       if (!header.sortType)
       {
          //alert("ok");
          sourceHeader = header.innerHTML;
          oTRs.sort(comparisonTRs);
          header.sortType="ASC";
          header.innerHTML=sourceHeader+"↑";
       }else
       {
          oTRs.reverse();
          header.innerHTML=sourceHeader+"↓";
          if (header.sortType=="ASC")
          {
             header.innerHTML=sourceHeader+"↓";
           header.sortType="DESC";
          }else
          {
             header.sortType="ASC";
           header.innerHTML=sourceHeader+"↑";

}
       }

       var oFragment = document.createDocumentFragment();
       for(var i=0;i<oTRs.length;i++)
       {
         oFragment.appendChild(oTRs[i]);
       }
       oTBody.appendChild(oFragment);
   }

//-->
</SCRIPT>
</HEAD>

<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--

//-->
</SCRIPT>
<table border="1" id="table1" width=200>
   <thead>
     <tr>
        <th onclick = "SortTable('table1',this)" style="cursor:pointer">first Name</th>
   </tr>
   </thead>
   <tbody>
       <tr>
          <td>zhang</td>
       </tr>
       <tr>
          <td>wang</td>
       </tr>
       <tr>
          <td>li</td>
       </tr>
       <tr>
          <td>zhaoliu</td>
       </tr>
       <tr>
          <td>aaaa</td>
       </tr>
   </tbody>
</table>

</BODY>
</HTML>

        function SortTable(sTableID){var oTable = document.getElementById(sTableID);var oTBody = oTable.tBodies[0];var colDataRows = oTBody.rows;var oTRs = new Array();for(var i=0;i<colDataRows.length;i++){aTRs.push(colDataRows[i]);}aTRs.sort(comparisonTRs);....}

改进二：

改进二：
function SortTable(sTableID){var oTable = document.getElementById(sTableID);var oTBody = oTable.tBodies[0];var colDataRows = oTBody.rows;var oTRs = new Array();for(var i=0;i<colDataRows.length;i++){oTRs.push(colDataRows[i]);}oTRs.sort(comparisonTRs);var oFragment = document.createDocumentFragment();for(var i=0;i<oTRs.length;i++){oFragment.appendChild(oTRs[i]);}oTBody.appendChild(oFragment);}

实例二：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--function genCompareTo(iCol){return function compareTRs(oTR1,oTR2){var sValue1 = oTR1.cells[iCol].firstChild.nodeValue;var sValue2 = oTR2.cells[iCol].firstChild.nodeValue;return sValue1.localeCompare(sValue2);}}function sortTable(sTableID,header,colindex){var oTable = document.getElementById(sTableID);var oTBody = oTable.tBodies[0];var colDataRows = oTBody.rows;var oTRs = new Array();for(var i=0;i<colDataRows.length;i++){oTRs.push(colDataRows[i]);}if (!header.sortType){oTRs.sort(genCompareTo(colindex));header.sortType="ASC";header.sourceName = header.innerText;header.innerHTML=header.sourceName+"↑";}else{oTRs.reverse();header.innerHTML=header.sourceName+"↓";if (header.sortType=="ASC"){header.innerHTML=header.sourceName+"↓";header.sortType="DESC";}else{header.sortType="ASC";header.innerHTML=header.sourceName+"↑";}}var oFragment = document.createDocumentFragment();for(var i=0;i<oTRs.length;i++){oFragment.appendChild(oTRs[i]);}oTBody.appendChild(oFragment);}
//-->
</SCRIPT>
</HEAD><BODY><p>Click on the table header to sort in ascending order.</p><table border="1" id="tblSort"><thead><tr><th οnclick="sortTable('tblSort',this, 0)" style="cursor:pointer">Last Name</th><th οnclick="sortTable('tblSort',this, 1)" style="cursor:pointer">First Name</th></tr></thead><tbody><tr><td>Smith</td><td>John</td></tr><tr><td>Johnson</td><td>Betty</td></tr><tr><td>Henderson</td><td>Nathan</td></tr><tr><td>Williams</td><td>James</td></tr><tr><td>Gilliam</td><td>Michael</td></tr><tr><td>Walker</td><td>Matthew</td></tr></tbody></table>
</BODY>
</HTML>

表格排序：

1、创建转换函数function convert(sValue,sDataType){switch (sDataType){case "int":return parseInt(sValue);case "float":return parseFloat(sValue);case "date":return new Date(Date.parse(sValue));defaultreturn sValue.toString();}}

2、修改代码：

function genCompareTo(iCol,sDataType){

return function compareTRs(oTR1,oTR2)

{

var sValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue,sDataType);

var sValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue,sDataType);

if (sValue1<sValue2)

{

return -1;

}else if (sValue1>sValue2)

{

return 1;

}else{

return 0;

}

高级排序

问题：

如果表格中出现链接、图像或某种HTML的内容，而用户仍希望对其进行排序。最常见的情况也许就是包含图标的列.

解决方案：

1、候选值

表格中的每个单元格必须包含可排序的值，也就是说至少有一个值属于以下数据类型:字符串、整形、浮点数和日期,因为HTML代码不能直接被转化为这些数据类型，所以需指定一个候选值。可以通过以下方式实现：如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--function convert(sValue,sDataType){switch (sDataType){case "int":return parseInt(sValue);case "float":return parseFloat(sValue);case "date":return Date.parse(sValue);default:return sValue.toString();}}function genCompareTo(iCol,sDataType){return function compareTRs(oTR1,oTR2){var sValue1;var sValue2;if (oTR1.cells[iCol].getAttribute("value")){sValue1 = convert(oTR1.cells[iCol].getAttribute("value"),sDataType);sValue2 = convert(oTR2.cells[iCol].getAttribute("value"),sDataType);}else{sValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue,sDataType);sValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue,sDataType);}if (sValue1<sValue2){return -1;}else if (sValue1>sValue2){return 1;}else{return 0;}}}function sortTable(sTableID,header,colindex,sDataType){var oTable = document.getElementById(sTableID);var oTBody = oTable.tBodies[0];var colDataRows = oTBody.rows;var oTRs = new Array();for(var i=0;i<colDataRows.length;i++){oTRs.push(colDataRows[i]);}if (!header.sortType){oTRs.sort(genCompareTo(colindex,sDataType));header.sortType="ASC";header.sourceName = header.innerText;header.innerHTML=header.sourceName+"↑";}else{oTRs.reverse();header.innerHTML=header.sourceName+"↓";if (header.sortType=="ASC"){header.innerHTML=header.sourceName+"↓";header.sortType="DESC";}else{header.sortType="ASC";header.innerHTML=header.sourceName+"↑";}}var oFragment = document.createDocumentFragment();for(var i=0;i<oTRs.length;i++){oFragment.appendChild(oTRs[i]);}oTBody.appendChild(oFragment);}
//-->
</SCRIPT>
</HEAD><BODY><p>Click on the table header to sort.</p><table border="1" id="tblSort"><thead><tr><th οnclick="sortTable('tblSort',this, 0)" style="cursor:pointer">Type</th><th οnclick="sortTable('tblSort',this, 0)" style="cursor:pointer">Filename</th>                    </tr></thead><tbody><tr><td value="doc"><img src="data:images/wordicon.gif"/></td><td>My Resume.doc</td></tr><tr><td value="xls"><img src="data:images/excelicon.gif"/></td><td>Fall Budget.xls</td></tr><tr><td value="pdf"><img src="data:images/acrobaticon.gif"/></td><td>How to be a better programmer.pdf</td></tr><tr><td value="doc"><img src="data:images/wordicon.gif"/></td><td>My Old Resume.doc</td></tr><tr><td value="txt"><img src="data:images/notepadicon.gif"/></td><td>Notes from Meeting.txt</td></tr><tr><td value="zip"><img src="data:images/zippedfoldericon.gif"/></td><td>Backups.zip</td></tr><tr><td value="xls"><img src="data:images/excelicon.gif"/></td><td>Spring Budget.xls</td></tr><tr><td value="doc"><img src="data:images/wordicon.gif"/></td><td>Job Description - Web Designer.doc</td></tr><tr><td value="pdf"><img src="data:images/acrobaticon.gif"/></td><td>Saved Web Page.pdf</td></tr><tr><td value="doc"><img src="data:images/wordicon.gif"/></td><td>Chapter 1.doc</td></tr></tbody></table>      </body></HTML>

效果：

四：经典的鼠标拖尾

<html><head><title>Simulated Drag And Drop Example</title><script type="text/javascript" src="eventutil.js"></script><script type="text/javascript">function handleMouseMove() {//var oEvent = EventUtil.getEvent();var oEvent = window.event;var oDiv = document.getElementById("div1");oDiv.style.left = oEvent.clientX;oDiv.style.top = oEvent.clientY;}</script><style type="text/css">#div1 {background-color: red;height: 100px;width: 100px;position: absolute;}</style></head><body οnmοusemοve="handleMouseMove()"><p>Try dragging the red square.</p><p><div id="div1"></div> </p></body>
</html>

<body>
<p>Try dragging the red square.</p>
<p><div id="div1" οnmοusedοwn="handleMouseDown()"></div>
</p>
</body><style type="text/css">#div1 {background-color: red;height: 100px;width: 100px;position: absolute;}
</style>var iDiffX=0;
var iDiffY = 0;
function handleMouseDown() {var oEvent = window.event;var oDiv = document.getElementById("div1");iDiffX = oEvent.clientX - oDiv.offsetLeft;iDiffY = oEvent.clientY - oDiv.offsetTop;document.body.attachEvent("onmousemove",handleMouseMove);document.body.attachEvent("onmouseup",handleMouseUp);}
function handleMouseMove() {var oEvent = window.event;var oDiv = document.getElementById("div1");oDiv.style.left = oEvent.clientX - iDiffX;oDiv.style.top = oEvent.clientY - iDiffY;oDiv.style.cursor="move";}function handleMouseUp() {var oDiv = document.getElementById("div1");            document.body.detachEvent("onmousemove",handleMouseMove);          document.body.detachEvent("onmouseup",handleMouseUp);oDiv.style.cursor="default";}

转载于:https://www.cnblogs.com/sunliyuan/p/5869663.html

JavaScriptDom操作与高级应用（八）相关推荐

高级OS(八） - Linux内存映射
高级OS(八) - Linux内存映射一.题目二.解答 1.进入Linux 内核(4.19)源代码, 给出task_struct 结构,mm_struct 结构和 vm_area_struct 结 ...
《Java线程与并发编程实践》—— 1.2 操作更高级的线程任务
本节书摘来异步社区<Java线程与并发编程实践>一书中的第1章,第1.2节,作者: [美]Jeff Friesen,更多章节内容可以访问云栖社区"异步社区"公众号查看. ...
计算机高级筛选操作步骤,计算机操作：高级筛选和透视表(范文).doc
计算机操作:高级筛选和透视表(范文) 第 PAGE \* Arabic 1 页第 PAGE \* Arabic 1 页 37.打开Excel文件夹下的excelgjb.xls工作簿文件,进行如下操作: ...
Abaqus 2016基础操作到高级接触分析视频教程
Abaqus 2016基础操作到高级接触分析视频教程链接:https://pan.baidu.com/s/1Bb1B9m2d0jNW_gs7xzXWXA 提取码:81yn
Django中的ORM操作之高级查询aggregate和annotate方法
Django中的ORM操作之高级查询aggregate和annotate方法 aggregate()方法详解 annotate()方法详解 aggregate和annotate应用场景 Django中 ...
计算机的高级操作,计算机高级操作员考试大纲是什么
全国计算机信息高新技术考试办公软件应用模块高级操作员级考试考试大纲全国计算机信息高新技术考试办公软件应用模块高级操作员的主要考核技能点和分值如下.其中第一.二.四单元的各20题,每题内容不同,技能点 ...
Oracle 学习笔记 14 -- 集合操作和高级子查询
Oracel提供了三种类型的集合操作:各自是并(UNION) .交(INTERSECT). 差(MINUS) UNION :将多个操作的结果合并到一个查询结果中,返回查询结果的并集,自己主动去掉反复的 ...
企业权限管理系统之角色操作资源权限管理(八)
文章目录 (一)角色操作:查询所有角色(流程分析) (二)角色操作:查询所有角色(代码实现) (三)角色操作:添加角色(流程分析) (四)角色操作:添加角色(代码实现) (五)角色操作:角色详情查询 ...
七、PyQt5文件及文件夹操作（高级应用篇）
三.高级应用该部分包括文件及文件夹操作.PyQt5绘图技术.多线程编程.PyQt5程序的打包发布.学完这一部分,能够开发文件流程序.图形图像程序.多线程应用程序等,能够对PyQt5程序进行打包. ( ...

JavaScriptDom操作与高级应用（八）

JavaScriptDom操作与高级应用（八）相关推荐

最新文章

热门文章