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

最新推荐文章于 2021-11-02 11:03:40 发布
最新推荐文章于 2021-11-02 11:03:40 发布
阅读量2.5w 收藏 10
点赞数
分类专栏： JQuery 文章标签： jquery function xhtml class filter html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ws_hgo/article/details/6634945
版权 
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>


 

ws_hgo
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery如何把数组变为字符串传到服务端并处理
10-26
在本文中，我们将探讨如何使用jQuery将数组转换为字符串，以便将其发送到服务器进行处理，以及服务器端如何接收和解析这些数据。 首先，jQuery提供了多种方法将数组转换为字符串。一个常见的做法是使用`toString()`...
js数组与字符串常用方法总结
11-30
最近在梳理js的基础，首先从数组和字符串开始。 string 常用方法： 1.substring(start开始位置的索引,end结束位置索引) 截取的位置不包含结束位置的字符,只写一个参数表示从开始位置截取到最后 var str='abcdefg';...
jquery分割字符串的方法
10-24
主要介绍了jquery分割字符串的方法,涉及jQuery中使用split方法进行字符串分割的相关技巧,需要的朋友可以参考下
JQuery 分割字符串
weixin_30701521的博客
10-09 892
JQuery 分割字符串 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.m...
jQuery 字符串排序
testspring1的博客
01-08 3130
var  date=['2017-11-11','2017-11-12','2017-11-13'] date.sort();
利用jQuery来对字符串数组和数值数组排序
sinat_36841379的博客
02-21 5546
1.首先我们对字符串数组进行排序，对字符串数组进行排序就比较简单，关键在于使用一个叫sort()的函数。 接下来我们先举个例子： A B 我们会将在.origin里面放置原始的字符串数组，在.end中放置排序后的字符串数组。 $(document).ready(function(){ var members=["John","Steve","Ben","Damon","Ian"];
jq拆分字符串
weixin_48778400的博客
11-02 898
//按照回车 , ; ， ； 拆分 function foo(str){ var temp = str.split(/[\n,\n;\n，\n；]/g); for(var i =0;i<temp.length;i++){ if(temp[i] == ""){ temp.splice(i, 1); //删除数组索引位置应保持不变 i--; } } return temp
jquery数组过滤筛选方法grep()简介
10-25
在实际开发中，grep()方法常常与jQuery的其他数组操作方法结合使用，如map()、each()等，以实现更复杂的数据处理任务。了解并熟练掌握grep()方法，对于提升JavaScript和jQuery编程技能至关重要。
Jquery解析json字符串及json数组的方法
10-24
主要介绍了Jquery解析json字符串及json数组的方法,实例分析了jQuery操作json格式字符串与数组的相关技巧,需要的朋友可以参考下
jQuery拆分字符串 split()并且遍历$.each()
deideidei13的博客
05-15 4万+
字符串名.split(separator,howmany)separator 必需。字符串或正则表达式，从该参数指定的地方分割 stringObject。howmany 可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。该方法会得到一个字符串数组...
jquery(split分割)
09-09
jquery实现split分割，这个问题我刚写的时候就很头疼，不过解决了哈哈，供大家参考哦
js jq分割字符串并延时加载到页面元素
lifushan123的专栏
01-05 960
直接解析 Lifushan`s .zone{font-size:14px;float:left;max-width:200px;border:1px solid gray;margin:35px;padding:10px} .pic{width:180px;} .admin{color:black} $().ready(functi
Jquery 中使用split分割字符串
NYHongHong的博客
10-07 2260
创建一个html文件 创建一个img标签 并添加图片背景 路径为下 <img src="img/blue_two_big.jpg"/> 创建一个button按钮来获取点击事件 js代码为 $("#click").click(function(){ var src=$("img").attr("src"); alert(sr...
jQuery截取字符串的几种方式
热门推荐
Megamind_HL的博客
01-08 14万+
在我们写前端JS代码的时候，我们会遇到只需要其中部分字符串的时候，下面我就提供集中截取字符串的方法： 1.取后缀 var fileDir = $("#file").val(); var suffix = fileDir.substr(fileDir.lastIndexOf(".")); //suffix 就是后缀； 2.函数：Join() //该函数是使用您选择的分隔符将一个...
python支持complex_Python标准库内置函数complex介绍
weixin_39548968的博客
11-28 132
from:http://www.jb51.net/article/57798.htm本函数可以使用参数real + imag*j方式创建一个复数。也可以转换一个字符串的数字为复数；或者转换一个数字为复数。如果第一个参数是字符串，第二个参数不用填写，会解释这个字符串且返回复数；不过，第二个参数不能输入字符串方式，否则会出错。real和imag参数可以输入数字，如果imag参数没有输入，默认它就是零值...
jq 字符串拼接数据
wpf_China的博客
08-31 835
var listHtml = ""; //获取数据 拼接 $.each(data,function(idx.el){ listHtml += '<ul><li>' + data.tagName + '</li><li οnclick=relaxLabel("' + data.tagId + '")></li></ul>'; }) //页面渲染 $("#tagListDiv").html(listHtml); ...
jquery 实现的省市区级联,无ajax
圣彼得堡之光的专栏
03-22 2万+
转自：http://blog.csdn.net/kituq520/article/details/6564230   以下是页面代码 #foreach($data in $conAddressBean.provinceCode) #end #foreach($data in $conAddressBean.cityCode) #end #foreach(
JQUERY拼接数组
思维小刀
06-06 2308
定义一个一维数组 一个一个的进行填充字符串（id+quantity） 通过遍历进行填充！ var data = []; $(".order_list li").each( function(){ var tmp_book_id = $(this).attr("data"); var tmp_quantity = $(this).attr("data-quantity");...
jquery数组转字符串
最新发布
08-09
- *3* [Jquery中数组转字符串,c:foreach自动将带","字符串进行拆分赋值](https://blog.csdn.net/weixin_30481087/article/details/102073815)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630",...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值