引言

这周暂时没有任务下达，所以老大给我的任务就是熟悉jquery相关插件，我就先选择了jquery UI插件，以及jquery库学习。

我用了两天的时候熟悉Interactions模块中的Draggable功能，并跟随练习，写这篇博文就是想记录下自己的心得体会。

正文：Draggable(拖拽)

1、默认配置：就是简单的一行代码：$( "#目标元素Id" ).draggable();

<title>jqeruy UI 拖拽练习--默认配置</title>

<!--导入jquery插件-->

<script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script>

<!--导入jqueryUI插件-->

<script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>

<link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/>

<!--自写脚本-->

<script type="text/javascript" language="javascript">

   //在页面加载完之后加载jquery

   $().ready(function(e) {

      //拖拽函数

      $('#draggable').draggable();

});

</script>

<!--自写脚本-->

<style type="text/css">

  #draggable

  {

      width:150px;

      height:150px;

  }

</style>

</head>

<body>

<div id="draggable" class="ui-widget-content">

   <p>您可以四处随便拖拽我！</p>

</div>

</body>

效果是可以四处随便拖拽

2、自动滚动：scroll设置为true，表示启用滚动条跟随；scrollSensitivity和scrollSpeed是设置滚动条跟随速度的效果

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>jqeruy UI 拖拽练习--滚动条自动滚动</title>

 <!--导入jquery插件-->

 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script>

 <!--导入jqueryUI插件-->

 <script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>

 <link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/>

 <!--自写脚本-->

 <script type="text/javascript" language="javascript">

    //在页面加载完之后加载jquery

    $().ready(function(e) {

       //拖拽函数,这样配置只是控制了垂直滚动条（这个可以通过设置scroll为false测试知道)

       $('#draggable').draggable({ scroll:true});

       $('#draggable1').draggable({scroll:true,scrollSensitivity:100});

       $('#draggable2').draggable({scroll:true,scrollSpeed:100});

 });

 </script>

 <!--自写脚本-->

 <style type="text/css">

   #draggable,#draggable1,#draggable2

   {

       width:200px;

       height:200px;

       float:left;

       margin:5px;

   }

 </style>

 </head>

 <body>

 <div id="draggable" class="ui-widget-content">

  <p>Scroll属性设置为true,其他默认</p>

 </div>

 <div id="draggable1" class="ui-widget-content">

  <p>Scroll属性设置为true,scrollSensitivity属性设置为100,其他默认</p>

 </div>

 <div id="draggable2" class="ui-widget-content">

  <p>Scroll属性设置为true,scrollSpeed属性设置为100,其他默认</p>

 </div>

 <div style="height: 5000px; width: 1px;"></div>

 </body>

效果是滚动条自动跟随

3、移动限制：axis是控制移动方向的属性；containment是控制元素移动范围的属性

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>jqeruy UI 拖拽练习--移动限制</title>

 <!--导入jquery插件-->

 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script>

 <!--导入jqueryUI插件-->

 <script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>

 <link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/>

 <!--自写脚本-->

 <script type="text/javascript" language="javascript">

    //在页面加载完之后加载jquery

    $().ready(function(e) {

       //拖拽函数

       $('#draggable').draggable({ axis:"y"});

       $('#draggable2').draggable({axis:"x"});

       $('#draggable3').draggable({containment:"#containment-wrapper",scroll:false});

       $('#draggable5').draggable({containment:"parent"});

 });

 </script>

 <!--自写脚本-->

 <style type="text/css">

   .draggable { width: 190px; height: 190px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }

   #draggable, #draggable2 { margin-bottom:20px; }

   #draggable { cursor: n-resize; }

   #draggable2 { cursor: e-resize; }

   #containment-wrapper { width: 95%; height:350px; border:2px solid #ccc; padding: 10px; }

   h3 { clear: left; }

 </style>

 </head>

 <body>

 <h3>限制运动方向:</h3>

 <div id="draggable" class="draggable ui-widget-content">

 <p>我只能在<b>垂直方向</b>拖拽</p>

 </div>

 <div id="draggable2" class="draggable ui-widget-content">

 <p>我只能在<b>水平方向</b>拖拽</p>

 </div>

 <h3>或只能在一个元素中拖拽:</h3>

 <div id="containment-wrapper">

 <div id="draggable3" class="draggable ui-widget-content">

 <p>我被限制在这个框中拖拽</p>

 </div>

 <div class="draggable ui-widget-content">

 <p id="draggable5" class="ui-widget-header">我被限制在父级框中拖拽</p>

 </div>

 </div>

 </body>

