如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

说到前端, 大家第一反应是不是都是vue、react、webpack等这些大大小小的框架或者工具, 但其实这些都是和js相关的, 真正的样式会被大家忽略。其实真正呈现给大家看到华丽的页面, 都是样式才让他们多了那份色彩。那么大家觉得简单的css样式, 真的简单么? 让我们一起来看下, 开启css的入坑之旅, 今天一起跟大家简单聊聊盒模型的相关问题......

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

一、Ajax的XMLHttpRrequest对象

Ajax的核心是XMLHttpRequest对象（发送异步请求、接受响应及执行回调），它是ajax实现的关键

XMLHttpRequest对象的open()方法与send()方法

请求类型，GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

• 无法使用缓存文件（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST 没有数据量限制）
• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

(1). GET请求

(2). POST请求

async参数设置

XMLHttpRequest对象如果要用于AJAX的话，其open()方法的async参数必须设置为true

通过 AJAX，JavaScript 无需等待服务器的响应，而是：

• 在等待服务器响应时执行其他脚本
• 当响应就绪后对响应进行处理

(1). 当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：

(2). 当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：

服务器响应

使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

(1). 如果来自服务器的响应并非 XML，请使用 responseText 属性。

responseText 属性返回字符串形式的响应，因此您可以这样使用：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

(2). 如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性

[javascript] view plain copy

1. xmlDoc=xmlhttp.responseXML;  
2. txt="";  
3. x=xmlDoc.getElementsByTagName("ARTIST");  
4. for (i=0;i<x.length;i++)  
5.   {  
6.   txt=txt + x[i].childNodes[0].nodeValue + "<br />";  
7.   }  
8. document.getElementById("myDiv").innerHTML=txt;  

onreadystatechange事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

Ajax()函数示例：

• 定义一个函数，用于异步获取信息

[javascript] view plain copy

1. function Ajax(){  
2.     //code  
3. }  

• 声明一个空对象来装入XMLHttpRequest对象

[javascript] view plain copy

1. var xmlHttpReq = null;  

• 给XMLHttpRequest对象赋值

[javascript] view plain copy

1. if(window.ActiveXObject){  
2.     xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");  
3. }else if(window.XMLHttpRequest){  
4.     xmlHttpReq = new XMLHttpRequest();  
5. }  

IE5、IE6是以ActiveXObject的方式引入XMLHttpRequest对象的，而其他浏览器的XMLHttpRequest对象是window的子对象。

• • 实例化后，使用open()方法初始化XMLHttpRequest对象，指定HTTP方法和要使用的服务器URL

[javascript] view plain copy

1. xmlHttpReq.open("GET","test.php",true);  

• 因为要做一个异步调用，所以需要注册一个XMLHttpRequest对象将调用的回调事件处理器当做它的readystate值改变时调用。当readyState值改变时，会激发一个readystatechange事件，可以使用onreadystatechange属性来注册该回调事件处理器。

[javascript] view plain copy

1. xmlHttpReq.onreadystatechange = RequestCallBack;  

• 使用send()方法发送请求，因为这个请求使用的是HTTP的“GET”方式，所以可以在不指定参数或使用null参数的情况下调用send()方法

[javascript] view plain copy

1. xmlHttpReq.send(null);  

当请求改变时，XMLHttpRequest对象调用onreadystatechange属性注册的事件处理器，因此在处理该响应前，事件处理器首先应该检查readyState的值和HTTP的状态。当请求完成加载时（readyState==4）并且已经响应成功（status==200）时，就可以调用JavaScript函数来处理该响应内容。

[javascript] view plain copy

1. function RequestCallBack(){  
2.     if (xmlHttpReq.readyState == 4) {  
3.         if (xmlHttpReq.status == 200) {  
4.             //将xmlHttpReq.responText的值赋予id为resText的元素  
5.             document.getElementById('resText').innerHTML = xmlHttpReq.responText;  
6.         }  
7.     }  
8. }  

二、jQuery中的Ajax

jQuery对Ajax操作进行了封装，在jQuery中$.ajax()方法属于最底层的方法，第2层是load()、$.get()、$.post()方法，第3层是$.getScript()、$.getJSON()方法

1、load()方法    通常用来从WEB服务器上获取静态的数据文件

最常用的Ajax方法，能载入远程HTML代码并插入DOM中

load(url[,data][,callback]);

• url：String    请求HTML页面的URL地址
• data：Object    发送至服务器的key/value数据
• callback：Function    请求完成时的回调函数，无论请求成功或失败

[javascript] view plain copy

1. $(function(){  
2.     $("#send").click(function(){  
3.         $("#resText").load("test.html");  
4.     })  
5. })  

[javascript] view plain copy

1. <button type="button" id="send">ajax加载</button>  
2. <div class="comment">已有评论：</div>  
3. <div id="resText">替换内容</div>  

test.html代码为：

[javascript] view plain copy

1. <div class="comment">  
2.     <h6>张三：</h6>  
3.     <p class="para">沙发</p>  
4. </div>  
5. <div class="comment">  
6.     <h6>李四：</h6>  
7.     <p class="para">板凳</p>  
8. </div>  
9. <div class="comment">  
10.     <h6>王五：</h6>  
11.     <p class="para">地板</p>  
12. </div>  

筛选载入的HTML文档

load()方法的URL参数的语法结构为：“url selector”

[javascript] view plain copy

1. $("#resText").load("test.html .para");  

