js冒泡

任务:设置随意5个数的数列,用js冒泡排序法使之由小到大排序。

如:[5 3 4 1 2]使之输出为[1 2 3 4 5]。

----------------------------------------------------------------------------------

【解说:何为冒泡排序法】

所谓冒泡排序法,就是对一组数字进行从大到小或者从小到大排序的一种算法。具体方法是,相邻数值两两交换。从第一个数值开始,如果相邻两个数的排列顺序与我们的期望不同,则将两个数的位置进行交换(对调);如果其与我们的期望一致,则不用交换。重复这样的过程,一直到最后没有数值需要交换,则排序完成。一般地,如果有N个数需要排序,则需要进行(N-1)趟起泡,我们以从小到大排序为例来看一下,具体情况如下图所示:

----------------------------------------------------------------------------------

【分析】如何用冒泡排序法对[5, 3, 4, 2, 1]排序?

(要点:比较大小时,第一次比较第1个数和第2个数,第二次比较第2个数和第3个数,以此类推。)

序列:[5, 3, 4, 2, 1]

第一次循环,5>3,则两者交换位置:3,5,4,2,1

   然后,5>4,则两者交换位置:3,4,5,2,1

   然后,5>2,则两者交换位置:3,4,2,5,1

     然后,5>1,则两者交换位置:3,4,2,1,5

  此时,序列变成了[3,4,2,1,5],接下来进行第二个大循环:

第二次循环,3<4,则两者不交换位置:3,4,2,1,5

     然后,4>2,则两者交换位置:3,2,4,1,5

   然后,4>1,则两者交换位置:3,2,1,4,5

  此时,序列变成了[3,2,1,4,5],接下来进行第三个大循环:

第三次循环,3>2,则两者交换位置:2,3,1,4,5

     然后,3>1,则两者交换位置:2,1,3,4,5

  此时,序列变成了[2,1,3,4,5],接下来进行第四个大循环:

  

第四次循环,2>1,则两者交换位置:1,2,3,4,5

  经过4次循环排序,则成功按照由小到大将数字排序完成了。

所以,总共需要4次循环,(i = 0; i < 数列长度; i++)

每次排序时,比较第j个数和j+1个数(j = 0; j < 数列长度 - i; j++)

当第j个数>第j+1个数时,则让两个数换位。

【换位方式】:

当a>b时,想让a和b交换位置,怎么做?

设x,作为中间的过度区。

令x=b,  // 将b的值先存入x中

b=a,   // 将a的值放到b的位置

a=x,   // 将x中存好的b值放到a的位置

则a、b的值交换完成。

--------------------------------------------------------------------------

【程序】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>New Document</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
var array = [5, 3, 4, 2, 1];
var temp = 0;
for (var i = 0; i < array.length; i++)         //设置总循环数
{
    for (var j = 0; j < array.length - i; j++)    //设置每次循环需要排序几次
    {
        if (array[j] > array[j + 1])          //比较第j个和j+1个数,当j>j+1时进行换位
        {
            temp = array[j + 1];
            array[j + 1] = array[j];          //换位过程
            array[j] = temp;
        }
    }
}

for(var i=0;i<array.length;i++){
    document.write(array[i]+" ");            //按现在的顺序输出数列
}
//-->
</script>
</body>
</html>

时间: 2024-10-04 04:27:14

js冒泡的相关文章

Js 冒泡事件阻止

原文:Js 冒泡事件阻止 1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览器实现 .jQuery对这个事件对象进行了必要的扩展,从而在任何浏览器中都能够使用这个属性.通过.target,可以确定DOM中首先接收到事件的元素(即实际被单击的元素).而且,我们知道this引用的是处理事件的DOM元素,所以可以编写下列代码:$(document).ready(function

Atitit. &#160;Js 冒泡事件阻止&#160;事件捕获&#160;&#160;&#160;事件传递 &#160;事件代理

Atitit.  Js 冒泡事件阻止 事件捕获   事件传递  事件代理   1. 事件冒泡1 2. 事件捕获1 3. 同时支持了事件捕获阶段和事件冒泡阶段ddEventListener的第三个参数1 4. 事件代理3 5. 冒泡还是捕获?3 6. Js 冒泡事件阻止3 6.1. 返回false5 7. 事件冒泡 使处理函数有范围较大的触发面积,在“拖拽效果”脚本中是必须的5 8. refe6 8.1.1. 浅谈事件冒泡与事件捕获 - ac黄博客精选 - SegmentFault6   1. 事

Js冒泡事件和捕获事件

js中冒泡事件和捕获事件: 冒泡事件:冒泡事件是从里向外,即是从被绑定元素开始一直向外到达页面的所有祖先元素都会被触发,这 一过程被称为事件冒泡.这个事件从原始元素开始一直冒泡到DOM树的最上层 捕获事件:捕获事件是从页面的最上层到被绑定元素都会触发. IE只支持事件冒泡,不支持事件捕获 冒泡事件和捕获事件的方向是相反的. 形式如下图所示: 一般为浏览器中的元素绑定事件有2种方式: 一.直接在页面元素中进行绑定,此方式采用的是冒泡排序,如: <div id="eventExample&qu

js冒泡事件

一.什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处 理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它 被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window). 打个比方说:你在地方法院要上诉一件案子,如果地方没有处理此类案件的法院,地方相关部门会帮你继续往上级法院上诉,比如从市级到省

js冒泡事件示例

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery - Start Animation</title> <script type="text/javascript" src="js/jquery/jquery-1.7.2.min.js"></script> <script type="

JS冒泡和闭包案例分析

背景: 今天逛网页发现了百度知道上一个有意思的JS问题,提问者的问题事实上蛮简单的,懂点前端开发技术的应该都能实现.提问者的要求:实现子菜单的弹出,菜单共同拥有三级.每级菜单显示时有500毫秒的延迟.然后提问者贴出了他的问题代码. 对别人贴出来的代码.仅仅要不是特别复杂,我都会看一眼. 毕竟程序猿交流,源码是最好的语言,刚開始看他的代码就有点感觉哪里不正确. 后来细致分析了下.发现确实是蛮有意思的. 假设感觉分析过程比較无聊.能够直接看结论. 以下是他的代码: <html> <head&

JS冒泡事件节点

1.事件冒泡:      事件冒泡是从里到外的,它是沿着DOM层次向上冒泡,直达顶部,HTML元素也可以接受冒泡事件.       2.事件捕获:      事件捕获是从外面到里面的,它是从DOM层次的顶部下降到底部,事件捕获也可以window级的事件,但是需要显示指定      3.DOM事件流:      DOM同时支持事件捕获和事件冒泡,但是事件捕获优先发生,两个事件流可以遍历DOM中的所有对象,起点和结束点为document对象.      另外DOM事件模型中的一个特色是(文本节点也可

js冒泡事件小解

何为冒泡事件?简单来说事件就像一个水里的泡泡,先触发当前对象再触发其父元素,然后是父元素的父元素... eg: <div class="out" onclick= "alert('out')">       <div class="middle" onclick= "alert('middle')">            <input class="inner" type=&

js冒泡事件的特例toggle无法实现阻止冒泡——slideDown()和slideUp()

一.问题 题目及答案展示:要求,点击题目,展开答案.如下: 展开前 展开后 最开始使用的toggle方法来实现 $(".content_problem").toggle( function(){ $(this).find(".answer").slideDown(); }, function(){ $(this).find(".answer").slideUp(); } ); 这个很容易实现效果,但是导致“删除”按钮无法点击,因为冒泡事件. 我尝