效果是可以控制元素的移动方向和移动范围

4、光标样式：cursor设置光标样式；cursorAt设置鼠标位置

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>jqeruy UI 拖拽练习--光标样式</title>

 <!--导入jquery插件-->

 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script>

 <!--导入jqueryUI插件-->

 <script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>

 <link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/>

 <!--自写脚本-->

 <script type="text/javascript" language="javascript">

    //在页面加载完之后加载jquery

    $().ready(function(e) {

       //拖拽函数

       $('#draggable_cursor_center').draggable({ cursor:"move",cursorAt:{top:56,left:56}});

       $('#draggable_cursor_leftup').draggable({cursor:"corsshair",cursorAt:{top:-5,left:-5}});

       $('#draggable_cursor_bottom').draggable({cursorAt:{bottom:0}});

 });

 </script>

 <!--自写脚本-->

 <style type="text/css">

   #draggable_cursor_center,#draggable_cursor_leftup,#draggable_cursor_bottom { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }

 </style>

 </head>

 <body>

 <div id="draggable_cursor_center" class="ui-widget-content">

 <p>光标位置一直在中心</p>

 </div>

 <div id="draggable_cursor_leftup" class="ui-widget-content">

 <p>光标在 left -5 和 top -5的左上角</p>

 </div>

 <div id="draggable_cursor_bottom" class="ui-widget-content">

 <p>光标位置限制在下方</p>

 </div>

 </body>

效果是光标样式和位置发生变化

5、延时启动：distance设置像素，delay设置延时毫秒数

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>jqeruy UI 拖拽练习--延时启动</title>

 <!--导入jquery插件-->

 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script>

 <!--导入jqueryUI插件-->

 <script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>

 <link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/>

 <!--自写脚本-->

 <script type="text/javascript" language="javascript">

    //在页面加载完之后加载jquery

    $().ready(function(e) {

        //按下鼠标，滑动20像素，启动拖动

        $('#draggable').draggable({ distance:20});

        //按下鼠标，等待1000毫秒，启动拖动

       $('#draggable2').draggable({delay:1000});

 });

 </script>

 <!--自写脚本-->

 <style type="text/css">

   #draggable,#draggable1,#draggable2

   {

       width:120px;

       height:120px;

       float:left;

       margin:5px;

   }

 </style>

 </head>

 <body>

 <div id="draggable" class="ui-widget-content">

 <p>按下鼠标，滑动20像素，启动拖拽</p>

 </div>

 <div id="draggable2" class="ui-widget-content">

 <p>按下鼠标，等待1000毫秒，启动拖拽</p>

 </div>

 </body>

效果是延时启动拖拽

6、事件：start触发启动事件，drag触发拖拽事件，stop触发结束事件

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>jqeruy UI 拖拽练习-事件</title>

 <!--导入jquery插件-->

 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script>

 <!--导入jqueryUI插件-->

 <script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>

 <link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/>

 <!--自写脚本-->

 <script type="text/javascript" language="javascript">

    //在页面加载完之后加载jquery

    $().ready(function(e) {

        //定义变量

        var $start_counter=$('#event-start'),

            $drag_counter=$('#event-drag'),

            $stop_counter=$('#event-stop'),

            counts=[0,0,0];

        $("#draggable").draggable({

            start:function(){

                  //启动开始，总数+1

                  counts[0]++;

                  //修改状态

                  updateCounterStatus($start_counter,counts[0]);

                } ,

            drag:function(){

                 //拖拽，总数+1

                 counts[1]++;

                  //修改状态

                 updateCounterStatus($drag_counter,counts[1]);

                },

            stop:function(){

                  //结束开始，总数+1

                  counts[2]++;

                   //修改状态

                  updateCounterStatus($stop_counter,counts[2]);

                }

         });

         //修改状态

         function updateCounterStatus($event_counter,new_count)

         {

             //判断是否存在该样式

             if(!$event_counter.hasClass("ui-state-hover"))

             {

                 $event_counter.addClass("ui-state-hover")

                    .siblings().removeClass("ui-state-hover");

             }

             //修改数据

             $("span.count",$event_counter).text(new_count);

         }

      });

 </script>

 <!--自写脚本-->

 <style type="text/css">

    #draggable { width: 16em; padding: 0 1em; }

    #draggable ul li { margin: 1em 0; padding: 0.5em 0; } * html #draggable ul li { height: 1%; }

    #draggable ul li span.ui-icon { float: left; }

    #draggable ul li span.count { font-weight: bold; }

 </style>

 </head>

 <body>

 <div id="draggable" class="ui-widget ui-widget-content">

 <p>拖拽我来触发事件链</p>

 <ul class="ui-helper-reset">

 <li id="event-start" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-play"></span>"开始" 调用 <span class="count">0</span>x</li>

 <li id="event-drag" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-arrow-4"></span>"拖拽"  调用 <span class="count">0</span>x</li>

 <li id="event-stop" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-stop"></span>"结束"  调用 <span class="count">0</span>x</li>

 </ul>

 </div>

 </body>

