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 相关文章推荐
Javascript面向对象编程(三) 非构造函数的继承
Aug 28 Javascript
jquery 添加节点的几种方法介绍
Sep 04 Javascript
让浏览器DOM元素最后加载的js方法
Jul 29 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
Dec 03 Javascript
简单实现js无缝滚动效果
Feb 05 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
form表单序列化详解(推荐)
Aug 15 Javascript
详解vue项目中使用token的身份验证的简单实践
Mar 08 Javascript
es6 filter() 数组过滤方法总结
Apr 03 Javascript
Vue使用watch监听一个对象中的属性的实现方法
May 10 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
Jul 24 Javascript
vue下拉刷新组件的开发及slot的使用详解
Dec 23 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
PHP实现恶意DDOS攻击避免带宽占用问题方法
2015/05/27 PHP
PHP实现会员账号单唯一登录的方法分析
2019/03/07 PHP
Laravel使用swoole实现websocket主动消息推送的方法介绍
2019/10/20 PHP
一步一步教你写一个jQuery的插件教程(Plugin)
2009/09/03 Javascript
Google Maps API地图应用示例分享
2014/10/23 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
JavaScript之WebSocket技术详解
2016/11/18 Javascript
微信小程序-消息提示框实例
2016/11/24 Javascript
js设置文字颜色的方法示例
2016/12/30 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
基于JS实现前端压缩上传图片的实例代码
2019/05/14 Javascript
nodejs提示:cross-device link not permitted, rename错误的解决方法
2019/06/10 NodeJs
javascript触发模拟鼠标点击事件
2019/06/26 Javascript
VUE中V-IF条件判断改变元素的样式操作
2020/08/09 Javascript
[02:42]决战东方!DOTA2亚洲邀请赛重启荣耀之争
2017/03/17 DOTA
python实现用户登录系统
2016/05/21 Python
在Python的Flask中使用WTForms表单框架的基础教程
2016/06/07 Python
Python实现嵌套列表去重方法示例
2017/12/28 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
python 实现将多条曲线画在一幅图上的方法
2019/07/07 Python
Python3 itchat实现微信定时发送群消息的实例代码
2019/07/12 Python
Python多叉树的构造及取出节点数据(treelib)的方法
2019/08/09 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
年终自我鉴定
2013/10/09 职场文书
护士自荐信
2013/10/25 职场文书
项目合作协议书
2014/04/16 职场文书
阳光体育活动总结
2014/04/30 职场文书
不服从上级领导安排的检讨书
2014/09/14 职场文书
银行员工犯错检讨书
2014/09/16 职场文书
社区好人好事材料
2014/12/26 职场文书
工作收入证明模板
2015/06/12 职场文书
初中班主任教育随笔
2015/08/15 职场文书
golang gopm get -g -v 无法获取第三方库的解决方案
2021/05/05 Golang
关于python3 opencv 图像二值化的问题(cv2.adaptiveThreshold函数)
2022/04/04 Python