数组排序

写在前面：

1.数组的几种排序方法：参考动画 http://jsdo.it/norahiko/oxIy/fullscreen 

2.关于sort排序方法的底层实现研究  参考http://www.zhouhua.info/2015/06/18/quicksort/ 

3.具体实例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8" />
 5     <title>Document</title>
 6     <script type="text/javascript">
 7     window.onload=function ()
 8     {
 9         var oUl1=document.getElementById("ul1");
10         var oUl2=document.getElementById("ul2");
11         var oBtn=document.getElementById("btn");
12         var oUl3=document.getElementById("ul3");
13        
14         oBtn.onclick=function ()
15         {   //把ul1中的元素移动到ul2中去。
16 
17                        /* oUl1.removeChild(oLi[0]);
18                         oUl2.appendChild(oLi[0]);*/    //此方法相当于把第一个li也就是1remove掉，li也就是2变为oLi[0]，appendChild后ul1中2被删除，然后被添加到ul2，此时ul1位3,4而ul2为2，以此类推；
19 
20                       /* var oLi=oUl1.getElementsByTagName("li");
21                        var x = oUl1.removeChild(oLi[0]);
22                         oUl2.appendChild(x); */        //此方法与下面的方法类似，但思路不同。此方法是把child先remove掉存起来再append；下面的方法是先存起来，再进行remove和append。
23 
24                        /* var oLi=oUl1.children[0];   
25                         oUl1.removeChild(oLi);
26                         oUl2.appendChild(oLi);  */
27 
28                         /* var oLi=oUl1.children[0];    
29                         oUl2.appendChild(oLi);*/  //append的作用是1.先把元素从原有父级上删掉 2.添加到新的父级 
30 
31             //把ul1中的元素从最上移动到最下面
32                         /*var oLi=oUl1.children[0];
33                         oUl1.appendChild(oLi);*/
34 
35                         var aLi=oUl3.getElementsByTagName("li");
36                         var arr=[];
37 
38                         for(var i=0;i<aLi.length;i++)  //aLi只是一个元素集合，有length，有[i]，但不是arry，无法使用sort，jion等函数，所以要将aLi中的元素放到一个数组中，然后使用sort函数
39                         {
40                             arr[i]=aLi[i];   
41                         }
42                         arr.sort(function (li1,li2){            //sort函数如何使用，其中的参数li1，li2并未定义，怎么可以直接使用？
43                             var n1=parseInt(li1.innerHTML);     //表单元素用value，其他非输入（表单）类元素用innerHTML，如:div, span,em等
44                             var n2=parseInt(li2.innerHTML);
45                             return n1-n2;
46                         });
47                         for(var j=0;j<aLi.length;j++)
48                         {
49                             oUl3.appendChild(arr[j]);
50                         };
51         };
52     };
53     </script>
54 </head>
55 <body>
56 <ul id="ul1" style="background:red">
57     <li>1</li>
58     <li>2</li>
59     <li>3</li>
60     <li>4</li>
61 </ul>
62 <input id="btn" type="button" value="联通" />
63  <ul id="ul2" style="background=yellow"></ul>  
64  <br>
65  <ul id="ul3">
66       <li>56</li>
67       <li>98</li>
68       <li>23</li>
69       <li>5</li>
70       <li>48</li>
71   </ul> 
72 </body>
73 </html>
View Code

 

posted @ 2016-06-29 15:15  浪浪的拐子  阅读(179)  评论(0)  编辑  收藏  举报