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 相关文章推荐
html中的input标签的checked属性jquery判断代码
Sep 19 Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
Apr 23 Javascript
JavaScript中连接操作Oracle数据库实例
Apr 02 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
Aug 26 Javascript
jQuery实现选项卡切换效果简单演示
Dec 09 Javascript
JavaScript cookie详解及简单实例应用
Dec 31 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
Apr 07 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
Aug 11 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 Javascript
vscode下vue项目中eslint的使用方法
Jan 13 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
Aug 07 Javascript
react实现复选框全选和反选组件效果
Aug 25 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中的超全局变量
2006/10/09 PHP
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
PHP简单操作MongoDB的方法(安装及增删改查)
2016/05/26 PHP
Javascript里使用Dom操作Xml
2006/09/20 Javascript
javascript编程起步(第七课)
2007/02/27 Javascript
JQuery读取XML文件数据并显示的实现代码
2009/12/16 Javascript
js null undefined 空区别说明
2010/06/13 Javascript
从零开始学习jQuery (二) 万能的选择器
2010/10/01 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
使用pjax实现无刷新更改页面url
2015/02/05 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
2020/09/22 Javascript
JS实现多功能计算器
2020/10/28 Javascript
使用Python下载Bing图片(代码)
2013/11/07 Python
Windows下Eclipse+PyDev配置Python+PyQt4开发环境
2016/05/17 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
Python3实现取图片中特定的像素替换指定的颜色示例
2019/01/24 Python
Scrapy-Redis结合POST请求获取数据的方法示例
2019/05/07 Python
numpy ndarray 取出满足特定条件的某些行实例
2019/12/05 Python
Tensorflow实现部分参数梯度更新操作
2020/01/23 Python
python 实时调取摄像头的示例代码
2020/11/25 Python
在css3中background-clip属性与background-origin属性的用法介绍
2012/11/13 HTML / CSS
浅谈CSS3 box-sizing 属性 有趣的盒模型
2019/04/02 HTML / CSS
canvas实现滑动验证的实现示例
2020/08/11 HTML / CSS
凯特王妃父母建立的派对用品网站:Party Pieces
2017/05/28 全球购物
男性健康日的活动方案
2014/08/18 职场文书
小升初自荐信范文
2015/03/05 职场文书
2015年餐厅服务员工作总结
2015/04/23 职场文书
2016年先进班集体事迹材料
2016/02/26 职场文书
CSS3 制作的悬停缩放特效
2021/04/13 HTML / CSS
UNION CREATIVE《Re:从零开始的异世界生活》雷姆手办
2022/03/20 日漫
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python
Python中文分词库jieba(结巴分词)详细使用介绍
2022/04/07 Python