帅气的小钟 小钟の博客 2021-10-26T16:22:46.169Z https://zhongyuanqiong.github.io/ 小钟 Hexo javaScript-BOM操作 https://zhongyuanqiong.github.io/posts/z7.html 2021-10-21T16:19:11.000Z 2021-10-26T16:22:46.169Z BOM（浏览器对象模型 Browser object model ）

  • BOM描述与浏览器进行交互的方法和接口

BOM包括：

  • document—DOM
  • location对象 —–用于获取或者设置窗体的URL
  • history对象 —–浏览器历史记录 访问过的URL
  • navigator对象 —–有关浏览器的信息
  • Screen对象 ——对象包含有关用户屏幕的信息

location对象:

location对象的属性：

  • location.href —————- 获取或者设置整个url
  • location.search ————-返回参数
  • location.host —————- 返回主机名（域名） www.baidu.com
  • location.port —————–返回端口号
  • location.pathname ———返回路径
  • location.hash ————-返回片段 #后面的内容 常见于锚点链接

location对象方法：

  • location.assign() ————–跟href一样，可以跳转页面 （也称为重定向页面）
  • location.replace() ————-替换当前页面，因为不记录历史 ，所以不能后退
  • location.reload() —————重新加载页面 ，相当于f5刷新按钮
]]> <p>BOM（浏览器对象模型 Browser object model ）</p> <ul> <li>BOM描述与浏览器进行交互的方法和接口</li> </ul> <p>BOM包括：</p> <ul> <li>document—DOM</li> <li>location对象 JS的运行机制 https://zhongyuanqiong.github.io/posts/z10.html 2021-10-21T08:00:00.000Z 2021-10-26T16:23:15.294Z 相遇皆是缘分

JS的运行机制：

  • 先执行执行栈里面的同步任务
  • 异步任务（回调函数）放入任务队列中
  • 一旦执行栈中的全部同步任务执行完成后，系统就会按次序读取任务队列中的异步任务 于是异步任务结束等待状态，进入执行栈开始执行

JS的运行机制.png

]]> <p>相遇皆是缘分</p> <p>JS的运行机制：</p> <ul> <li>先执行执行栈里面的同步任务</li> <li>异步任务（回调函数）放入任务队列中</li> <li>一旦执行栈中的全部同步任务执行完成后，系统就会按次序读取任务队列中的异步任务 于是异步任务结束等待状态 javaScript-DOM操作 https://zhongyuanqiong.github.io/posts/z8.html 2021-10-20T08:12:47.000Z 2021-10-26T16:22:57.074Z DOM（文档对象模式 document object Model）
  • 文档：就是整个HTML网页文档
  • 对象：网页中的每一个标签
  • 模型：表示对象之间的关系 方便我们获取操作的对象

操作DOM的步骤：

1.获取操作元素：

//通过id获取标签元素   -- 获取id为box1的标签元素var box = document.getElementById('box1');//通过class获取标签元素  -- 获取class为box2的全部标签元素 注意 这里获取的是多个  是数组形式  通过下标来访问  比如box2[0]var box2 = document.getElementsByClassName('.box2');//通过标签名获取标签元素  --获取所有标签为div的元素  注意 这里获取的是多个  是数组形式  通过下标来访问  比如div[0]var divs = document.getElementsTagName('div');//通过id 或者class 来获取元素的另一种方法//通过id 获取标签元素  --获取id为box3的标签元素var box3 = document.querySelector('#box3');//通过class 获取标签元素  --获取class为box3的标签元素var box3 = document.querySelector('.box3');//通过class 获取标签颜色  --获取class为box3的全部标签元素var box3 = document.querySelectorAll('.box3');//通过标签名获取标签元素  --获取所有标签为div的元素  --获取第一个 var box1 = document.querySelector('div');

2.绑定响应事件 （回调函数）

//给对象绑定事件//对象.事件名=function(){}//比如box1.onclick=function(){}

