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 相关文章推荐
js 判断浏览器使用的语言示例代码
Mar 22 Javascript
利用javascript实现全部删或清空所选的操作
May 27 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
Jan 13 Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 Javascript
微信公众号 客服接口的开发实例详解
Sep 28 Javascript
jQuery联动日历的实例解析
Dec 02 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
Mar 14 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
使用命令行工具npm新创建一个vue项目的方法
Dec 27 Javascript
详解Node.js一行命令上传本地文件到服务器
Apr 22 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 Javascript
js实现圆形显示鼠标单击位置
Feb 11 Javascript
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
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
php基于dom实现读取图书xml格式数据的方法
2017/02/03 PHP
JavaScript游戏之是男人就下100层代码打包
2010/11/08 Javascript
基于jquery的滑动样例代码
2010/11/20 Javascript
IE6、IE7中获取Button元素的值的bug说明
2011/08/28 Javascript
页面使用密码保护代码
2013/04/10 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
2015/06/23 Javascript
Javascript之String对象详解
2016/06/08 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
2017/01/10 Javascript
Angular.js基础学习之初始化
2017/03/10 Javascript
深入理解javascript prototype的相关知识
2019/09/19 Javascript
JS数组splice操作实例分析
2019/10/12 Javascript
微信小程序加载机制及运行机制图解
2019/11/27 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
用JavaScript实现贪吃蛇游戏
2020/10/23 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
[01:15:18]2014 DOTA2国际邀请赛中国区预选赛 LGD VS Speed Gaming.cn
2014/05/22 DOTA
[00:20]DOTA2荣耀之路7:-ah fu-抢盾
2018/05/31 DOTA
netbeans7安装python插件的方法图解
2013/12/24 Python
在Python的Flask中使用WTForms表单框架的基础教程
2016/06/07 Python
python3音乐播放器简单实现代码
2020/04/20 Python
python中利用Future对象异步返回结果示例代码
2017/09/07 Python
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
python实现flappy bird游戏
2018/12/24 Python
python常用函数与用法示例
2019/07/02 Python
Python实现平行坐标图的两种方法小结
2019/07/04 Python
Python栈的实现方法示例【列表、单链表】
2020/02/22 Python
Python基于类路径字符串获取静态属性
2020/03/12 Python
岗位竞聘演讲稿
2014/01/10 职场文书
报效祖国演讲稿
2014/09/15 职场文书
学习普通话的体会
2014/11/07 职场文书
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL
在SQL Server中使用 Try Catch 处理异常的示例详解
2022/07/15 SQL Server