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脚本性能优化注意事项
Nov 18 Javascript
Document 对象的常用方法
Jul 31 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 Javascript
常用的Javascript数据验证插件
Aug 04 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
Apr 10 Javascript
JavaScript 巧学巧用
May 23 Javascript
详解vuex 中的 state 在组件中如何监听
May 23 Javascript
JS+HTML5实现图片在线预览功能
Jul 22 Javascript
mui上拉加载更多下拉刷新数据的封装过程
Nov 03 Javascript
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
vue-cli 项目打包完成后运行文件路径报错问题
Jul 19 Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 02 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中删除变量时unset()和null的区别分析
2011/01/27 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
jQuery入门第一课 jQuery选择符
2010/03/14 Javascript
JS读取cookies信息(记录用户名)
2012/01/10 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
2014/01/31 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
2015/05/25 Javascript
使用AngularJS对路由进行安全性处理的方法
2015/06/18 Javascript
js实现显示当前状态的导航效果代码
2015/08/28 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
2015/11/06 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
2016/06/12 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
Three.js中网格对象MESH的属性与方法详解
2017/09/27 Javascript
原生JS实现 MUI导航栏透明渐变效果
2017/11/07 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
Python sys.argv用法实例
2015/05/28 Python
利用python微信库itchat实现微信自动回复功能
2017/05/18 Python
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
Python Unittest自动化单元测试框架详解
2018/04/04 Python
python计算两个数的百分比方法
2018/06/29 Python
Python3模拟登录操作实例分析
2019/03/12 Python
python中update的基本使用方法详解
2019/07/17 Python
Python英文文章词频统计(14份剑桥真题词频统计)
2019/10/13 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
css3实现书本翻页效果的示例代码
2021/03/08 HTML / CSS
美国著名首饰网站:BaubleBar
2016/08/29 全球购物
美国在线印刷公司:PsPrint
2017/10/12 全球购物
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
中学生学习生活的自我评价
2013/10/26 职场文书
军校大学生个人的自我评价
2014/02/17 职场文书
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL
如何更改Win11声音输出设备?Win11声音输出设备四种更改方法
2022/04/08 数码科技
使用python绘制横竖条形图
2022/04/21 Python
带你了解Java中的ForkJoin
2022/04/28 Java/Android