常见的事件

  • onclick 用户点击触发
  • onload 页面加载完成触发
  • onfocus 元素获得焦点
  • onblur 元素失去焦点
  • onsubmit 提交表单被点击
  • onmouseover 鼠标移入该元素之上
  • onmouserout 鼠标移出该元素
  • onmousemove 鼠标被移动

注意：

  • 一个标签只能绑定一个相同的事件 如果给一个标签绑定两个onclick事件的话 第一个事件会失效 

  • 若想给一个标签绑定多个相同的事件的话 使用addEventListener(‘去掉on的事件名称’，function(){});

  • 可以同时为一个元素的相同事件同时绑定多个响应函数

    //例如：box1.addEventListener('click',function(){});

3.具体操作：

  • DOM操作节点

    • document.createElement(‘标签名称’); —-创建元素（标签）节点
    var btn=document.createElement('button');

    • document.createTextNode(‘文本内容’); —-创建文本节点

      var text=document.createTextNode('我是一个按钮');

    • document.createAttribute(‘属性名’);——创建属性节点

      var sx =document.createAttribute('id');

    • appendChild() ——向父节点添加一个新的子节点 用法：父节点.appendChild(子节点);

      //向上面创建好的按钮元素添加上面创建好的文本节点btn.appendChild(text);

    • removeChild()——–可以删除一个子节点 用法： 父节点.removeChild(子节点);

      document.removeChild(btn);

    • insertBefore()———可以在指定的子节点前插入新的子节点

      用法：父节点.insertBefore(新节点,旧节点);

    例子：

    <html><head>    <script>        addEventListener('load', function () {            var box = document.getElementById('box');            //创建button 元素 节点            var btn = document.createElement('button');            //创建 文本节点  内容为 我是一个按钮            var text = document.createTextNode('我是一个按钮');            //向button 节点中 添加 text 文本节点            btn.appendChild(text);            //向盒子中添加创建好的按钮            box.appendChild(btn);        });    </script></head><body>    <div id="box"></div></body></html>

  • DOM操作css样式 

    //通过样式直接设置元素的某一样式元素.style.属性='值';如： a1.style.color='red';//通过样式文本设置多项元素样式元素.styleText="属性:值;属性:值;属性:值;";如： a1.cssText="width:500px;height:100px;background:red;";

  • DOM操作元素属性 (Attribute)

    //获取HTML自带的属性  元素.属性  不能获取自定义的属性 如srcid.属性     如： a1.class  a1.id //获取标签的属性  可以获取自带的属性也可以获取自定义的属性id.getAttribute('属性名');  如： a1.getAttribute('class');//设置或者修改元素的属性  id.setAttribute('属性名','属性值');  如 a1.setAttribute('id','box2');//移除元素属性  removeAttribute('属性名');  如 a1.removeAttribute('id');

  • DOM操作表单（form）

    1. value属性 设置或者获取文本框的值

      a1.value='小钟';    alert(a1.value);

    2. onsubmit () 可设置用户提交表单触发事件 onreset() 表单重置触发事件

      <!-----onsubmit 返回false 禁止表单提交    如 onsubmit='return false'-----><form action=1.php method=post onsubmit='return a()'>    </form>

    3. disabled属性 设置或者返回是否禁用文本框

      a1.disabled='true'   //禁用该内容

    4. checked属性 作用于表单中的checkbox和radio 用于设置或者判断表单的当前状态

]]> <h2 id="DOM（文档对象模式-document-object-Model）"><a href="#DOM（文档对象模式-document-object-Model）" class="headerlink" title="DOM（文档对象模式 document obje bootstrarp框架的使用 https://zhongyuanqiong.github.io/posts/a3.html 2021-10-14T02:24:35.000Z 2021-10-26T14:59:41.851Z 欢迎来到小钟的博客！