load()传递方式根据参数data自动指定，没有参数 --> GET，反之为POST   

[javascript] view plain copy

1. // 无参数传递 GET  
2. $("#resText").load("test.html",function(){  
3.     //code  
4. });  
5. // 有参数传递 POST  
6. $("#resText").load("test.html",{name:"rain",age:"22"},function(){  
7.     //code  
8. });  

回调函数：有三个参数，请求返回的内容、请求状态、XMLHttpRequest对象

[javascript] view plain copy

1. // 回调函数  
2. $("#resText").load("test.html",function(responseText,textStatus,XMLHttpRequest){  
3.     //responseText  请求返回的内容  
4.     //textStatus    请求状态：success、error、notmodified、timeout  
5.     //XMLHttpRequest    XMLHttpRequest对象  
6. });  

2、$.get()和$.post()方法    jQuery中的全局函数

2.1 $.get()    使用GET方式来进行异步请求

[javascript] view plain copy

1. $.get(url[,data][,callback][,type]);  

• url：String    请求HTML页面的URL地址
• data：Object    发送至服务器的key/value数据会作为QueryString附加到请求URL中
• callback：Function    载入成功时回调函数（只有当response的返回状态是success才调用该函数）自动将请求结果和状态传递给该方法
• type：服务器返回内容的格式，包括html、xml、script、json、text、_default

[javascript] view plain copy

1. $("#send").click(function(){  
2.     $.get("get1.php",{  
3.         username:$("#username").val(),  
4.         content:$("#comment").val()  
5.     },function(data,textStatus){  
6.         // data：返回的内容  
7.         // textStatus：请求状态，success、error、notmodified、timeout  
8.     })  
9. })  

数据格式：服务器返回的数据格式

（1）HTML片段    较少工作量

[javascript] view plain copy

1. $.get("get1.php",{  
2.     username:$("#username").val(),  
3.     content:$("#comment").val()  
4. },function(data,textStatus){  
5.     // data：返回的内容  
6.     // textStatus：请求状态，success、error、notmodified、timeout  
7.     $("#resText").html(data);   //将返回的数据添加到页面上  
8. });  

（2） XML文档    需要对返回的数据处理

方便使用

可以通过attr()、find()、filter()方法对数据进行处理

[javascript] view plain copy

1. $("#send").click(function(){  
2.     $.get("get1.php", {   
3.         username :  $("#username").val() ,   
4.         content :  $("#content").val()    
5.     }, function (data, textStatus){  
6.         var username = $(data).find("comment").attr("username");  
7.         var content = $(data).find("comment content").text();  
8.         var txtHtml = "<div class='comment'><h6>"+username  
9.                     +":</h6><p class='para'>"+content+"</p></div>";  
10.         $("#resText").html(txtHtml); // 把返回的数据添加到页面上  
11.     });  
12. })  

由于期待服务器返回的数据类型为XML文档，因此需要在服务期端设置Content-Type类型

[javascript] view plain copy

1. header("Content-Type:text/html; charset=utf-8");  

（3）JSON文件    需要对返回的数据处理

JSON相对于XML比较简洁

[javascript] view plain copy

1. $("#send").click(function(){  
2.     $.get("get3.php", {   
3.         username :  $("#username").val() ,   
4.         content :  $("#content").val()    
5.     }, function (data, textStatus){  
6.         var username = data.username;  
7.         var content = data.content;  
8.         var txtHtml = "<div class='comment'><h6>"+username  
9.                     +":</h6><p class='para'>"+content+"</p></div>";  
10.         $("#resText").html(txtHtml); // 把返回的数据添加到页面上  
11.     },"json");  
12. })  

以上三种方法对比：

HTML返回数据最简单，如果数据需要重用使用JSON（性能与文件大小方面有优势），当远程程序未知时使用XML。

2.2 $.post()    通过 HTTP POST 请求从服务器上请求数据

[javascript] view plain copy

1. $.post(URL[,data][,callback]);  

• url：String    请求的URL地址
• data：Object    发送至服务器的key/value数据
• callback：Function    载入成功时的回调函数

由于POST和GET方式提交的所有数据都可以通过$_REQUEST[]来获取，因此只需要改变jQuery函数，就可以将程序在GET请求和POST请求之间切换。

当load()方法带有参数传递时，会使用POST方式发送请求。因此也可以使用load()方法来完成同样的功能。

$.post()与$.get()方法的区别：

• GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器。当然，在Ajax请求中，这种区别对用户是不可见的。
• GET方式对传输的数据有大小限制（通常不能大于2KB），而使用POST方式传递的数据量要比GET方式大得多（理论上不受限制）。
• GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等。在某种情况下，GET方式会带来严重的安全性问题，而POST方式相对来说就可以避免这些问题。
• GET方式和POST方式传递的数据在服务器端的获取也不相同。在PHP中，GET方式的数据可以用$_GET[]获取，而POST方式可以用$_POST[]获取。两种方式都可以用$_REQUEST[]来获取。

      上面使用load()、$.get()和$.post()方法完成了一些常规的Ajax程序，如果还需要编写一些复杂的Ajax程序，那么就要用到jQuery中的$.ajax()方法。$.ajax()方法不仅能实现与load()、$.get()和$.post()方法同样的功能，而且还可以设定beforeSend（提交前回调函数）、error（请求失败后处理）、success（请求成功后处理）以及complete（请求完成后处理）回调函数，通过这些回调函数，可以给用户更多的Ajax提示信息。另外，还有一些参数，可以设置Ajax请求的超时时间或者页面的“最后更改”状态等。