效果是可以通过拖拽触发事件链

7、Handles(不清楚该怎么翻译)：handle设置可以拖拽的元素，cancel禁用不能拖拽的元素

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>jqeruy UI 拖拽练习--Handles</title>

 <!--导入jquery插件-->

 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script>

 <!--导入jqueryUI插件-->

 <script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>

 <link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/>

 <!--自写脚本-->

 <script type="text/javascript" language="javascript">

    //在页面加载完之后加载jquery

    $().ready(function(e) {

        //通过P元素拖动

        $("#draggable").draggable({handle:"p"});

        // 禁用样式为ui-widget-header的P元素的拖拽

        $("#draggable2").draggable({cancel:"p.ui-widget-header"});

        //

        $("div,p").disableSelection();

      });

 </script>

 <!--自写脚本-->

 <style type="text/css">

    #draggable, #draggable2 { width: 100px; height: 200px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }

    #draggable p { cursor: move; }

 </style>

 </head>

 <body>

 <div id="draggable" class="ui-widget-content">

 <p class="ui-widget-header">

 我只能用这个手柄拖拽</p>

 </div>

 <div id="draggable2" class="ui-widget-content">

 <p>你能四处拖拽我&hellip;</p>

 <p class="ui-widget-header">&hellip;但是，用这个手柄你不能拖拽我.</p>

 </div>

 </body>

效果是我们想怎么控制拖拽就怎么控制

8、复位：revert设置是否可以复位，helper这个属性我不知道该怎么解释

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>jqeruy UI 拖拽练习--恢复到原来位置</title>

 <!--导入jquery插件-->

 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script>

 <!--导入jqueryUI插件-->

 <script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>

 <link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/>

 <!--自写脚本-->

 <script type="text/javascript" language="javascript">

    //在页面加载完之后加载jquery

    $().ready(function(e) {

        //通过P元素拖动

        $("#draggable").draggable({revert:true});

        // 禁用样式为ui-widget-header的P元素的拖拽

        $("#draggable2").draggable({revert:true,helper:"clone"});

        //

      });

 </script>

 <!--自写脚本-->

 <style type="text/css">

    #draggable, #draggable2 { width: 150px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }

 </style>

 </head>

 <body>

 <div id="draggable" class="ui-widget-content">

 <p>恢复到原来位置</p>

 </div>

 <div id="draggable2" class="ui-widget-content">

 <p>Revert the helper</p>

 </div>

 </body>

效果是拖拽到他处的元素在放开控制的时候可以回到原来的位置

9、扑捉元素或网格：

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>jqeruy UI 拖拽练习--扑捉元素或网格</title>

 <!--导入jquery插件-->

 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script>

 <!--导入jqueryUI插件-->

 <script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>

 <link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/>

 <!--自写脚本-->

 <script type="text/javascript" language="javascript">

    //在页面加载完之后加载jquery

    $().ready(function(e) {

        //扑捉所有可以拖拽的元素

        $("#draggable").draggable({snap:true});

        //扑捉样式为ui-widget-header元素

        $("#draggable2").draggable({snap:".ui-widget-header"});

        //扑捉样式为ui-widget-header元素的外边

        $("#draggable3").draggable({snap:".ui-widget-header",snapModel:"outer"});

        //扑捉宽或者高为20的网格

        $("#draggable4").draggable({grid:[20,20]});

        //扑捉宽或者高为80的网格

        $("#draggable5").draggable({grid:[80,80]});

      });

 </script>

 <!--自写脚本-->

 <style type="text/css">

    .draggable { width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; }

    .ui-widget-header p, .ui-widget-content p { margin: 0; }

    #snaptarget { height: 140px; }

 </style>

 </head>

 <body>

 <div id="snaptarget" class="ui-widget-header">

 <p>我是一个扑捉（快照）标签</p>

 </div>

 <br style="clear:both">

 <div id="draggable" class="draggable ui-widget-content">

 <p>默认 (snap: true),捕捉所有其他可拖动的元素.</p>

 </div>

 <div id="draggable2" class="draggable ui-widget-content">

 <p>我只扑捉 the big box.</p>

 </div>

 <div id="draggable3" class="draggable ui-widget-content">

 <p>我只捕捉 the big box 的外边.</p>

 </div>

 <div id="draggable4" class="draggable ui-widget-content">

 <p>我捕捉一个20×20 的网格.</p>

 </div>

 <div id="draggable5" class="draggable ui-widget-content">

 <p>我捕捉一个 80 x 80 的网格.</p>

 </div>

 </body>