什么是Bootstrarp框架？

  • bootstrarp是一个写网页的框架 就是说你只需要写HTML标签然后调用它提供的类你就可以很快速的做一个高大上的网页，你不用担心兼容问题，提供了很多样式供你选择！
  • 用它提供的样式和组件快速写网站
  • Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
  • 里面创建了很多样式或者组件供你使用

使用Bootstrarp框架的步骤：

  1. 到bootstrarp官网下载bootstrarp相关文件：

  2. 创建文件夹结构：

    bootstrarp文件夹.png

  3. 打开HTML文件 引入下载好的bootstrarp相关文件：

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  1. 书写你的网页内容

Bootstrarp框架的栅格系统：

超小屏幕（手机）<768px小屏设备（平板）>=768px中等屏幕（桌面显示器）>=922px大屏屏幕（大桌面显示器） >=1200px
.container 最大宽度自动（100%）750px970px1170px
类前缀.col-xs-.col-sm-.col-md-.col-lg-
列（column）数12121212

  • Bootstrarp提供了一套响应式，移动设备优先的流式栅格系统 ，随着屏幕或视口尺寸的增加，

    系统会自动分为最多12列

  • 行（row）必须放在container布局容器里面

  • 通过行（row）在水平方向创建一组列（column） 你的内容应当放在列（column）内

  • 一行最多分成12列 超过的则在下一行显示

  • 实现列的平均划分 需要给列添加类前缀

  • 可以同时为一列指定多个设备的类名，以便划分不同的份数 例如 class=”col-xs-12 col-md-2 col-lg-3”

  • 每一列默认有15px的padding

例子：

<!--------大屏幕的时候 一列占3份  中等屏幕的时候 一列占4份  平板的时候 一列占6份  手机的时候 一列占12份-------> <style>     .row{         margin-top:50px;     }        .container .row div {            border: 1px solid salmon;        }    </style>  <!-----------container容器-->    <div class="container">        <!------------一行-->        <div class="row">            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>        </div>    </div>

效果图：

5Q4lNT.png

]]> <p>欢迎来到小钟的博客！</p> <h2 id="什么是Bootstrarp框架？"><a href="#什么是Bootstrarp框架？" class="headerlink" title="什么是Bootstrarp框架？"></a>什么是Bootstrarp框架？</h2 Ajax笔记 https://zhongyuanqiong.github.io/posts/z2.html 2021-10-12T16:28:54.000Z 2021-10-26T16:21:48.383Z 为什么要学习Ajax呢？

因为传统网站中存在以下的问题：

  • 网速慢的情况下，页面加载时间长，用户只能等待
  • 表单提交后，如果一项内容不合格，需要重新填写所有表单内容
  • 页面跳转，重新加载页面，造成资源的浪费，增加用户等待时间

Ajax:阿贾克斯

它是浏览器提供的一套方法，可以实现页面无刷新就能更新数据,提高用户浏览网站应用的体验。

Ajax的应用场景：

  • 页面上拉加载更多数据
  • 列表数据无刷新分页
  • 表单项离开焦点数据验证
  • 搜索框提示文字下拉列表

Ajax的运行环境：

  • Ajax技术需要运行在网站环境中才能生效 就是要搭建在服务区上

Ajax运行原理：

Ajax相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览网页的情况下局部刷新界面，从而提高用户体验

Ajax的实现步骤：

  1. 创建对象

    • var xhr = new XMLHttpRequest();

  2. 用open(‘请求方式’,’请求地址’,同步（true）还是异步)；

    • xhr.open(‘get’,’a.php’,true);

  3. 用send发送请求 或者参数(二选一)

    • xhr.send(); (没有带参数)
    • xhr.send(username=zhong&age=20); (带参数)

  4. 监听状态变化

    • xhr.onreadystatechange = function () {

      ​ if (xhr.readyState == 4 && xhr.status == 200) {

      5.通过xhr.responseText获取服务器端响应的数据

      ​ a.innerHTML = xhr.responseText;

      ​ }

      ​ }

例子：

客户端：

