【JavaScript从入门到精通】十四课 DOM操作高级应用-02

此内容来自开课吧石川微信公众号

表格排序

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

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

【JavaScript从入门到精通】十四课 DOM操作高级应用-02

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

<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</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>
#ul1 {
    background: green;
}

#ul2 {
    background: yellow;
}
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);
    };
};

效果如下:

【JavaScript从入门到精通】十四课 DOM操作高级应用-02

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

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

2.添加到新的父级。

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

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

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

效果如下:

【JavaScript从入门到精通】十四课 DOM操作高级应用-02

点击之后最上方的元素会掉到最下。这样我们实现了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]);
    }
  };
};

效果如下:

【JavaScript从入门到精通】十四课 DOM操作高级应用-02

表单应用

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

现在我们准备一个表单:

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

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

www.qdskill.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考虑的如何周全进行校验,后台也有进行检查的必要——记住一句话,所有来自用户的数据都是不可信的。

如需转载,烦请注明出处:https://www.qdskill.com/javascript/531.html

发表评论

登录后才能评论