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 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 Javascript
javascript preload&amp;lazy load
May 13 Javascript
基于jQuery的实现简单的分页控件
Oct 10 Javascript
jQuery find和children方法使用
Jan 31 Javascript
javascript关于继承的用法汇总
Dec 20 Javascript
js实现浏览本地文件并显示扩展名的方法
Aug 17 Javascript
webpack+vue.js快速入门教程
Oct 12 Javascript
jquery DataTable实现前后台动态分页
Jun 17 jQuery
Node.js实现文件上传的示例
Jun 28 Javascript
详解如何让Express支持async/await
Oct 09 Javascript
mac中利用NVM管理不同node版本的方法详解
Nov 08 Javascript
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
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图片裁剪与缩放示例(无损裁剪图片)
2017/02/08 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
php+websocket 实现的聊天室功能详解
2020/05/27 PHP
特殊字符、常规符号及其代码对照表
2006/06/26 Javascript
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
Javascript valueOf 使用方法
2008/12/28 Javascript
神奇的7个jQuery 3D插件整理
2011/01/06 Javascript
javascript之querySelector和querySelectorAll使用介绍
2011/12/20 Javascript
JavaScript数值转换的三种方式总结
2014/07/31 Javascript
浅谈Javascript线程及定时机制
2015/07/02 Javascript
浅谈AngularJs指令之scope属性详解
2016/10/24 Javascript
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
解决ie img标签内存泄漏的问题
2017/10/13 Javascript
node前端开发模板引擎Jade的入门
2018/05/11 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
详解vue中v-model和v-bind绑定数据的异同
2020/08/10 Javascript
调试Python程序代码的几种方法总结
2015/04/28 Python
Python回调函数用法实例详解
2015/07/02 Python
Python实现简单的四则运算计算器
2016/11/02 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
python使用wxpy轻松实现微信防撤回的方法
2019/02/21 Python
python处理“
2019/06/10 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
Django用户登录与注册系统的实现示例
2020/06/03 Python
Spanx塑身衣官网:美国知名内衣品牌
2017/01/11 全球购物
希尔顿酒店官方网站:Hilton Hotels
2017/06/01 全球购物
罗兰·穆雷官网:Roland Mouret
2018/09/28 全球购物
eVitamins日本:在线购买折扣维生素、补品和草药
2019/04/04 全球购物
测绘工程个人的自我评价
2013/11/23 职场文书
女大学生自我鉴定
2013/12/09 职场文书
yy结婚证婚词
2014/01/10 职场文书
九年级政治教学反思
2014/02/06 职场文书
2014小学年度工作总结
2014/12/20 职场文书
小学数学教学反思范文
2016/02/16 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
处世之道:关于真诚相待的名言推荐
2019/12/02 职场文书