3、$.getScript()和$.getJSON()方法

3.1 $.getScript()

有时候，在页面初次加载时就取得所需的全部JavaScript文件是完全没有必要的。虽然可以在需要哪个JavaScript文件时，动态地创建<script>标签

[javascript] view plain copy

1. $(document.createElement("script").attr("src","test.js")).appenChild("head");  
2. //或  
3. $("<script type='text/javscript' src='test.js'></script>").appendChild("head");  

上述方法不理想，jQuery又提供了$.getScript()方法

[javascript] view plain copy

1. $(function(){  
2.     $("#btn").click(function(){  
3.         $.getScript("test.js");  
4.     })  
5. })  

有回调函数

[javascript] view plain copy

1. $.getScript("test.js",function(){  
2.     $(element).click(function(){  
3.         $(element).animate({backgroundcolor:'pink'},1000)  
4.         .animate({backgroundcolor:'coral'},1000);  
5.     })  
6. });  

3.2 $.getJSON()方法    用于加载JSON文件，用法同$.getScript()方法

[javascript] view plain copy

1. $(function(){  
2.     $("#btn").click(function(){  
3.         $.getJSON("test.json");  
4.     })  
5. })  

上面函数虽然加载了JSON代码，但是并没有告诉JS对返回的数据如何处理，所以需要回调函数

[javascript] view plain copy

1. $(function(){  
2.     $("#btn").click(function(){  
3.         $.getJSON("test.json",function(){  
4.             //data：返回的数据  
5.         });  
6.     })  
7. })  

jQuery遍历方法  -->  $.each()方法    遍历对象和数组

$.each(data,callback)    // 为全局函数   不同于each()方法

• data：数组或对象

• callback：回调函数，有两个参数（对象的成员或数组的索引，对应变量或内容）

4、$.ajax()方法    jQuery最底层的Ajax实现

$.ajax(options);

前面用到的$.load()、$.get()、$.post()、$.getScript()和$.getJSON()这些方法，都是基于$.ajax()方法构建的，$.ajax()方法是jQuery最底层的Ajax实现，因此可以用它来代替前面的所有方法。

[javascript] view plain copy

1. $(function(){  
2.     $("#btn").click(function(){  
3.         $.getScript("test.js");  
4.     })  
5. })  

可被替换为

[javascript] view plain copy

1. $(function(){  
2.     $("#btn").click(function(){  
3.         $.ajax({  
4.             type:"GET",  
5.             url:"test.js",  
6.             dataType:"script"  
7.         });  
8.     });  
9. })  

[javascript] view plain copy

1. $(function(){  
2.     $("#btn").click(function(){  
3.         $.getJSON("test.json",function(data){  
4.                 $("#resText").empty();  
5.                 var html = " ";  
6.                 $.each(data,function(commentIndex,comment){  
7.                     html+='<div class="comment"><h6>'+comment['username']  
8.                          +'</h6><p class="para">'+comment['content']  
9.                          +'</p></div>'  
10.                 })  
11.                 $("resText").html(html);  
12.             }  
13.         });  
14.     });  
15. })  

可被替换为

[javascript] view plain copy

1. $(function(){  
2.     $("#btn").click(function(){  
3.         $.ajax({  
4.             type:"GET",  
5.             url:"test.json",  
6.             dataType:"json",  
7.             success:function(data){  
8.                 $("#resText").empty();  
9.                 var html = " ";  
10.                 $.each(data,function(commentIndex,comment){  
11.                     html+='<div class="comment"><h6>'+comment['username']  
12.                          +'</h6><p class="para">'+comment['content']  
13.                          +'</p></div>'  
14.                 })  
15.                 $("resText").html(html);  

1. })

} }); });

三、序列化元素

1．serialize()方法

异步提交表单，并将服务器返回的数据显示到当前页面中

[javascript] view plain copy

1. $.get("get1.php",{  
2.     username:$("#username").val(),  
3.     content:$("#comment").val()  
4. },function(data,textStatus){  
5.     // data：返回的内容  
6.     // textStatus：请求状态，success、error、notmodified、timeout  
7.     $("#resText").html(data);   //将返回的数据添加到页面上  
8. });  

serialize()方法也是作用于一个jQuery对象，它能够将DOM元素内容序列化为字符串，用于Ajax请求。可将上述代码简化为：

[javascript] view plain copy

1. $.get("get1.php",$("#form1").serialize(),function(data,textStatus){  
2.     // data：返回的内容  
3.     // textStatus：请求状态，success、error、notmodified、timeout  
4.     $("#resText").html(data);   //将返回的数据添加到页面上  
5. });  

serialize()方法作用于jQuery对象，所以不光只有表单能使用它，其他选择器选取的元素也都能使用它，如以下jQuery代码：

[javascript] view plain copy

1. $(":checkbox,:radio").serialize();  

把复选框和单选框的值序列化为字符串形式，只会将选中的值序列化。

2．serializeArray()方法

该方法不是返回字符串，而是将DOM元素序列化后，返回JSON格式的数据

3．$.param()方法

它是serialize()方法的核心，用来对一个数组或对象按照key/value进行序列化。

比如将一个普通的对象序列化：

四、jQuery中的全局事件

