专业编程基础技术教程

网站首页 > 基础教程 正文

「JavaScript从入门到精通」 DOM操作高级应用-02

ccvgpt 2024-08-02 11:53:39 基础教程 14 ℃

表格排序

接下来我们希望用DOM来实现一个很常见的排序功能。我们之前曾经讲过数组的排序，而在这里我们如果想对数组进行排序，依然是通过数组来完成。

现在我们将前面的表格顺序打乱：

「JavaScript从入门到精通」 DOM操作高级应用-02

为了让我们的表格按照ID重新排序，我们应该怎么办呢？这里我们先来看另一个给li元素排序的例子。在页面中放置两个ul列表，通过点击按钮将上面ul列表中的li移动到下方，这个例子可以通过前面我们操纵DON元素的各种方法轻易实现：

<html>
 <head>
 <meta charset="utf-8">
 <title>无标题文档</title>
 <style>
 #ul1 {background:green;}
 #ul2 {background:yellow;}
 </style>
 <script>
 window.onload=function ()
 {
 var oUl1=document.getElementById('ul1');
 var oUl2=document.getElementById('ul2');
 var oBtn=document.getElementById('btn1');
 oBtn.onclick=function ()
 {
 var oLi=oUl1.children[0];
 oUl1.removeChild(oLi);
 oUl2.appendChild(oLi);
 };
 };
 </script>
 </head>
 <body>
 <ul id="ul1">
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 </ul>
 <input id="btn1" type="button" value="移动" />
 <ul id="ul2">
 </ul>
 </body>
</html>

效果如下：

现在我们将函数里的oUl1.removeChild(oLi)这个步骤去掉，会发生什么呢？实际上，这个函数不会发生任何变化，和刚才效果一样。实际上appendChild的完整功能是：

1.先把元素从原有父级删掉。

2.添加到新的父级。

之前我们添加的元素都是新创建出来的，没有父级，因此没有强调过这一点，但实际上appendChild的完整功能是用于移动元素而不是单纯的添加元素。

现在我们来修改这段代码：删去ul2，直接将获取的元素添加到ul1本身上，这样会发生什么呢？

<script>
window.onload=function ()
{
var oUl1=document.getElementById('ul1');
var oBtn=document.getElementById('btn1');
oBtn.onclick=function ()
{
var oLi=oUl1.children[0];
oUl1.appendChild(oLi);
};
};

效果如下：

点击之后最上方的元素会掉到最下。这样我们实现了li在ul内的移动。接下来我们就要开始实现排序功能了。我们用随机数字代替li里的内容，并希望通过点击使得它们按照从大到小的顺序排列。具体的思路为，我们先在所有li中最小的一个数，将其移动到末尾；接着，再在剩下的数里继续寻找最小的数，放在末尾，直到寻找为所有数为止。

window.onload=function ()
{
var oUl1=document.getElementById('ul1');
var oBtn=document.getElementById('btn1');
oBtn.onclick=function ()
{
var aLi=oUl1.getElementsByTagName('li');
//aLi.sort();
var arr=[];
for(var i=0;i<aLi.length;i++)
{
arr[i]=aLi[i];
}
arr.sort(function (li1, li2){
var n1=parseInt(li1.innerHTML);
var n2=parseInt(li2.innerHTML);
return n1-n2;
});
//alert(arr[0].innerHTML);
for(var i=0;i<arr.length;i++)
{
alert('该把'+arr[i].innerHTML+'插入到最后');
oUl1.appendChild(arr[i]);
}
};
};

同样的，我们可以利用这个方法对我们的表格进行排序：

window.onload=function ()
{
var oTab=document.getElementById('tab1');
var oBtn=document.getElementById('btn1');
oBtn.onclick=function ()
{
var arr=[];
for(var i=0;i<oTab.tBodies[0].rows.length;i++)
{
arr[i]=oTab.tBodies[0].rows[i];
}
arr.sort(function (tr1, tr2){
var n1=parseInt(tr1.cells[0].innerHTML);
var n2=parseInt(tr2.cells[0].innerHTML);
return n1-n2;
});
for(var i=0;i<arr.length;i++)
{
oTab.tBodies[0].appendChild(arr[i]);
}
};
};

效果如下：

表单应用

表单也是JS中一个非常重要的组成部分，它可以向服务器提交数据，例如用户注册等，表单的action属性代表了表单的数据将会提交到的地址。表单也拥有很多的事件，其中两个很重要的事件就是onsubmit事件和onreset事件。

现在我们准备一个表单：

<html>
 <head>
 <meta charset="utf-8">
 <title>
 无标题文档
 </title>
 </head>
 <body>
 <form id="form1" action="http://www.zhinengshe.com/">
 用户名：<input type="text" name="user"><br>
 密码：<input type="password" name="pass"> <input type="submit"> <input type="reset">
 </form>
 </body>
</html>

其中name用于后台查找元素，类似于前台的id。点击提交，可以看到转到的网址变为了：

www.zhinengshe.com/?user=blue&pass=123456。这样我们就把信息提交到了该网页。现在我们给表单添加一个onsubmit事件和一个onreset事件。

window.onload=function ()
{
var oForm=document.getElementById('form1');
oForm.onsubmit=function ()
{
alert(' aaa');
};
oForm.onreset=function ()
{
alert('bbbbbb');
};
};

这两个事件分别代表了：当点击提交时发生的事件和当重置时发生的事件。可以看到我们给form添加的两个按钮submit和reset，他们分别代表了提交表单和重置表单的所有数据，而当点击他们时就会触发这两个事件。

表单内容验证

目前我们还没有学习事件，因此无法做具体的表单验证，这里给大家讲解的是表单验证的几种方法。

  • 阻止用户输入非法字符（阻止事件）

  • 输入时、失去焦点时认证（onkeyup、onblur）

  • 提交时检查（onsubmit）

  • 后台数据检查

其中前三种方法都是通过js完成。但无论我们的js考虑的如何周全进行校验，后台也有进行检查的必要——记住一句话，所有来自用户的数据都是不可信的。

我是石川（Blue），如果你觉得我的文章还不错，请多帮我推荐给你的朋友，多谢了。

作者简介；简介：前阿里巴巴高级技术经理，现开课吧技术学院院长。精通C/C++、Java、Python、前端开发等多种开发技术，曾参与淘宝网的早期建设和优化，拥有丰富的企业级系统开发经验，对HTML5移动端互联网技术及生态体系有深厚的造诣。

想了解更多前端知识，可以查看文章下面的评论。

Tags：

猜你喜欢

最近发表
标签列表