<h2 id='a'></h2>  <script>      var a = document.getElementById('a');      //1.创建对象      var xhr = new XMLHttpRequest();      //2.用open('请求发送','请求地址',同步(true)还是异步);      xhr.open('get', 'a.php', true);      //  用send发送请求 或者参数      xhr.send();      //3.在Ajax的onreadystatechange中创建函数，在函数中判断Ajax的状态并体现      xhr.onreadystatechange = function () {          if (xhr.readyState == 4 && xhr.status == 200) {              //5.通过xhr.responseText获取服务器端响应的数据并且应用DOM技术局部刷新页面              a.innerHTML = xhr.responseText;          }      }  </script>

服务端：

<?phpecho 'my name is xiaozhong';?>

效果图：

Ajax.png

服务器端响应的数据格式（JSON）：

  • 在真实的项目中，服务器端大多数情况下会以JSON对象作为响应数据的格式
  • 当客户端拿到数据后，要将JSON数据和HTML字符串拼接，然后将拼接结果展示在页面中
  • 因为服务器端响应过来的数据是字符串 所以将JSON字符串转换为JSON对象（JSON.parse(Ajax对象.responseText)）

例子：

  • 客户端：
  <script>        addEventListener('load', function () {            //通过DOM操作获取网页中的标签元素            var text = document.getElementById('text');            var age = document.getElementById('age');            //创建Ajax对象            var xhr = new XMLHttpRequest();            //用什么方式请求 请求的地址 同步还是异步            xhr.open('get', 'cs.php', true);            //用send发送请求            xhr.send();            //监听状态变化            xhr.onreadystatechange = function () {                if (xhr.readyState == 4 && xhr.status == 200) {                    //JSON.parse()将JSON字符串解析为javaScript对象                    var responseText = JSON.parse(xhr.responseText);                    text.innerHTML = responseText.name;                    age.innerHTML = responseText.age;                }            }        });    </script><body>用户名:<h2 id="text"></h2>年龄：<h2 id="age"></h2></body>
  • 服务器端：
<?phpecho '{"name":"zhong","age":"20"}';?>

效果图：

服务器端传递JSON对象.png

请求参数传递：

  • GET请求方式：

  • xhr.open(‘get’,’a.php?username=xiaozhnog&pass=20’);

    <script>  //获取输入框的内容存入str var str = 'username=' + username.value + '&' + 'pass=' + pass.value + '&' + 'email=' + email.value;   // 创建AJAX对象    var xhr = new XMLHttpRequest();   //用什么方式发送请求 请求的地址 是同步还是异步   xhr.open('get', 'b.php?' + str, true);</script>

  • POST请求方式：

  • xhr.setRequestHeader(‘Content-Type’,’application/x-www-form-urlencoded’);

  • xhr.send(‘name=xiaozhong&age=20’);

<script> //创建Ajax对象                var xhr = new XMLHttpRequest();                //用什么方式请求 请求的地址 同步还是异步                xhr.open('post', 'post.php', true);                //使用send发送                var str = username.value;                xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');                xhr.send('username=' + str);</script>
]]> <h2 id="为什么要学习Ajax呢？"><a href="#为什么要学习Ajax呢？" class="headerlink" title="为什么要学习Ajax呢？"></a>为什么要学习Ajax呢？</h2><h4 id="因为传统网站中存在以下的问题："><a href= GET提交与POST提交详解 https://zhongyuanqiong.github.io/posts/z5.html 2021-10-05T05:00:00.000Z 2021-10-26T16:22:26.974Z GET提交与POST提交详解：

GET提交：

  • 以键值对的方式提交 key:value 通过键名获取键值
  • 安全性不高 因为请求数据加在地址（url）后面
  • 传输数据量小

以GET提交方式有哪些：

  • 网页中的超链接
  • form表单提交方式method为get

