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 相关文章推荐
从零开始学习jQuery (八) 插播:jQuery实施方案
Feb 23 Javascript
基于jquery的图片轮播 tab切换组件
Jul 19 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
May 17 Javascript
纯javascript实现四方向文本无缝滚动效果
Jun 16 Javascript
在for循环中length值是否需要缓存
Jul 27 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
Sep 24 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
javascript简单进制转换实现方法
Nov 24 Javascript
BootStrap整体框架之基础布局组件
Dec 15 Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
详解vue 不同环境配置不同的打包命令
Apr 07 Javascript
vue-router 中 meta的用法详解
Nov 01 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
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
php二维数组排序详解
2013/11/06 PHP
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
又一个小巧的图片预加载类
2007/05/05 Javascript
Javascript中的数学函数集合
2007/05/08 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
jQuery 全选/反选以及单击行改变背景色实例
2013/07/02 Javascript
jquery二级导航内容均分的原理及实现
2013/08/13 Javascript
JavaScript 中的日期和时间及表示标准介绍
2013/08/21 Javascript
jQuery控制TR显示隐藏的几种方法
2014/06/18 Javascript
jQuery实现平滑滚动到指定锚点的方法
2015/03/20 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
jquery仿百度百科底部浮动导航特效
2015/08/08 Javascript
JavaScript中的时间处理小结
2016/02/24 Javascript
js 获取当前web应用的上下文路径实现方法
2016/08/19 Javascript
vuejs如何配置less
2017/04/25 Javascript
JavaScript图片处理与合成总结
2018/03/04 Javascript
使用react实现手机号的数据同步显示功能的示例代码
2018/04/03 Javascript
Vue路由history模式解决404问题的几种方法
2018/09/29 Javascript
jQuery.parseJSON()函数详解
2019/02/28 jQuery
Vue将props值实时传递 并可修改的操作
2020/08/09 Javascript
[10:05]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD 选手采访
2021/03/11 DOTA
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
快速排序的四种python实现(推荐)
2019/04/03 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
Python opencv相机标定实现原理及步骤详解
2020/04/09 Python
python super()函数的基本使用
2020/09/10 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
三星加拿大官方网上商店:Samsung CA
2020/12/18 全球购物
一套VC试题
2015/01/23 面试题
技术岗位竞聘演讲稿
2014/05/16 职场文书
药店促销活动总结
2014/07/10 职场文书
授权委托书(完整版)
2014/09/10 职场文书
基于Redis的List实现特价商品列表功能
2021/08/30 Redis
实现一个简单得数据响应系统
2021/11/11 Javascript
php去除数组中为0的元素的实例分析
2021/11/17 PHP