效果就是拖拽的元素在靠近符合条的元素的时候会自动磁性靠近

10、视觉反馈：

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>jqeruy UI 拖拽练习--视觉反馈</title>

 <!--导入jquery插件-->

 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script>

 <!--导入jqueryUI插件-->

 <script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>

 <link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/>

 <!--自写脚本-->

 <script type="text/javascript" language="javascript">

    //在页面加载完之后加载jquery

    $().ready(function(e) {

        //拖拽原控件

        $("#draggable").draggable({helper:"original"});

        //拖拽复制体

        $("#draggable2").draggable({opacity:0.7,helper:"clone"});

        //

        $("#draggable3").draggable({

               cursor:"move",

               cursorAt:{top:-12,left:-20},

               helper:function(event){

                     return $("<div class='ui-widget-header'>我是一个自定义helper</div>");

                   }

            });

         //

         $("#set div").draggable({stack:"#set div"});

      });

 </script>

 <!--自写脚本-->

 <style type="text/css">

    #draggable, #draggable2, #draggable3, #set div { width: 150px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }

 #draggable, #draggable2, #draggable3 { margin-bottom:20px; }

 #set { clear:both; float:left; width: 368px; height: 120px; }

 p { clear:both; margin:0; padding:1em 0; }

 </style>

 </head>

 <body>

 <h3 class="docs">With helpers:</h3>

 <div id="draggable" class="ui-widget-content">

 <p>Original</p>

 </div>

 <div id="draggable2" class="ui-widget-content">

 <p>半透明克隆</p>

 </div>

 <div id="draggable3" class="ui-widget-content">

 <p>自定义 helper (与 cursorAt 组合)</p>

 </div>

 <h3 class="docs">Stacked:</h3>

 <div id="set">

 <div class="ui-widget-content">

 <p>We are draggables..</p>

 </div>

 <div class="ui-widget-content">

 <p>..whose z-indexes are controlled automatically..</p>

 </div>

 <div class="ui-widget-content">

 <p>..with the stack option.</p>

 </div>

 </div>

 </body>

效果是给人一种视觉上的信息反馈

11、拖拽排序：

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>jqeruy UI 拖拽练习--拖拽排序</title>

 <!--导入jquery插件-->

 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script>

 <!--导入jqueryUI插件-->

 <script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>

 <link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/>

 <!--自写脚本-->

 <script type="text/javascript" language="javascript">

    //在页面加载完之后加载jquery

    $().ready(function(e) {

        //

        $("#sortable").sortable({ revert:true});

       //拖拽函数

       $('#draggable').draggable({

             connectToSortable:"#sortable",

             helper:"clone",

             revert:"invalid"

           });

        $("ul,li").disableSelection();

 });

 </script>

 <!--自写脚本-->

 <style type="text/css">

   ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }

   li { margin: 5px; padding: 5px; width: 150px; }

 </style>

 </head>

 <body>

 <ul>

 <li id="draggable" class="ui-state-highlight">拖拽我下来</li>

 </ul>

 <ul id="sortable">

 <li class="ui-state-default">Item 1</li>

 <li class="ui-state-default">Item 2</li>

 <li class="ui-state-default">Item 3</li>

 <li class="ui-state-default">Item 4</li>

 <li class="ui-state-default">Item 5</li>

 </ul>

 </body>

效果是可以拖拽这元素进行排序

结束语

因为我不知道怎么把自己做的效果直接在博文中显示出来也就是效果和jQueryUI官方一样，所以只有把 代码贴出来了，代码中带有我自己写的一些体会，如果问题请指正，谢谢！！^_^

