HTML DOM

Window对象

设置时间

setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。

AJAX

详解onreadystatechange
onreadystatechange属性是一个方法,当Ajax引擎的状态发生改变时都会执行onreadystatechange属性对应的方法.
ajax引擎的状态属性readyState（0 1 2 3 4）：
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
当前ajax引擎的状态属性readyState为4时,说明服务器的响应已经发送给ajax请求了. 但是响应的状态码为200时说明响应的内容是正确的,这时才会根据相应内容对当前页面的html处理.
因为HTTP协议中规定返回当前请求的http响应状态码.
200 ok 304 缓存； 404 not found; 403 没有权限 501 服务器级别错误.
ajax引擎的响应状态码属性status（200 304 404 403 501）.
根据上面所说才有以下代码:

  1. xmlHttpRequest.onreadystatechange=function(){
  2. //当请求和响应同时完成,从Ajax引擎中获取响应内容,然后通过Javascript对网页进行操作
  3.   if (xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
  4.    //根据相应内容对网页进行操作的代码通常写在这里
  5.        // xmlHttpRequest. responseText            
  6.   // xmlHttpRequest. responseXML            
  7.   }
  8. }

JSON.parse

将json的字符串转换成 对象

  1. 接口地址:http://139.9.177.51:3333/api/testGet
  2. 方式：get
  3. 参数：name(string)
  4. 返回：
  5.     {
  6.         "code":200,
  7.         "msg":"没有接收到传过来的参数name呢,再试试",
  8.         "data":""
  9.     }
  10. -------------------------------------------------------------------------------
  12. 接口地址:http://139.9.177.51:3333/api/testPost
  13. 方式：post
  14. 参数：name(string)
  15. 返回：
  16.     {
  17.         "code":200,
  18.         "msg":"没有接收到传过来的参数name呢,再试试",
  19.         "data":""
  20.     }
  22. -------------------------------------------------------------------------------
  23. 接口地址:http://139.9.177.51:3333/api/emailExist
  24. 接口说明:邮箱是否存在
  25. 方式：post
  26. 参数：email(string)
  27. 返回：
  28.     {
  29.         "code":200,  //200表示成功，500表示失败
  30.         "msg":"该邮箱可以使用",
  31.         "data":""
  32.     }
  33. 已存在的邮箱：["zhangsan@qq.com", "lisi@qq.com", "wangwu@qq.com", "123@qq.com", "123456@qq.com"]
  35. -------------------------------------------------------------------------------
  37. 接口地址:http://139.9.177.51:3333/api/reg
  38. 接口说明:注册
  39. 方式：post
  40. 参数：    (string)
  41. 返回：
  42.     {
  43.         "code":200,  //200表示成功，500表示失败
  44.         "msg":"",
  45.         "data":""
  46.     }

GET

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <script>
  10.         /* 
  11.             发送get方式的请求
  12.         */
  13.         // 1. 创建一个ajax对象
  14.         var xhr = new XMLHttpRequest()
  16.         // 2. 配置请求的方式 和 请求的地址
  17.         // xhr.open('get', './serve/test.json?name=zs&email=zs@qq.com')
  18.         // xhr.open('get', 'http://139.9.177.51:3333/api/testGet')
  19.         xhr.open('get', 'http://139.9.177.51:3333/api/testGet?name=joe')
  21.         // 3. 监听ajax对象的准备状态变化
  22.         xhr.onreadystatechange = function () {
  23.             console.log('ajax的状态变化了...') 
  24.         //    console.log(xhr.readyState)
  25.             // 如果ajax准备状态等于4 且 http的状态码等于200 这个时候去接收数据 才是最完整的
  26.             if (xhr.readyState === 4 && xhr.status === 200) {
  27.                 var data = xhr.responseText
  28.                 console.log(data) // 接受服务器响应的数据
  29.             }
  30.         }
  31.         // 4. 发送请求
  32.         xhr.send()
  33.     </script>
  34. </body>
  35. </html>

POST

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <script>
  10.         // 1. 创建ajax对象
  11.         var xhr = new XMLHttpRequest()
  13.         // 2. 配置请求和方式地址
  14.         xhr.open('post', 'http://139.9.177.51:3333/api/testPost')
  16.         // 3. 监听状态改变
  17.         xhr.onreadystatechange = function () {
  18.             if (xhr.readyState === 4 && xhr.status === 200) {
  19.                 var data = JSON.parse(xhr.responseText)
  20.                 console.log(data)
  21.                 console.log(data.code)
  22.                 console.log(data.data)
  23.                 console.log(data.msg)
  24.             }
  25.         }
  27.         // 4. 设置请求头
  28.         xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
  30.         // 5. 发送
  31.         xhr.send('name=李寻欢')
  32.     </script>
  33. </body>
  34. </html>

