JQuery中數組與字符串(過濾，排序,拆分，合併)

時間 2019-11-18
原文原文鏈接

1.操做數組元素--將數組中的元素轉換爲大寫顯示出來  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <title></title>  
     <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>  
     <script type="text/javascript">  
         $(document).ready(function () {  
     
             var NamePosition = $("#names");  
             var Member = ["Guo Hu", "Lei Hu", "Hunwen Li", "jinghao Liu", "Cheng Fang"];  
             //map()迭代數組中的每一個元素,併爲每一個元素分別調用一次回調函數  
             Member = $.map(Member, function (n,i) { return (i+1+"."+n.toUpperCase()); });  
             $.each(Member, function (index, value) {  
                 NamePosition.append($("<li>" + value + "</li>"));  
             });  
         });  
     </script>  
</head>  
<body>  
<p id="names">  
  
</p>  
</body>  
</html>  
2.刷選數組元素--只顯示長度超過4個字符的名字 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <title></title>  
    <style type="text/css">  
    .All  
    {  
     background-color:Red;   
    }  
    .Part  
    {  
     background-color:Gray;      
    }  
    </style>  
     <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>  
     <script type="text/javascript">  
         $(document).ready(function () {  
             var Member = ["Guo Hu", "Lei Hu", "Hunwen Li", "jinghao Liu", "Cheng Fang"];  
             $('p.All').append(Member.join('<br/>'));  
             //grep()分析數組的全部元素，把不想要的元素過濾掉.  
             Member = $.grep(Member, function (n) { return n.length > 6 });  
             $('p.Part').append(Member.join('<br/>'));  
         });  
     </script>  
</head>  
<body>  
<h3>Member Name</h3>  
<p class="All"></p>  
  
<h3>Filter Member Name</h3>  
<p class="Part"></p>  
</body>  
</html>  
3.字符串數組，數字數組排序

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <title></title>  
    <style type="text/css">  
    .All  
    {  
     background-color:Red;   
    }  
    .Part  
    {  
     background-color:Gray;      
    }  
     .AllNumber  
    {  
     background-color:Blue;   
    }  
    .PartNumber  
    {  
     background-color:Lime;      
    }  
    </style>  
     <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>  
     <script type="text/javascript">  
         $(document).ready(function () {  
             var Member = ["Guo Hu", "Lei Hu", "Hunwen Li", "jinghao Liu", "Cheng Fang"];  
             $('p.All').append(Member.join('<br/>'));  
  
             $('p.Part').append(Member.sort().join('<br/>'));  
  
             var Number = [12, 45, 8, 37, 113];  
             $('p.AllNumber').append(Number.join('<br/>'));  
  
             //a,b兩個值進行比較，大的那個排後  
             Number = Number.sort(function (a, b) {  
                 return a - b;  
             });  
  
             $('p.PartNumber').append(Number.join('<br/>'));  
         });  
     </script>  
</head>  
<body>  
<h3>Member Name</h3>  
<p class="All"></p>  
  
<h3>Filter Member Name</h3>  
<p class="Part"></p>  
  
  
<h3>Number</h3>  
<p class="AllNumber"></p>  
  
<h3>Sort Number</h3>  
<p class="PartNumber"></p>  
</body>  
</html>  
4.拆分數組

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <title></title>  
    <style type="text/css">  
    .All  
    {  
     background-color:Red;   
    }  
    .Part  
    {  
     background-color:Gray;      
    }  
    .Remain  
    {  
     background-color:Green;  
    }  
    </style>  
     <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>  
     <script type="text/javascript">  
         $(document).ready(function () {  
             var Member = ["Guo Hu", "Lei Hu", "Hunwen Li", "jinghao Liu", "Cheng Fang"];  
             $('p.All').append(Member.join('<br/>'));  
             //第一個參數爲索引開始，第二個參數爲刪除多少個，返回前2個成員到Filter數組中  
             var Filter = Member.splice(0, 2);  
  
             $('p.Part').append(Filter.join('<br/>'));  
  
  
             $('p.Remain').append(Member.join('<br/>'));  
         });  
     </script>  
</head>  
<body>  
<h3>Member Name</h3>  
<p class="All"></p>  
  
<h3>Filter Member Name</h3>  
<p class="Part"></p>  
  
<h3>Remain Name</h3>  
<p class="Remain"></p>  
  
  
</body>  
</html>  
5.合併數組

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <title></title>  
    <style type="text/css">  
    .First  
    {  
     background-color:Red;   
    }  
    .Second  
    {  
     background-color:Gray;      
    }  
    .All  
    {  
     background-color:Green;  
    }  
    </style>  
     <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>  
     <script type="text/javascript">  
         $(document).ready(function () {  
             var First = ["Guo Hu", "Lei Hu"];  
             var Second = ["Hunwen Li", "jinghao Liu", "Cheng Fang"];  
             $('p.First').append(First.join('<br/>'));  
  
             $('p.Second').append(Second.join('<br/>'));  
  
             var All = First.concat(Second);  
  
             $('p.All').append(All.join('<br/>'));  
         });  
     </script>  
</head>  
<body>  
<h3>First Member Name</h3>  
<p class="First"></p>  
  
<h3>Seond Name</h3>  
<p class="Second"></p>  
  
  
<h3>Member Name</h3>  
<p class="All"></p>  
  
</body>  
</html>  
6.建立對象數組以及排序

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <title></title>  
    <style type="text/css">  
    .All  
    {  
     background-color:Green;  
    }  
    </style>  
     <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>  
     <script type="text/javascript">  
         $(document).ready(function () {  
             var Students =  
          [  
            {  
                name: "Guo Hu",  
                Role: "Administrator",  
                Email: "Guo Hu@Microsoft.com"  
            },  
            {  
                name: "Lei Hu",  
                Role: "Guest",  
                Email: "Lei Hu@Microsoft.com"  
            },  
            {  
                name: "Junwen Li",  
                Role: "Guest",  
                Email: "JWen Li@Microsoft.com"  
            }  
          ];  
  
             Students = Students.sort(function (a, b) {  
                 if (a.name > b.name) { return 1 };  
                 if (a.name < b.name) { return -1 };  
                 return 0;  
  
             });  
  
             $.each(Students, function (index, value) {  
                 $('p.All').append("<tr><td>" + value.name + "</td><td>" + value.Role + "</td><td>" + value.Email + "</td></tr>");  
  
             });  
         });  
     </script>  
</head>  
<body>  
<h3>Member Name</h3>  
<p class="All"></p>  
  
  
</body>  
</html>