例子：

 <!---------第一种方法-->    <a href="login.php?username=xiaozhong">点击</a>    <!--------第二种方法-->    <form action="login.php" method="get">        用户名：<input type="text" name="username"> <br />        密码：<input type="password" name="pass"> <br />        <input type="submit" value="登录">    </form>服务器端获取传递过来的数据（php）<?php //get方式获取传递的值 通过键名获取键值$username=$_GET['username'];  ?><?php//post方式提交的获取传递的值 通过键名获取键值$username=$_POST['username'];$pass=$POST['pass'];?>服务器端获取传递过来的数据（javaweb）String pname = request.getParameter("username");String pass = request.getParameter("pass");

POST提交:

  • 以键值对的方式提交 key:value 通过键名获取键值
  • 安全性高 因为请求数据封装在HTML头中
  • 传输数据量大

以POST提交方式：

  • form表单提交方式method为post

例子：

   <!--------以post方式提交-->    <form action="login.php" method="post">        用户名：<input type="text" name="username"> <br />        密码：<input type="password" name="pass"> <br />        <input type="submit" value="登录">    </form>服务器端获取传递过来的数据（php）<?php//post方式提交的获取传递的值 通过键名获取键值$username=$_POST['username'];$pass=$POST['pass'];?>服务器端获取传递过来的数据（javaweb）String pname = request.getParameter("username");String pass = request.getParameter("pass");

有两种提交数据的方式 那到底用哪种呢？

  • 具体需求具体分析
  • 如果该项目对安全性有较高的要求 就用post
  • 如果该表单需要上传文件时 就用post
  • 如果该项目对安全性没有较高的要求 就用get
  • 值得注意的是get提交有长度限制 因为地址（url）有长度限制
]]> <h3 id="GET提交与POST提交详解："><a href="#GET提交与POST提交详解：" class="headerlink" title="GET提交与POST提交详解："></a><font color:blue="">GET提交与POST提交详解：</font CSS之三大特性（层叠性-继承性-优先性） https://zhongyuanqiong.github.io/posts/z4.html 2021-10-03T07:00:00.000Z 2021-10-26T16:22:18.441Z 各位在编写样式时有遇到以下问题吗？

  1. 在设置标签的样式时 选择器相同的情况下 样式相同会被覆盖

  2. 有些标签在你没有设置任何样式时 会默认有样式呢 比如（文字颜色和大小）

  3. 有时候设置标签样式没有效果

问题一解答：

为什么在设置标签的样式时 选择器相同的情况下  样式相同会被覆盖？--这是因为CSS的层叠性--层叠性：是指相同的选择器设置相同的样式时，一个样式会覆盖另一个样式 层叠性主要用来解决样式冲突问题--在样式冲突时，遵循就近原则（后来居上），样式不冲突就不会层叠  因为代码顺序执行

例如：

<html lang="en">  <head><style>        .box {            width: 100px; height: 100px;background-color: red;        }        .box {         /*相同的选择器*/            background-color: orange;   /*相同的样式，会被覆盖上面的背景颜色red*/             border: 3px solid green;  /*不同的样式 不会被覆盖*/        }    </style></head>    <body>         <div class="box">box</div>    </body>    </html>

效果图：

问题1.png

问题二解答：

有些标签在你没有设置任何样式时 会默认有样式呢 比如（文字颜色和大小）？--这是因为CSS的继承性--继承性:子标签会继承父标签的某些样式 如文字颜色和大小 以text-,line-,font-开头的会被继承

例如：

 <html>        <style>            /*只设置父标签div的样式 没有设置子标签p的样式*/            .box {                     width: 100px;            height: 100px;            background-color: violet;            color: greenyellow;            font-size: 25px;        }         </style>    <div class="box">   <!----父标签----->           <p>我是小钟</p>    <!------子标签------>     </div></html>

效果图：

问题二.png

问题三解答：

为什么有时候设置标签样式没有效果？--这是因为CSS中的优先级--优先级（权重）：当给一个标签设置样式时，选择不同的选择器时， 会执行选择器权重高的样式，选择器权重低的样式不会被执行 --权重可以叠加

