jQuery实现的简单排序功能示例【冒泡排序】


Posted in Javascript onJanuary 13, 2017

本文实例讲述了jQuery实现的简单排序功能。分享给大家供大家参考,具体如下:

这里演示的冒泡排序, 通过不断的循环找出最小的值,放到新的数组中。每次循环后都将指针指向下一个元素。直到两层循环都结束。

index.html:

<html>
<head>
 <title>Sort</title>
 <meta content="text/html" charset="utf-8">
 <script type="text/javascript" language="javascript" src="js/jquery-1.10.2.js"></script>
 <script type="text/javascript" language="javascript">
  $(function(){
   var Sort={};
   (function(Sort){
    Sort.initData={
     toSortArr:[]
    };
    Sort.methods=(function(){
     var tmp='';
     return {
      init:function(){
       //
      },
      pushData:function(arr){
       for(var i in arr){
        Sort.initData.toSortArr.push(arr[i]);
       }
      },
      getData:function(){
       return Sort.initData.toSortArr;
      },
      sortData:function(arr){
       var tmpArr=new Array();
       var tmpNumArr=new Array();
       var tmpCharArr=new Array();
       var tmpOtherArr=new Array();
       for(var i in arr){
        var at=arr[i].charCodeAt(0);
        if( at>=48 && at<=57 ){
         tmpNumArr.push(arr[i]);
        }else{
         if(at>=65 && at<=122 ){
          tmpCharArr.push(arr[i]);
         }else{
          tmpOtherArr.push(arr[i]);
         }
        }
       }
       tmpNumArr=Sort.methods.getSort(tmpNumArr);
       tmpCharArr=Sort.methods.getSort(tmpCharArr);
       tmpOtherArr=Sort.methods.getSort(tmpOtherArr);
       tmpArr=Sort.methods.restoreArr(tmpArr,tmpNumArr);
       tmpArr=Sort.methods.restoreArr(tmpArr,tmpCharArr);
       tmpArr=Sort.methods.restoreArr(tmpArr,tmpOtherArr);
       return tmpArr;
      },
      getSort:function(arr){
       for(var i=0;i<arr.length;i++){
        for(var j=i;j<arr.length;j++){
         if(arr[i]>arr[j]){
          var tmp=arr[i];
          arr[i]=arr[j];
          arr[j]=tmp;
         }
        }
       }
       return arr;
      },
      restoreArr:function(tmpArr,arr){
       for(var i=0;i<arr.length;i++){
        tmpArr.push(arr[i]);
       }
       return tmpArr;
      }
     }
    })();
   })(Sort);
   var tmpArr=new Array();
   tmpArr.push('zfsd');
   tmpArr.push('qwerewtrer');
   tmpArr.push('fxdfhk');
   tmpArr.push('123');
   tmpArr.push('ssjdf');
   tmpArr.push('kl;');
   tmpArr.push('我的;');
   tmpArr.push('sdg');
   tmpArr.push('rt');
   Sort.methods.pushData(tmpArr);
   var t=Sort.methods.sortData(tmpArr);
   console.log(tmpArr);
   console.log(t);
  });
 </script>
</head>
<body>
<input id="myFormFlow" type="button" value="进入表单填写">
</body>
</html>

此排序的核心代码:

var arr=new Array();
for(var i=0;i<arr.length;i++){
 for(var j=i;j<arr.length;j++){
  if(arr[i]>arr[j]){
   var tmp=arr[i];
   arr[i]=arr[j];
   arr[j]=tmp;
  }
 }
}

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
onkeyup,onkeydown和onkeypress的区别介绍
Oct 21 Javascript
jQuery学习笔记之jQuery中的$
Jan 19 Javascript
第七章之菜单按钮图标组件
Apr 25 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 Javascript
jQuery插件autocomplete使用详解
Feb 04 Javascript
为什么我们要做三份 Webpack 配置文件
Sep 18 Javascript
jQuery响应滚动条事件功能示例
Oct 14 jQuery
详解Vue如何支持JSX语法
Nov 10 Javascript
JS正则表达式常见用法实例详解
Jun 19 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
Mar 10 Javascript
js实现页面导航层级指示效果
Aug 25 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
js实现淡入淡出轮播切换功能
Jan 13 #Javascript
js仿百度音乐全选操作
Jan 13 #Javascript
js实现tab选项卡切换功能
Jan 13 #Javascript
js制作可以延时消失的菜单
Jan 13 #Javascript
原生js实现下拉框功能(支持键盘事件)
Jan 13 #Javascript
js实现自动轮换选项卡
Jan 13 #Javascript
Javascript 使用ajax与C#获取文件大小实例详解
Jan 13 #Javascript
You might like
第十四节 命名空间 [14]
2006/10/09 PHP
解析:php调用MsSQL存储过程使用内置RETVAL获取过程中的return值
2013/07/03 PHP
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
php实现utf-8转unicode函数分享
2015/01/06 PHP
简单谈谈PHP中strlen 函数
2016/02/27 PHP
php处理静态页面:页面设置缓存时间实例
2017/06/22 PHP
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
关于js获取radio和select的属性并控制的代码
2011/05/12 Javascript
jquery实现div拖拽宽度示例代码
2013/07/31 Javascript
Jquery chosen动态设置值实例介绍
2013/08/08 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
2014/09/02 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
2015/10/24 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
jQuery事件对象总结
2016/10/17 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
2018/07/27 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
2018/08/07 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
2018/10/09 Javascript
javascript删除数组元素的七个方法示例
2019/09/09 Javascript
Vue.js组件props数据验证实现详解
2019/10/19 Javascript
vue实现页面切换滑动效果
2020/06/29 Javascript
从零学python系列之从文件读取和保存数据
2014/05/23 Python
Python数据类型详解(三)元祖:tuple
2016/05/08 Python
Python使用SQLite和Excel操作进行数据分析
2018/01/20 Python
Django中的Signal代码详解
2018/02/05 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
Python datetime和unix时间戳之间相互转换的讲解
2019/04/01 Python
Django实现简单网页弹出警告代码
2019/11/15 Python
python matlab库简单用法讲解
2020/12/31 Python
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
个人主要事迹材料
2014/08/26 职场文书
检查机关党的群众路线个人整改措施
2014/10/04 职场文书
2015年大学辅导员工作总结
2015/05/12 职场文书
感谢信的技巧及范例
2019/05/15 职场文书
2019年新郎保证书3篇
2019/10/17 职场文书
Oracle 临时表空间SQL语句的实现
2021/09/25 Oracle
《月歌。》宣布制作10周年纪念剧场版《RABBITS KINGDOM THE MOVIE》
2022/04/02 日漫