jQuery简化Ajax操作不仅体现在调用Ajax方法和处理响应方面，而且还体现在对调用Ajax方法的过程中的HTTP请求的控制。通过jQuery提供的一些自定义全局函数，能够为各种与Ajax相关的事件注册回调函数。例如当Ajax请求开始时，会触发ajaxStart()方法的回调函数；当Ajax请求结束时，会触发ajaxStop()方法的回调函数。这些方法都是全局的方法，因此无论创建它们的代码位于何处，只要有Ajax请求发生时，就会触发它们。

有时，当网页加载过慢时，就需要为网页添加一个提示信息，常用的提示信息是“加载中…”，代码如下：

[javascript] view plain copy

1. <div class="loading">加载中...</div>  

然后通过CSS控制元素隐藏，当Ajax请求开始的时候，将此元素显示，用来提示用户Ajax请求正在进行。当Ajax请求结束后，将此元素隐藏。

[javascript] view plain copy

1. $("$loading").ajaxStart(function(){  
2.     $(this).show();  
3. }).ajaxStop(function(){  
4.     $(this).hide();  
5. });  

jQuery的Ajax全局事件中还有几个方法，也可以在使用Ajax方法的过程中为其带来方便。

方法名称	说明
ajaxComplete(callback)	Ajax请求完成时执行的函数
ajaxError(callback)	Ajax请求发生错误时执行的函数，捕捉到的错误可以作为最后一个参数传递
ajaxSend(callback)	Ajax请求发送前执行的函数
ajaxSuccess(callback)	Ajax请求成功时执行的函数

注意：

1，如果想使某个Ajax请求不受全局方法的影响，那么可以在使用$.ajax(options)方法时，将参数中的global设置为false，jQuery代码如下

[javascript] view plain copy

1. $.ajax({  
2.     url:"test.html",  
3.     global:false  
4. });  

2，在jQuery1.5版本之后，如果Ajax请求不触发全局方法，那么可以设置：

[javascript] view plain copy

1. $.ajaxPrefilter(function(options){  
2.     options.global = true;  
3. })  

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

<?php echo <<<_END <!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>点标记</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <style>
        .marker {
            color: #ff6600; padding: 4px 10px;
            border: 1px solid #fff; white-space: nowrap;
            font-size: 12px;
            font-family: "";
            background-color: #0066ff;  } </style>
    <script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<script> var marker, map = new AMap.Map("container", {
        resizeEnable: true, center: [126.60580555556, 45.702363888889], zoom: 13 }); var getJSON = function(url) { return new Promise(function(resolve, reject) { var xhr = new XMLHttpRequest();
        xhr.open('get', url, true);
        xhr.responseType = 'json';
        xhr.onload = function() { var status = xhr.status; if (status == 200) {
            resolve(xhr.response);
          } else {
            reject(status);
          }
        };
        xhr.send();
      });
    };

    getJSON('http://web.cellpies.com/api/driving/getVehicleLocationPoints?vehicleDeviceId=0400000000030603&timeType=4&startTime=2017-03-17%2013:00:00&stopTime=2017-03-17%2014:00:00').then(function(jdata) { //alert('Your Json result is:  ' + jdata); //you can comment this, i used it to debug
        //alert(jdata.data[0].gpsx);
        //alert(jdata.data[0].gpsy); window.i=0; //addMarker(jdata.data[i].gpsx,jdata.data[i].gpsy); setInterval(function () { addMarker(jdata.data[window.i].gpsx,jdata.data[window.i].gpsy); },"1000");

    }, function(status) { //error detection.... alert('Something went wrong.');
    }); // 实例化点标记 function addMarker(v1,v2) {

     window.i+=10;
        marker = new AMap.Marker({
            icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png", position: [v1,v2]
        });
        marker.setMap(map);
    } </script>
</body>
</html>

</script>
</body>
</html> _END; ?>

