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实现无刷新登录
Aug 08 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
Jul 24 Javascript
div模拟选择框示例代码
Nov 03 Javascript
javascript中的if语句使用介绍
Nov 20 Javascript
node.js中的buffer.length方法使用说明
Dec 14 Javascript
微信小程序入门教程
Nov 18 Javascript
js, jQuery实现全选、反选功能
Mar 08 Javascript
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
javascript中神奇的 Date对象小结
Oct 12 Javascript
js 判断一个数字是不是2的n次方幂的实例
Nov 26 Javascript
Angular 向组件传递模板的两种方法
Feb 23 Javascript
React 高阶组件HOC用法归纳
Jun 13 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 Smarty模板生成html文档的方法
2010/04/12 PHP
php实现搜索类封装示例
2016/03/31 PHP
PHP实现用户异地登录提醒功能的方法【基于thinkPHP框架】
2018/03/15 PHP
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
2006/06/26 Javascript
jQuery 使用手册(五)
2009/09/23 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
2010/06/11 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
2013/03/04 Javascript
对于this和$(this)的个人理解
2013/09/08 Javascript
JavaScript splice()方法详解
2020/09/22 Javascript
JavaScript声明变量时为什么要加var关键字
2014/09/29 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
2015/09/07 Javascript
headjs实现网站并行加载但顺序执行JS
2016/11/29 Javascript
javaScript 逻辑运算符使用技巧整理
2017/05/03 Javascript
Vue的土著指令和自定义指令实例详解
2018/02/04 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
2018/06/29 Javascript
Vue实现搜索结果高亮显示关键字
2019/05/28 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
2019/07/10 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
[01:18:21]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
Python3基础之list列表实例解析
2014/08/13 Python
Python格式化css文件的方法
2015/03/10 Python
使用url_helper简化Python中Django框架的url配置教程
2015/05/30 Python
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
python实现发送邮件及附件功能
2021/03/02 Python
python中resample函数实现重采样和降采样代码
2020/02/25 Python
Python HTMLTestRunner可视化报告实现过程解析
2020/04/10 Python
美国婴儿用品店:Babies”R”Us
2017/10/12 全球购物
植树节标语
2014/06/27 职场文书
2014年小学语文工作总结
2014/12/20 职场文书
工作迟到检讨书范文
2015/05/06 职场文书
戒赌保证书
2015/05/11 职场文书
刑事上诉状(无罪)
2015/05/23 职场文书
摩登时代观后感
2015/06/03 职场文书
尼克胡哲观后感
2015/06/08 职场文书
Apache Hudi的多版本清理服务彻底讲解
2022/03/31 Servers