JQuery中数组与字符串(过滤，排序,拆分，合并)


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>
posted @ 2013-12-18 11:50 {前端开发} 阅读(2820) 评论(0) 编辑收藏举报
刷新页面返回顶部
前端开发

JQuery中 数组与字符串(过滤，排序,拆分，合并)

公告

JQuery中数组与字符串(过滤，排序,拆分，合并)