优先级（权重）表格：

选择器选择器的权重
继承或者*0.0.0.0
标签选择器0.0.0.1
类选择器，伪类选择器0.0.1.0
id选择器0.1.0.0
行内样式1.0.0.0
！important无穷大
可以简单的记忆：---继承和通配符的权重为0---标签选择器的权重为1---类选择器以及伪类选择器的权重为10---id选择器的权重为100---行内样式的权重为1000--- !important 的权重为无穷大

权重叠加：

--如：  -- p #text {}    权重为 1 + 100 = 101  -- .a1 #w {}   权重为 10 + 100 = 110

继承例子：

<html>    <style>        /*继承权重为0*/        .box1{             width: 100px; height: 100px;border: 2px solid black;            color: green;            }        p{            color:red;              }    </style>    <div class="box1">            <p>小钟</p>    </div></html>

效果图：

继承.png

权重叠加例子：

<html>      <style>            .box2 {               /* 权重为 0.0.1.0 */                width: 10px;                height: 10px;                background-color: coral;            }            .box1 .box2 {           /* 权重为0.0.1.0 + 0.0.1.0 = 0.0.2.0 */                width: 200px;                height: 200px;                background-color: greenyellow;            }     </style>    <div class="box1">        <div class="box2">我是一个盒子</div>    </div></html>

效果图：

权重叠加.png

]]> <h2 id="各位在编写样式时有遇到以下问题吗？"><a href="#各位在编写样式时有遇到以下问题吗？" class="headerlink" title="各位在编写样式时有遇到以下问题吗？"></a>各位在编写样式时有遇到以下问题吗？</h2><ol> <li><p>在 HTML中块级元素和行内元素以及行内块元素详解 https://zhongyuanqiong.github.io/posts/z6.html 2021-10-01T08:00:00.000Z 2021-10-26T16:31:34.554Z 你是否有以下困惑：

  1. 为什么有些标签能够设置宽度和高度，而有些标签不能设置呢？

  2. 为什么有些标签能够独占一行，而有些标签一行可以放很多个呢？

  3. 可我就想让这个标签可以设置宽度和宽度并且自己不占满一行呢？

问题1解答：

为什么有些标签能够设置宽度和高度，而有些标签不能设置呢？---因为在html中块级（block）元素和行内块（inline-block）元素可以设置宽度和高度---行内（inline）元素不可以设置宽度和高度

例如:

<html>    <style>        .box1{             width:200px;height:200px;background-color: violet;        }        .box1{             width:200px;height:200px;background-color: red;        }    </style>    <div class=box1>box1</div>     <span class=box2>box2</span></html>

效果：

问题1.png

问题2解答：

为什么有些标签能够独占一行，而有些标签一行可以放很多个呢？  ---因为块级（block）元素独占一行  ---相邻行内（inline）元素或者行内块(inline-block)元素一行可以放很多个，直到充满整个父级盒子的宽度，才会换下一行显示

例如：

<html><style>    .box1 {        width: 200px;height: 100px;background-color: tomato;    }    .box2 {        background-color: greenyellow;    }</style><div class=box1>one</div><div class=box1>two</div> <br /><span class=box2>1</span><span class=box2>2</span><input type="text"><input type="text"></html>

效果：

问题2.png

问题3解答：

可我就想让这个标签可以设置宽度和宽度并且自己不占满一行呢？ ---如果该标签不是块级（block）元素或者不是行内块元素时： ---就将该标签进行模式转换成块级（display: block;）或者行内块元素(display: inline-block;)

例如:

<html><style>    .box1 {        display: block;        width: 200px;        height: 200px;        background-color: pink;    }</style><span class="box1"></span></html>

效果：

问题3.png

常见的块级元素，行内元素，行内块元素有哪些？

---块级元素：  div,h1~h6, p,ul,ol,li---行内元素：  a,span,i,strong---行内块元素：input,img,td

总结：