jquery UI 跟随学习笔记——拖拽（Draggable）的更多相关文章

  1. Angular 学习笔记——拖拽

    <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...

  2. JQUERY 拖拽 draggable droppable resizable selectable sortable

    今天用了jq ui的拖动碰撞功能,好不容易看到有详细的API解说,记录如下:   <script language="JavaScript" type="text/ ...

  3. UI设计学习笔记（7-12）

    UI学习笔记(7)--扁平化图标 认识扁平化 Flat Design 抛弃传统的渐变.阴影.高光等拟真视觉效果,打造看上去更平的界面.(颜色.形状) 扁平化图标有什么优缺点 优点: 简约不简单.有新鲜 ...

  4. jquery源码学习笔记三：jQuery工厂剖析

    jquery源码学习笔记二:jQuery工厂 jquery源码学习笔记一:总体结构 上两篇说过,query的核心是一个jQuery工厂.其代码如下 function( window, noGlobal ...

  5. 网站开发常用jQuery插件总结(三）拖拽插件gridster

    1.gridster插件功能 实现类似于win8 磁贴拖拽的功能 2.gridster官方地址 http://gridster.net/ 在官方的网站上也有插件的帮助和实例,但是按照官方的说明,我在本 ...

  6. 锋利的jquery第二版学习笔记

    jquery系统学习笔记 一.初识:jquery的优势:1.轻量级(压缩后不到30KB)2.强大的选择器(支持css1.css2选择器的全部 css3的大部分 以及一些独创的 加入插件的话还可支持XP ...

  7. 【C#/WPF】UI控件的拖拽/拉伸

    需求①:控件拖拽——按住鼠标,可自由拖拽控件. 方法:目前看到的办法有两种. 使用ZoomableCanvas:http://www.cnblogs.com/gnielee/archive/2011/ ...

  8. js学习笔记29----拖拽

    原理:先计算鼠标与拖拽目标的左侧距离 跟 上面距离,再计算拖动后的位置. 示例代码: <!DOCTYPE html> <html lang="en"> &l ...

  9. ios UI自动化测试学习笔记

    一.一些注意事项: 1.做自动化测试时注意如果是真机话首先要设置不锁屏. 2.自动化测试过程中如果程序后台或崩溃了.脚本运行将会暂停,直到程序再次回到前台. 3.必须明确指定关闭自动测试,测试完成或中 ...

随机推荐

  1. jquery mobile 移动web(2)

    button 按钮 data-role="button" 将超链接变成button. 具有icon 图标的button 组件. 提供了18常用的图标 data-icon =&quo ...

  2. java.util.ArrayList,java.util.LinkedList,java.util.Vector的区别,使用场合.

    下图是Collection的类继承图 从图中可以看出:Vector.ArrayList.LinkedList这三者都实现了List 接口.所有使用方式也很相似,主要区别在于实现方式的不同,所以对不同的 ...

  3. VMware虚拟机下载与安装（内附密钥）

    VMware下载与安装 一.虚拟机的下载 1.进入VMware官网,点击左侧导航栏中的下载,再点击图中标记的Workstation Pro,如下图所示. 2.根据操作系统选择合适的产品,在这里以Win ...

  4. 【linux运维递进】

    ================================云计算和虚拟化=================================== docker openstack svn git ...

  5. css表格

    今天写某个平台的前端数据展示 主要使用表格展示 正好复习总结一下css的表格 首先说说thead.tbody.tfoot <thead></thead> <tbody&g ...

  6. php-7.2.3源代码和php-5.6.26源代码摘录，对比 “汇编php文件”和“执行opcode代码”

    php-7.2.3 在“汇编php文件”和“执行opcode代码”上做了大量改变php-5.6.26 没见到支持抽象语法树的相关代码,php-7.2.3 见到支持抽象语法树的相关代码php-5.6.2 ...

  7. 07 json与os模块（进阶）

    json和os模块 阶段一 .数据交换 1.json的基本介绍 JSON全名是JavaScript Object Notation(即:JavaScript对象标记)它是JavaScript的子集. ...

  8. 3.从print到I/O

    为何对双引号念念不忘? >>> print("hello, world!") hello, world!   平x而论,既然在意双引号的去掉,为何不在意括号的去掉 ...

  9. Python学习手册之Python异常和文件

    在上一篇文章中,我们介绍了 Python 的函数和模块,现在我们介绍 Python 中的异常和文件. 查看上一篇文章请点击:https://www.cnblogs.com/dustman/p/9963 ...

  10. Leecode刷题之旅-C语言/python-100相同的树

    /* * @lc app=leetcode.cn id=100 lang=c * * [100] 相同的树 * * https://leetcode-cn.com/problems/same-tree ...