<?php echo<<<_END <!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>点标记</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <style>
        .marker {
            color: #ff6600; padding: 4px 10px;
            border: 1px solid #fff; white-space: nowrap;
            font-size: 12px;
            font-family: "";
            background-color: #0066ff;  } </style>
    <script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<script> var marker, map = new AMap.Map("container", {
        resizeEnable: true, center: [126.60580555556, 45.702363888889], zoom: 13 }); var getJSON = function(url) { return new Promise(function(resolve, reject) { var xhr = new XMLHttpRequest();
        xhr.open('get', url, true);
        xhr.responseType = 'json';
        xhr.onload = function() { var status = xhr.status; if (status == 200) {
            resolve(xhr.response);
          } else {
            reject(status);
          }
        };
        xhr.send();
      });
    };

    getJSON('http://web.cellpies.com/api/driving/getVehicleLocationPoints?vehicleDeviceId=0400000000030603&timeType=4&startTime=2017-03-17%2013:00:00&stopTime=2017-03-17%2014:00:00').then(function(jdata) {
        addMarker(jdata.data[0].gpsx,jdata.data[0].gpsy);
        window.i=1; //updateMarker(jdata.data[1].gpsx,jdata.data[1].gpsy); setInterval(function () { updateMarker(jdata.data[window.i].gpsx,jdata.data[window.i].gpsy); },"1000");

    }, function(status) { //error detection.... alert('Something went wrong.');
    }); // 实例化点标记 function addMarker(v1,v2) {

        marker = new AMap.Marker({
            icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png", position: [v1,v2]
        });
        marker.setMap(map);
    } function updateMarker(v1,v2) { //在地图上更新标记
        // 自定义点标记内容 window.i+=10; var markerContent = document.createElement("div"); // 点标记中的图标 var markerImg = document.createElement("img");
        markerImg.className = "markerlnglat";
        markerImg.src = "http://webapi.amap.com/theme/v1.3/markers/n/mark_r.png";
        markerContent.appendChild(markerImg); // 点标记中的文本 var markerSpan = document.createElement("span");
        markerSpan.className = 'marker';
        markerSpan.innerHTML = "Hi，我换新装备啦！";
        markerContent.appendChild(markerSpan);

        marker.setContent(markerContent); //更新点标记内容 marker.setPosition([v1,v2]); //更新点标记位置  } </script>
</body>
</html>

</script>
</body>
</html> _END; ?>

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

javascript部分

document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")[1]
    


        

            1
        

    

onMouseMove = "functionName(event)" function functionName (e) { e = e || window.event;
    ......
}
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

    

window.top.document.getElementById("testFrame").src = 'xx.htm' window.top.frameName.location = 'xx.htm'
    


        

            1
        

        

            2
        

    

<form> <table> <input/> </table> </form>
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

    

document.getElementById("frameName").(document.)elementName
window.frames["frameName"].elementName
    


        

            1
        

        

            2
        

    

window.frames["frameName"].contentWindow.document.elementName window.frames["frameName"].document.elementName
    


        

            1
        

        

            2
        

    

var source = e.target || e.srcElement; var target = e.relatedTarget || e.toElement;
    


        

            1
        

        

            2
        

    

IE: obj.onselectstart = function() {return false;}
FF: -moz-user-select:none;
    


        

            1
        

        

            2
        

    

IE: obj.setCapture(); obj.releaseCapture(); FF: window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP); if (!window.captureEvents) {
           o.setCapture(); }else {
           window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); }
    if (!window.captureEvents) {
           o.releaseCapture(); }else {
           window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP); }
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

    

.float_bottom { clear:both; font-size:0px; margin:0; line-height:0px; }
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

    

#box { float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略 }
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

    

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
    


        

            1
        

        

            2
        

    

IE: filter: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=60); IE: filter: alpha(opacity=10); FF: opacity:0.6; FF: -moz-opacity:0.10;
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

    

//向table追加一个空行：
var   row   =   otable.insertRow(-1); var   cell   =   document.createElement("td"); cell.innerHTML = "   ";  cell.className = "XXXX";  row.appendChild(cell);
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

    

FF： -moz-border-radius:4px，或者-moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius- bottomright:4px;。
    


        

            1
        

    

IE：border:2px   outset;。 
FF： -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;
    


        

            1
        

        

            2
        

    

//mf if (window.XMLHttpRequest)  //mf {
    xmlhttp=new XMLHttpRequest()
    xmlhttp.onreadystatechange=xmlhttpChange
    xmlhttp.open("GET",url,true)
    xmlhttp.send(null)
    } //ie else if (window.ActiveXObject)  //   code   for   IE {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP") if (xmlhttp)
        {
        xmlhttp.onreadystatechange=xmlhttpChange
        xmlhttp.open("GET",url,true)
        xmlhttp.send()
        }
    }
} 
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

        

            19
        

        

            20
        

        

            21
        

    

<style> div{ background:green; /* for FireFox */ *background:red; /* for IE7 */ _background:blue; /* for IE6 */ } </style>
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

    

<!--其他浏览器 --> <link rel="stylesheet" type="text/css" href="css.css" /> <!--[if IE 7]> 
<!-- 适合于IE7 --> <link rel="stylesheet" type="text/css" href="ie7.css" /> <![endif]--> <!--[if lte IE 6]> 
<!-- 适合于IE6及一下 --> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]-->
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

    

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

如何优化网站的内部结构？网站内部结构优化是网站SEO过程中不可缺少的环节，在网站建设的初期就要做好设置工作。网站内部结构的优化主要包括：网站结构、页面元素、后期优化等，下面就从这几个方面为大家讲解，希望能给一些不了解的朋友提供实质性的指导作用。

      1、结构目录

目录的设计是网站建设中很关键的环节，是一个网站的骨架，所以网站目录直接关系到用户的体验。建议：目录的组织结构从首页到内容页点击不超过三次，也就是三级：首页-栏目页-内容页。目录名可采用网站的一些核心产品词。

2、链接

我们说一个网站的优化最重要的两点是什么？对，是链接和关键词。如果说目录是一个网站的骨架，那么链接就是网站的血液。建议：网站链接的设置以英文形式展现，简短易懂，使用静态化URL，迎合搜索引擎的喜好，更好的服务于网站优化。

3、robots协议

robots.txt相当于网站的一张脸，一张接客的脸，接的搜索引擎的蜘蛛（或机器人、爬虫）。它是一种抓取协议文件，用于告诉搜索引擎spider，此网站中的哪些内容是不应被搜索引擎的索引，哪些是可以被索引的。

现在很多地方都有自动生成工具，百度站长工具，或者一些插件等，根据自己的喜好选择使用。这里有一个小技巧，将网站的地图链接放置在robots内，对网站的收录绝对是不小的帮助。具体方法：在最后一行增加 Sitemap：http://www.example.com/sitemap.xml。

4、Sitemaps

Sitemaps就是一个管家，总结统计网站的数据链接，将汇总的结果更好的展现给网站的客人-搜索引擎spider。