--块级元素的特点：   (1)可以设置宽度和高度  （2）自己单独占一行  （3）宽度默认是父级元素的宽度的100%  （4）块级元素是一个容器或者是一个盒子，里面可以放行内元素或者放行内块元素  --行内元素的特点：  （1）不能设置宽度和高度（无效）  （2）相邻行内元素一行可以放很多个，直到充满整个父级盒子的宽度，才会换下一行显示   （3）默认宽度是它本身的内容宽度   （4）行内元素只能放行内元素或者文本                              -行内块元素的特点：   （1）它拥有块级元素和行内元素的特点   （2）可以设置宽度和高度（块级元素的特点）   （3）宽度是它本身的内容宽度（行内元素的特点）   （4）一行可以显示多个行内元素（行内元素的特点）

作者：小钟个人博客

]]> <h1 id="你是否有以下困惑："><a href="#你是否有以下困惑：" class="headerlink" title="你是否有以下困惑："></a>你是否有以下困惑：</h1><ol> <li><p>为什么有些标签能够设置宽度和高度，而有些标签不能设置呢？</p> JS的同步与异步 https://zhongyuanqiong.github.io/posts/z9.html 2021-09-21T08:00:00.000Z 2021-10-26T16:23:05.208Z 相遇皆是缘分

js是单线程语言 同一时间只能做一件事情 所以就意味着 所有的任务需要排队 上一个任务执行结束了 ， 下一个任务才会去执行
这样就会导致 js执行时间过长的话 ， 就会造成页面渲染不连贯 为了解决这个问题 html5就允许JavaScript脚本可以创建多线程 所以就出现了同步和异步
同步和异步：
同步：上一个任务执行结束后 下一个任务才会执行；
异步：在执行这个任务的同时，你还可以执行其他的任务；
它们本质的区别是：这条流水线上各个流程的执行顺序不同；
同步任务：同步任务都在主线程上执行，形成一个执行
异步任务：js的异步是通过回调函数实现的；
异步任务有以下三种类型：
1.普通事件，如click,resize

​ 2.资源加载，如load,error等

​ 3.定时器： setinterval , setTimeout等

异步任务相关回调函数添加到任务队列（消息队列）

]]> <p>相遇皆是缘分</p> <p>js是单线程语言 同一时间只能做一件事情 所以就意味着 所有的任务需要排队 上一个任务执行结束了 ， 下一个任务才会去执行<br>这样就会导致 js执行时间过长的话 ， 就会造成页面渲染不连贯 为了解决这个问题 html5就允许JavaScr Markdown快速入门小技巧(hexo博客文章--格式用法) https://zhongyuanqiong.github.io/posts/z1.html 2021-06-21T08:00:00.000Z 2021-10-26T16:21:57.691Z 相遇皆是缘分

Markdown 的快速入门(后缀是 .md)

快捷键

ctrl+shift+1 大纲显示ctrl+/ 源代码显示

代码块：

```java(html等等)   会自动提示

标题

#标题1 （大）##标题2###标题3####标题4 （小）以此类推 最高标题6

加粗

//加粗**加粗**//代码高亮显示==高亮==//删除线~~删除线~~//斜体  *斜体内容*

引用：

//引用语法>作者：泽>>作者：泽>>>作者：泽

作者：泽

作者：泽

作者：泽

分割线

//分割线---***

图片插入

//在线图片与本地图片![照片名子]（/image/me.png）

img

超链接

//超链接语法[超链接名字]（https://gihub.com/yerenping）

我的天空

列表

//无需列表- 目录1  -后加空格- 目录2- 目录3//有序列表  1+. +名称

表格

右键》插入》表格用代码过于复杂不推荐使用
姓名数字语文
小王8521
]]> <p>相遇皆是缘分</p> <h1 id="Markdown-的快速入门-后缀是-md"><a href="#Markdown-的快速入门-后缀是-md" class="headerlink" title="Markdown 的快速入门(后缀是 .md)"></a>Markdo