Jquery发送AJAX的三种方式

  1. <script src="./js/jquery.js"></script>
  3. <script>  
  4.   // get 请求
  5.   $.get('http://139.9.177.51:3333/api/testGet?name=小貂蝉', function (data) {
  6.     console.log(data)
  7.   })
  9.   // post 请求
  10.   $.post('http://139.9.177.51:3333/api/testPost', { name: "李寻欢" }, function (data) {
  11.       console.log(data)
  12.     })
  14.   // 万能请求
  15.   $.ajax({
  16.     type: 'post',
  17.     url: 'http://139.9.177.51:3333/api/testPost',
  18.     data: {
  19.       name: '小貂蝉'
  20.     },
  21.     success: function (data) {
  22.       console.log(data)
  23.     }
  24.   })
  25. </script>

字符串操作

字符串格式化打印

  1. var a = "Ammy";
  2. console.log("hello ", a);
  3. // hello  Ammy
  4. console.log("hello " + a);
  5. // hello Ammy

数组操作.splice 参考

  1. var fruits = ["Banana", "Orange", "Apple", "Mango"];
  2. fruits.splice(2, 0, "Lemon", "Kiwi");
  4. //Banana,Orange,Lemon,Kiwi,Mango

语法： array.splice(index, howmany, item1, ….., itemX)

参数 描述
index 必需。整数，指定在什么位置添加/删除项目，使用负值指定从数组末尾开始的位置。
howmany 可选。要删除的项目数。如果设置为 0，则不会删除任何项目。
item1, …, itemX 可选。要添加到数组中的新项目。

BootStrap

视口

  • 可以用来显示内容的窗口大小，如果不设置，默认都有一个值，大部分都是 980
  • 标准的视口配置：
    ```javascript

width=device-width 视口宽度等于设备宽度

initial-scale=1 初始缩放比例：1 不缩放

minimum-scale=1 最小缩放： 1

maximum-scale=1 最大缩放： 1

user-scalable=no 用户缩放： 不允许

viewport-fit=cover 兼容iphoneX 刘海屏

  2. -  设备像素比： window.devicePixelRatio 
  3. <a name="WulgZ"></a>
  4. ### 媒体查询-设备断点
  6. -  简单的说： 可以使用媒体查询判断当前设备的宽度， 根据这个宽度，写适合它的布局。  
  7. ```javascript
  8. // 屏幕的最小宽度1082px  
  9. @media screen and (min-width: 1082px) {
  10.     # 这里是写css的 写在这里的css 只有在 大于1082px的屏幕下有效 【大屏有效】
  11. }
  13. // 屏幕的宽度在 540px 到 1082px之间
  14. @media screen and (min-width: 540px) and (max-width: 1082px) {
  15.     # 这里的样式 中屏有效
  16. }
  18. // 屏幕的宽度小于 540px
  19. @media screen and (max-width: 540px ) {
  20.      # 这里的样式 小屏有效
  21. }

  • 作用： 判断各个机型 

    1. /*iPhone5和iPhone SE*/
    2. @media only screen 
    3.  and (device-width : 320px) 
    4.  and (device-height : 568px) 
    5.  and (-webkit-device-pixel-ratio : 2) {
    6.  /*code*/
    7. }
    9. /* iPhone6/7/8 */
    10. @media only screen 
    11. and (device-width : 375px) 
    12. and (device-height : 667px) 
    13. and (-webkit-device-pixel-ratio : 2) {
    14.  /*code*/
    15. }
    17. /* iPhone6/7/8 Plus*/
    18. @media only screen 
    19. and (device-width : 414px) 
    20. and (device-height : 736px) 
    21. and (-webkit-device-pixel-ratio : 3) {
    22.   /*code*/
    23. }
    25. /* iPhoneX*/
    26. @media only screen 
    27. and (device-width : 375px) 
    28. and (device-height : 812px) 
    29. and (-webkit-device-pixel-ratio : 3) {
    30.    /*code*/
    31. }

  • 媒体的类型有两种 

    1. @media screen {  /* 屏幕样式 */}
    2. @media print{   /* 打印样式 */}