Sitemaps一般有html与XML两种格式。目前百度、Google、雅虎、微软等搜索引擎都支持Sitemaps，Sitemaps的提交可以通过各个搜索引擎的站长平台提交，也可以将其地址放在robots.txt文件里，上面已经说过了。

5、404页面

  404页面是客户端在浏览网页时，服务器无法正常提供信息，或是服务器无法回应，且不知道原因所返回的页面。据说在第三次科技革命之前，互联网的形态就是一个大型的中央数据库，这个数据库就设置在404房间里面。那时候所有的请求都是由人工手动完成的，如果在数据库中没有找到请求者所需要的文件，或者由于请求者写错了文件编号，用户就会得到一个返回信息:room 404 : file not found。404错误信息通常是在目标页面被更改或移除，或客户端输入页面地址错误后显示的页面，人们也就习惯了用404作为服务器未找到文件的错误代码了。当然实际考证传说中的room 404是不存在的，在http请求3位的返回码中，4开头的代表客户错误，5开头代表服务器端错误。

6、nofollow标签

nofollow标签是尽量减少垃圾链接对搜索引擎的影响，当超链接中出现nofollow标签后，搜索引擎会不考虑这些链接的权重，也不用使用这些链接用于排名。

nofollow标签通常有两种使用方法：一种方法是将"nofollow"写在网页上的meta标签上，例如：。另一种方法是将"nofollow"放在超链接中，例如： 。

需要注意的是，如果一个网站链向了某些被搜索引擎认为是垃圾网站的地址，那么这个网站的权重也会受到影响。因此对于一个网站来说，nofollow标签的使用十分必要。

7、统计代码

网站统计分析工具应该是每一位站长都了解的，现在常用的就是百度统计、cnzz、谷歌分析、51等，具体的就不做介绍了。网站统计代码添加时，为了不 影响网站的加载速度，最好放在网站底部。

      相关拓展：关键词的爬行和抓取

       搜索引擎派出一个能够在网上发现新网页并抓文件的程序，这个程序通常称之为蜘蛛。搜索引擎从已知的数据库出发，就像正常用户的浏览器一样访问这些网页并抓取文件。搜索引擎会跟踪网页中的链接，访问更多的网页，这个过程就叫爬行。这些新的网址会被存入数据库等待抓取。所以跟踪网页链接是搜索引擎蜘蛛发现新网址的最基本的方法，所以反向链接成为搜索引擎优化的最基本因素之一。没有反向链接，搜索引擎连页面都发现不了，就更谈不上排名了。

       搜索引擎抓取的页面文件与用户浏览器得到的完全一样，抓取的文件存入数据库。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

编者按：作为今年大热的设计趋势，响应式已然是设计师的标配技能。今天阿里的同学从响应式设计的布局类型、布局实现两方面深入讲解，有哪些实现布局的方式，该采用何种方式，都有相当专业细致的解答，不多说，来收 >>>

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

介绍Promise

promise的概念和实现最初来源于社区，用于解决异步编程的回调嵌套问题，即将多级的嵌套改良成顺序的代码行。ES6将其写入了语言标准，统一了用法，提供了原生的Promise。

Promise是一个构造函数，用于生成一个Promise实例。Promise实例代表一次异步操作。 它只可能有3种转态，分别是Pending(未决议), Resolved(完成) 和 Rejected(出错) 。

创建一个Promise实例时，其处于Pending状态，当异步操作完成，执行回调函数的时候，根据回调函数中的err的值，如果err 为空则异步操作成功，否则异步操作失败。此后，Promise实例的状态将不再改变。

Promise实例

var pro = function () { return new Promise(function(resolve, reject) { fs.readdir(_dirname, function(err, data) { if (err) {
                reject(err); //失败则将Promise对象置为rejected状态 } else {
                resolve(data); //成功则将Promise对象置为resolved转态 }
        });
    });
} /*pro是一个函数
 调用该函数返回一个Promise实例
*/ var promiseObject = pro(); /*then方法执行Resolved和Rejected状态的回调函数*/ promiseObject
.then(doneCallbacks, failCallbacks)
.catch(function(err) { console.log(err);
}); var doneCallbacks = function(data) { console.log(data);
}; var failCallbacks = function(err) { console.log(err)
};
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

        

            19
        

        

            20
        

        

            21
        

        

            22
        

        

            23
        

        

            24
        

        

            25
        

        

            26
        

        

            27
        

        

            28
        

        

            29
        

    

catch是then的一个语法糖，相当于

promiseObject.then(undefined, function(err) {
    console.log(err)
});
    


        

            1
        

        

            2
        

        

            3
        

    

Promise对象的错误具有向后传递的性质，因此，如果在调用过程抛出异常，则异常总能被最后一个catch捕获。这也是为什么我们习惯在then的调用后跟随一个catch调用。

then的链式写法

then 方法是定义在构造函数Promise 的原型对象上的。这个方法为Promise实例添加状态改变时的回调函数。then方法返回一个新的Promise实例，因此then方法后面可以调用then（）方法。传给then()方法的函数，可返回三类值，分别如下：

• 一个Promise实例
• 一个普通值
• 抛出一个异常

如果返回的是一个新的Promise对象，则下一级的then接收函数在这个Promise实例 状态发生改变时被触发执行。因此，then的链式写法，可以按顺序执行一系列的异步操作，并且后一个异步操作在前一个完成之后开始。如下代码实例所示：

var fs = require('fs'); var pro = function () { return new Promise(function(resolve, reject) { fs.readdir(_dirname, function(err, data) { if (err) {
                reject(err); //失败则将Promise对象置为rejected状态 } else {
                resolve(data); //成功则将Promise对象置为resolved转态 }
        });
    });
} var newPro = function(data) { return new Promise(function(resolve, reject) { setTimeout(function(){ resolve(data);
        },2000);
    });
}; /*pro是一个函数
 调用该函数返回一个Promise实例
*/ var promiseObject = pro(); /*then方法执行Resolved和Rejected状态的回调函数*/ promiseObject
    .then(function(data){ console.log("fisrt sync op");
        console.log(data); return newPro(data);//返回一个新的Promise对象 })
    .then(function(data) { console.log("second sync op");
        console.log(data);//两秒钟后才会被执行 })
    .catch(function(err) { console.log(err);
    });

promiseObject.then(undefined, function(err) { console.log(err)
}); var doneCallbacks = function(data) { console.log(data);
}; var failCallbacks = function(err) { console.log(err)
}; 
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

        

            19
        

        

            20
        

        

            21
        

        

            22
        

        

            23
        

        

            24
        

        

            25
        

        

            26
        

        

            27
        

        

            28
        

        

            29
        

        

            30
        

        

            31
        

        

            32
        

        

            33
        

        

            34
        

        

            35
        

        

            36
        

        

            37
        

        

            38
        

        

            39
        

        

            40
        

        

            41
        

        

            42
        

        

            43
        

        

            44
        

        

            45
        

        

            46
        

        

            47
        

        

            48
        

        

            49
        

        

            50
        

        

            51
        

        

            52
        

        

            53
        

    

把上一级异步调用的结果返回给下一级调用，then这样的链式写法，解决了回调函数的多层嵌套调用。

解决异步嵌套回调的更多方案

“回调金字塔”

多层嵌套

bluebird库 + Generator

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

随着越来越的的app使用沉浸式状态栏，有必要对沉浸式状态栏学习一下，查看了很多资料，沉浸式状态栏重要的无法三点：1.实现全屏 （Android4.4跟5.0全屏处理方式有别需分开处理 ）2.设置全屏之后为了保证自己写的布局不与状态栏重叠，需要在跟xml的跟布局设置android:fitsSystemWindows=”true” 。基于这几点处理方式可能很多，但是为了便于项目中工具类封装，本编实现方式均已代码方式呈现，xml设置方式可以自行查阅相关资料 3.改变状态栏颜色

—1.全屏设置 
对于4.4以上系统，因4.4以上系统是可以设置全屏，代码如下：

window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); 


    

        1
    

    

        2
    

对于5.0系统 具体代码

window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS|WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN|View.SYSTEM_UI_FLAG_LAYOUT_STABLE|View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION); window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

仅仅做全屏处理，我们会发现不管是在4.4系统上还是在5.0系统上，我们的布局内容会与状态栏内容出现重叠。

下图为4.4系统 

下图为8.0系统 

为了解决全屏设置重叠状态栏，我们需要在全屏之上预留状态栏的高度以便正常显示状态栏，而处理方式也很简单 activity layout根目录添加下面代码 
android:fitsSystemWindows=”true” 而此处我建议用代码设置,因为通常我们项目中会提取BaseActivity基类抽出一些共性，这种方式比在每个xml中设置属性更方便 
rootView.setFitsSystemWindows(true) 此处的rootView指的就是activity对应的跟布局； 
进行以上处理之后我们会发现现在状态栏跟我们的布局内容不再重叠了，接下来我们就只需要处理状态栏的颜色问题了。具体代码如下

ViewGroup content= (ViewGroup) findViewById(android.R.id.content); ViewGroup childView= (ViewGroup) content.getChildAt(0); if(childView!=null){
                childView.setFitsSystemWindows(true); } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

对于4.4系统因为没有改变状态栏颜色的api，我们可以通过添加一个与状态栏等高的View到根布局的父容器中，而根布局的父容器就是一个ID为android.R.id.content的帧布局被装饰的容器中，这样只需要设置View的颜色即可。对于5.0及以上系统，因已提供设置状态栏和导航栏颜色的api，直接设置即可； 
对于4.4以上5.0一下系统

View view=new View(this); view.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,getStatusHeight())); view.setBackgroundColor(Color.RED); content.addView(view); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

对于5.0及以上系统

window.setStatusBarColor(Color.RED); 


    

        1
    

获取状态栏高度

 private int getStatusHeight() { int statusHeight=-1; int resourceId=getResources().getIdentifier("status_bar_height","dimen","android"); if(resourceId>0){ return getResources().getDimensionPixelSize(resourceId);
        } return 0;
    } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

以上就是实现沉浸式状态栏的具体过程。整体代码如下：

package com.example.administrator.myjavadeamo.activity; import android.graphics.Color; import android.os.Build; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.view.ViewGroup; import android.view.Window; import android.view.WindowManager; import com.example.administrator.myjavadeamo.R; public class StatusBarActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState); supportRequestWindowFeature(Window.FEATURE_NO_TITLE);//隐藏标题栏 setContentView(R.layout.activity_status_bar); initWindow(); }

    private void initWindow() {
        Window window=getWindow(); if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.LOLLIPOP){
            //5.0以上的手机
            window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS|WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN|View.SYSTEM_UI_FLAG_LAYOUT_STABLE|View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION); window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS); ViewGroup content= (ViewGroup) findViewById(android.R.id.content); ViewGroup childView= (ViewGroup) content.getChildAt(0); if(childView!=null){
                childView.setFitsSystemWindows(true); }
            window.setStatusBarColor(Color.GREEN); }else if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.KITKAT){
            //4.4以上5.0一下的手机
            window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); ViewGroup content= (ViewGroup) findViewById(android.R.id.content); ViewGroup childView= (ViewGroup) content.getChildAt(0); if(childView!=null){
                childView.setFitsSystemWindows(true); }

            View view=new View(this); view.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,getStatusHeight())); view.setBackgroundColor(Color.GREEN); content.addView(view); }
    } /**
     * 获取状态栏高度
     * @return
     */ private int getStatusHeight() {
        int statusHeight=-1; int resourceId=getResources().getIdentifier("status_bar_height","dimen","android"); if(resourceId>0){
           return getResources().getDimensionPixelSize(resourceId); }
        return 0; }
}  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

    

        40
    

    

        41
    

    

        42
    

    

        43
    

    

        44
    

    

        45
    

    

        46
    

    

        47
    

    

        48
    

    

        49
    

    

        50
    

    

        51
    

    

        52
    

    

        53
    

    

        54
    

    

        55
    

    

        56
    

    

        57
    

    

        58
    

    

        59
    

    

        60
    

    

        61
    

    

        62
    

    

        63
    

    

        64
    

    

        65
    

    

        66
    

    

        67
    

最终实现结果：

4.4系统 
 
8.0系统

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。主要事件表总结如下： 

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

1. <view class='header1'>  
2.   <view class='header'>  
3.     <view class='header_con flex_between'>  
4.       <view class='left'>  
5.         共计{{items.length}}件商品  
6.       </view>  
7.       <view class='right flex_end'>  
8.         <view wx:if="{{!management_good}}" class='flex_center' bindtap='management'>  
9.           管理  
10.         </view>  
11.         <view wx:if="{{management_good}}" class='flex_center' bindtap='finish_management'>  
12.           完成  
13.         </view>  
14.       </view>  
15.     </view>  
16.   </view>  
17. </view>  
18. <view class='header2'>  
19.   <view class='header'>  
20.     <view class='header_con flex_between'>  
21.       <input value='类目一' disabled='{{title_disabled}}' focus="{{!title_disabled}}">  
22.       </input>  
23.       <view class='right flex_end'>  
24.         <block wx-if="{{title_disabled}}">  
25.           <image src='../../../image/hotel/delete.png' bindtap='change_classname'></image>  
26.         </block>  
27.         <block wx-if="{{!title_disabled}}">  
28.           <view class='flex_center' bindtap='finish_classname'>  
29.             完成  
30.           </view>  
31.         </block>  
32.       </view>  
33.     </view>  
34.   </view>  
35. </view>  
36. <view class='onlinechoose'>  
37.   <view class='hotel_list flex_center' wx:for="{{items}}" wx:key="items" wx:for-item="i" data-id="{{index}}" bindtap='select'>  
38.     <view class='list_cons flex_start'>  
39.       <view wx:if="{{management_good}}" class='lefts'>  
40.         <block wx-if="{{!i.checked}}">  
41.           <view class='icon_none'></view>  
42.         </block>  
43.         <block wx-if="{{i.checked}}">  
44.           <icon type="success" size="30" color="red" />  
45.         </block>  
46.       </view>  
47.       <image src='../../../image/hotel/demoimg.jpg'></image>  
48.       <view class='right'>  
49.         <view class='name'>  
50.           {{i.name}}  
51.         </view>  
52.         <view class='list1 flex_between'>  
53.           <view class='left'>  
54.             <view class='condition1'>  
55.               16㎡|双人床|含早  
56.             </view>  
57.             <view class='condition2'>  
58.               <block>  
59.                 间数：10  
60.               </block>  
61.               <block>  
62.                 间数：2  
63.               </block>  
64.             </view>  
65.           </view>  
66.         </view>  
67.         <view class='list1 flex_between'>  
68.           <view class='left'>  
69.             <view class='condition2'>  
70.               类目一  
71.             </view>  
72.           </view>  
73.         </view>  
74.       </view>  
75.     </view>  
76.   </view>  
77. </view>  
78. <view class='bottom flex_between' wx:if="{{management_good}}">  
79.   <view class='left flex_start'>  
80.     <block wx:if="{{select_all}}">  
81.       <view bindtap='select_none' class='flex_start'>  
82.         <icon type="success" size="30" color="red" />  
83.         <view>  
84.           取消全选  
85.         </view>  
86.       </view>  
87.     </block>  
88.     <block wx:if="{{!select_all}}">  
89.       <view bindtap='select_all' class='flex_start'>  
90.         <view class='select_none'>  
91.         </view>  
92.         <view>  
93.           全选  
94.         </view>  
95.       </view>  
96.     </block>  
97.   </view>  
98.   <view class='right flex_end'>  
99.     <view style='text-align:right'>  
100.       <view class='all'>  
101.         共选中{{middlearr.length}}件商品  
102.       </view>  
103.     </view>  
104.     <view bindtap='deleteitem' class='sure'>  
105.       删除  
106.     </view>  
107.   </view>  
108. </view>