欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

学习了事件的冒泡与事件的委托代理以及表单提交验证js线程运行机制还有字符的拼接截取替换html插入以及数组常用的api，例如转类数组增删遍历归并删除替换等

程序员文章站 2022-04-17 19:03:41
...
事件绑定的主体及触发者

这里面好像没啥好说的，都是老师之前教过的知识，老师也说了event都可以自己查询，是常用的

    

  1.  <button onclick="shou()">点击</button>
    2. 

  2.     <ul class="lisk">
    3. 

  3.       <li class="li1">测试1</li>
    4. 

  4.       <li class="li2">测试2</li>
    5. 

  5.       <li class="li3">测试3</li>
    6. 

  6.       <li class="li4">测试4</li>
    7. 

  7.       <li class="li5">测试5</li>
    8. 

  8.     </ul>
    9. 

  9.     <script>
    10. 

  10.       function shou() {
    11. 

  11.         //   event事件的对象，包含了很多的值 type 类型,查看当前类型,肯定就是点击咯
    12. 

  12.         console.log(event.type);
    13. 

  13.         // currentTarget绑定事件的主体,也就是标签,当前绑定的是button按钮
    14. 

  14.         console.log(event.currentTarget);
    15. 

  15.         //target事件触发者,自己想想,你点击的是谁?button按钮,所以button按钮就是触发者,也等于事件的主体
    16. 

  16.         console.log(event.target);
    17. 

  17.         // 可以试下//返回了一个true
    18. 

  18.         console.log(event.currentTarget === event.target);
    19. 

  19.         if (event.currentTarget === event.target) {
    20. 

  20.           console.log("完全相同");
    21. 

  21.         }
    22. 

  22.         //   // 拿到li标签的一组，声明为li
    23. 

  23.         //   const li = document.querySelectorAll("li");
    24. 

  24.         //   // for循环拿到每一个li标签
    25. 

  25.         //   for (i = 0, length = li.length; i < length; i++) {
    26. 

  26.         //       // 给li标签添加一个点击事件并返回一下绑定的事件主体
    27. 

  27.         //       //   li[0]到4，.onclick添加一个点击事件
    28. 

  28.         //       li[i].onclick = console.log(event.currentTarget);
    29. 

  29.         //       //   查看每一个li的id
    30. 

  30.         console.log(i);
    31. 

  31.       }
    32.

示例截图：
学习了事件的冒泡与事件的委托代理以及表单提交验证js线程运行机制还有字符的拼接截取替换html插入以及数组常用的api，例如转类数组增删遍历归并删除替换等

对li标签的冒泡代码：

    

  1.  const li = document.querySelectorAll("li");
    2. 

  2.       // for循环拿到每一个li标签
    3. 

  3.       for (i = 0, length = li.length; i < length; i++) {
    4. 

  4.         // 给li标签添加一个点击事件并返回一下绑定的事件主体
    5. 

  5.         //   li[0]到4，.onclick添加一个点击事件
    6. 

  6.         // 老师说onclick此时，就是事件冒泡 默认就是冒泡阶段
    7. 

  7.         li[i].onclick = function () {
    8. 

  8.           console.log(event.currentTarget.textContent);
    9. 

  9.           console.log(event.target.textContent);
    10. 

  10.           console.log(event);
    11. 

  11.         };
    12. 

  12.       }
    13.

示例截图：
学习了事件的冒泡与事件的委托代理以及表单提交验证js线程运行机制还有字符的拼接截取替换html插入以及数组常用的api，例如转类数组增删遍历归并删除替换等
冒泡的逐级上报！！
代码示例：

    

  1. //逐级冒泡，就是从下往上，一直到html
    2. 

  2.       // ul.onclick
    3. 

  3.       document.querySelector("ul").onclick = () => console.log(event.currentTarget);
    4. 

  4.       // body.onclick
    5. 

  5.       document.body.onclick = () => console.log(event.currentTarget);
    6. 

  6.       // html.onclick
    7. 

  7.       // documentElement 拿到html 别忘了语法糖
    8. 

  8.       document.documentElement.onclick = () => console.log(event.currentTarget);
    9.

示例代码截图：
学习了事件的冒泡与事件的委托代理以及表单提交验证js线程运行机制还有字符的拼接截取替换html插入以及数组常用的api，例如转类数组增删遍历归并删除替换等

事件阻止冒泡：
阻止冒泡代码：
stopPropagation()
使用示例：
event.stopPropagation();
需在点击事件执行命令的函数中使用
示例代码：

    

  1. for (i = 0, length = li.length; i < length; i++) {
    2. 

  2.         // 给li标签添加一个点击事件并返回一下绑定的事件主体
    3. 

  3.         //   li[0]到4，.onclick添加一个点击事件
    4. 

  4.         // 老师说onclick此时，就是事件冒泡 默认就是冒泡阶段
    5. 

  5.         li[i].onclick = function () {
    6. 

  6.           // 阻止冒泡语法糖.stopPropagation()
    7. 

  7.           event.stopPropagation();
    8. 

  8.           console.log(event.currentTarget.textContent);
    9. 

  9.           console.log(event.target.textContent);
    10. 

  10.           console.log(event);
    11. 

  11.         };
    12. 

  12.       }
    13.

示例截图：
学习了事件的冒泡与事件的委托代理以及表单提交验证js线程运行机制还有字符的拼接截取替换html插入以及数组常用的api，例如转类数组增删遍历归并删除替换等
事件的委托：
顾名思义 事件的委托就是让另外一个标签去执行当前标签的事件行为，代码示例的li标签让父级ul
示例代码：

    

  1.   /////////////
    2. 

  2.       //事件委托/////
    3. 

  3.       //把点击事件绑定到ul上面
    4. 

  4.       // 将原来逐个添加到li上的click,现在根据冒泡原理,只需要添加到父级ul一次就可以
    5. 

  5.       // 事件委托: 子元素上的事
    6. 

  6.       document.querySelector("ul").onclick = function () {
    7. 

  7.         //   阻止冒泡
    8. 

  8.         // event.stopPropagation();
    9. 

  9.         // 打印的绑定者是ul
    10. 

  10.         console.log(event.currentTarget);
    11. 

  11.         // 但触发者竟然是li
    12. 

  12.         console.log(event.target);
    13. 

  13.         console.log(event.currentTarget === event.target);
    14. 

  14.         // 从79行开始，这就是事件的委托，事件的代理，委托给了ul，li的上级触发
    15. 

  15.       };
    16.

示例截图：
学习了事件的冒泡与事件的委托代理以及表单提交验证js线程运行机制还有字符的拼接截取替换html插入以及数组常用的api，例如转类数组增删遍历归并删除替换等
全部代码示例：

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6. 

  6.     <title>事件的冒泡与事件的委托代理</title>
    7. 

  7.   </head>
    8. 

    9. 

  9.   <body>
    10. 

  10.     <button onclick="shou()">点击</button>
    11. 

  11.     <ul class="lisk">
    12. 

  12.       <li class="li1">测试1</li>
    13. 

  13.       <li class="li2">测试2</li>
    14. 

  14.       <li class="li3">测试3</li>
    15. 

  15.       <li class="li4">测试4</li>
    16. 

  16.       <li class="li5">测试5</li>
    17. 

  17.     </ul>
    18. 

  18.     <script>
    19. 

  19.       function shou() {
    20. 

  20.         //   event事件的对象，包含了很多的值 type 类型,查看当前类型,肯定就是点击咯
    21. 

  21.         console.log(event.type);
    22. 

  22.         // currentTarget绑定事件的主体,也就是标签,当前绑定的是button按钮
    23. 

  23.         console.log(event.currentTarget);
    24. 

  24.         //target事件触发者,自己想想,你点击的是谁?button按钮,所以button按钮就是触发者,也等于事件的主体
    25. 

  25.         console.log(event.target);
    26. 

  26.         // 可以试下//返回了一个true
    27. 

  27.         console.log(event.currentTarget === event.target);
    28. 

  28.         if (event.currentTarget === event.target) {
    29. 

  29.           console.log("完全相同");
    30. 

  30.         }
    31. 

  31.         //   // 拿到li标签的一组，声明为li
    32. 

  32.         //   const li = document.querySelectorAll("li");
    33. 

  33.         //   // for循环拿到每一个li标签
    34. 

  34.         //   for (i = 0, length = li.length; i < length; i++) {
    35. 

  35.         //       // 给li标签添加一个点击事件并返回一下绑定的事件主体
    36. 

  36.         //       //   li[0]到4，.onclick添加一个点击事件
    37. 

  37.         //       li[i].onclick = console.log(event.currentTarget);
    38. 

  38.         //       //   查看每一个li的id
    39. 

  39.         console.log(i);
    40. 

  40.       }
    41. 

  41.       //为什么拿出来，因为目前实在button里面，拿到外面li就是一个单独的点击事件
    42. 

  42.       const li = document.querySelectorAll("li");
    43. 

  43.       // for循环拿到每一个li标签
    44. 

  44.       for (i = 0, length = li.length; i < length; i++) {
    45. 

  45.         // 给li标签添加一个点击事件并返回一下绑定的事件主体
    46. 

  46.         //   li[0]到4，.onclick添加一个点击事件
    47. 

  47.         // 老师说onclick此时，就是事件冒泡 默认就是冒泡阶段
    48. 

  48.         li[i].onclick = function () {
    49. 

  49.           console.log(event.currentTarget.textContent);
    50. 

  50.           console.log(event.target.textContent);
    51. 

  51.           console.log(event);
    52. 

  52.         };
    53. 

  53.       }
    54. 

  54.       //逐级冒泡，就是从下往上，一直到html
    55. 

  55.       // ul.onclick
    56. 

  56.       document.querySelector("ul").onclick = () => console.log(event.currentTarget);
    57. 

  57.       // body.onclick
    58. 

  58.       document.body.onclick = () => console.log(event.currentTarget);
    59. 

  59.       // html.onclick
    60. 

  60.       // documentElement 拿到html 别忘了语法糖
    61. 

  61.       document.documentElement.onclick = () => console.log(event.currentTarget);
    62. 

  62.       for (i = 0, length = li.length; i < length; i++) {
    63. 

  63.         // 给li标签添加一个点击事件并返回一下绑定的事件主体
    64. 

  64.         //   li[0]到4，.onclick添加一个点击事件
    65. 

  65.         // 老师说onclick此时，就是事件冒泡 默认就是冒泡阶段
    66. 

  66.         li[i].onclick = function () {
    67. 

  67.           // 阻止冒泡语法糖.stopPropagation()
    68. 

  68.           event.stopPropagation();
    69. 

  69.           console.log(event.currentTarget.textContent);
    70. 

  70.           console.log(event.target.textContent);
    71. 

  71.           console.log(event);
    72. 

  72.         };
    73. 

  73.       }
    74. 

  74.       for (i = 0, length = li.length; i < length; i++) {
    75. 

  75.         // 停止点击事件
    76. 

  76.         li[i].onclick = null;
    77. 

  77.       }
    78. 

  78.       /////////////
    79. 

  79.       //事件委托/////
    80. 

  80.       //把点击事件绑定到ul上面
    81. 

  81.       // 将原来逐个添加到li上的click,现在根据冒泡原理,只需要添加到父级ul一次就可以
    82. 

  82.       // 事件委托: 子元素上的事
    83. 

  83.       document.querySelector("ul").onclick = function () {
    84. 

  84.         //   阻止冒泡
    85. 

  85.         // event.stopPropagation();
    86. 

  86.         // 打印的绑定者是ul
    87. 

  87.         console.log(event.currentTarget);
    88. 

  88.         // 但触发者竟然是li
    89. 

  89.         console.log(event.target);
    90. 

  90.         console.log(event.currentTarget === event.target);
    91. 

  91.         // 从79行开始，这就是事件的委托，事件的代理，委托给了ul，li的上级触发
    92. 

  92.       };
    93. 

  93.     </script>
    94. 

  94.   </body>
    95. 

  95. </html>
    96.
表单事件的提交验证

event配合标签
preventDefault禁止用户主动提交/本来的php提交禁用掉,用js提交数据
stopPropagation禁用掉冒泡操作
示例:

    

  1.  //   禁用函数preventDefault()
    2. 

  2.           event.preventDefault();
    3. 

  3.           //   禁用冒泡
    4. 

  4.           event.stopPropagation();
    5.

老师的提交作业,是当用户失去焦点时验证,我在网上查了下代码,写了一个
使用了一个空函数message写的
这一部分代码,没啥需要截图的,直接上代码:

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. 

  7.     <title>表单事件</title>
    8. 

  8.   </head>
    9. 

  9.   <body>
    10. 

  10.     <div>
    11. 

  11.       <form action="" method="post" id="login">
    12. 

  12.         <label class="title">用户登录</label>
    13. 

  13.         <label for="email">邮箱:</label>
    14. 

  14.         <input type="email" id="email" name="email" value="" autofocus onblur="message()" />
    15. 

  15.         <label for="password">密码:</label>
    16. 

  16.         <input type="password" id="password" name="password" onblur="message()" />
    17. 

  17.         <button name="submit" onclick="ad(this)">登录</button>
    18. 

  18.       </form>
    19. 

  19.       <script>
    20. 

  20.         function ad(ele) {
    21. 

  21.           // 测试下弹窗
    22. 

  22.           //   alert("测试");
    23. 

  23.           //   禁用提交行为,就是php带的提交 改为js提交 或者是在from里面使用一个onsubmit 返回一个false
    24. 

  24.           //   禁用函数preventDefault()
    25. 

  25.           event.preventDefault();
    26. 

  26.           //   禁用冒泡
    27. 

  27.           event.stopPropagation();
    28. 

    29. 

  29.           console.log(event);
    30. 

  30.           //   拿到email方便以后的操作/是通过函数的储存的值拿的,我只能这么理解,就是ele拿的
    31. 

  31.           let email = ele.form.email;
    32. 

  32.           //   拿到password 方便以后的操作
    33. 

  33.           let password = ele.form.password;
    34. 

  34.           //   判断value的长度是否为空
    35. 

  35.           if (email.value.length === 0) {
    36. 

  36.             alert("请输入邮箱");
    37. 

  37.             // 如果没输入提示用户输入,光标回到email框
    38. 

  38.             email.focus();
    39. 

  39.             // 返回值,我注释了,发现还可以
    40. 

  40.             return false;
    41. 

  41.             // 判断password长度是否为空
    42. 

  42.           } else if (password.value.length === 0) {
    43. 

  43.             alert("请输入密码");
    44. 

  44.             // 给email 输入框返回一个光标
    45. 

  45.             password.focus();
    46. 

  46.             return false;
    47. 

  47.           } else {
    48. 

  48.             alert("验证通过");
    49. 

  49.           }
    50. 

  50.         }
    51. 

  51.         // 1. submit: 提交时触发
    52. 

  52.         // 2. focus: 获取焦点时触发
    53. 

  53.         // 3. blur: 失去焦点时触发
    54. 

  54.         // 4. change: 值发生改变且失去焦点时触发
    55. 

  55.         // 5. input: 值发生改变就会触发,不必等失去焦点,与change不同
    56. 

    57. 

  57.         // 作业: 将该表单验证方式,改为失去焦点就进行非空验证, 而不必等到点击提交按钮时
    58. 

  58.         ///////////////////////////////////////////////////
    59. 

  59.         ////////////////////作业部分////////////////////
    60. 

  60.         function message() {
    61. 

  61.           if (email.value.length === 0) {
    62. 

  62.             alert("请输入邮箱");
    63. 

  63.             // 给email 输入框返回一个光标
    64. 

  64.             email.focus();
    65. 

  65.             return false;
    66. 

  66.           } else if (password.value.length === 0) {
    67. 

  67.             alert("请输入密码");
    68. 

  68.             return false;
    69. 

  69.           } else {
    70. 

  70.             alert("验证通过");
    71. 

  71.           }
    72. 

  72.         }
    73. 

  73.       </script>
    74. 

  74.     </div>
    75. 

  75.     <style>
    76. 

  76.       * {
    77. 

  77.         margin: 0;
    78. 

  78.         padding: 0;
    79. 

  79.         box-sizing: border-box;
    80. 

  80.       }
    81. 

  81.       body {
    82. 

  82.         width: 100vw;
    83. 

  83.         height: 100vh;
    84. 

  84.         display: grid;
    85. 

  85.         background-color: aquamarine;
    86. 

  86.         place-content: center;
    87. 

  87.       }
    88. 

  88.       div {
    89. 

  89.         width: 20em;
    90. 

  90.         height: 10em;
    91. 

  91.       }
    92. 

  92.       form {
    93. 

  93.         display: grid;
    94. 

  94.       }
    95. 

  95.       #login > label:first-of-type {
    96. 

  96.         text-align: center;
    97. 

  97.       }
    98. 

  98.     </style>
    99. 

  99.   </body>
    100. 

  100. </html>
    101.

js运行机制之单线程(主线程)+事件循环
代码示例介绍:

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. 

  7.     <title>js运行机制: 单线程+事件循环</title>
    8. 

  8.   </head>
    9. 

  9.   <body>
    10. 

  10.     <script>
    11. 

  11.       // 1. 单线程: 主线程
    12. 

  12.       // 同步: 代码的"书写顺序"与"执行顺序"一致, 写在前面先执行
    13. 

  13.       console.log(1);
    14. 

  14.       console.log(2);
    15. 

  15.       console.log(3);
    16. 

    17. 

  17.       console.log("--------------");
    18. 

    19. 

  19.       console.log(1);
    20. 

  20.       setTimeout(() => console.log(2), 3000);
    21. 

  21.       console.log(3);
    22. 

    23. 

  23.       //   定时任务: setTimeout(函数,等待时间)
    24. 

  24.       //   console.log(1);
    25. 

  25.       // 要等待三秒后才执行,这三秒理论上说,是什么也做不了,代码到这里就"阻塞"
    26. 

  26.       //   setTimeout(() => console.log(2), 3000);
    27. 

  27.       //   console.log(3);
    28. 

    29. 

  29.       // js引擎将第二个任务离开了"主线程",放到了"任务队列"的地方
    30. 

  30.       // 当主线程上已没有任务的时候,由"事件循环"将这个任务重新放回到主线程中执行
    31. 

    32. 

  32.       // 执行机制
    33. 

  33.       // 1. 同步任务: 主线程
    34. 

  34.       // 2. 异步任务: 任务队列, 事件循环来调度
    35. 

    36. 

  36.       // 哪些是异步任务?
    37. 

  37.       // 1. 定时任务, 2. 事件, 3, IO操作(input,output), 4. http请求
    38. 

    39. 

  39.       // 怎么实现异步? 回调函数
    40. 

  40.     </script>
    41. 

  41.   </body>
    42. 

  42. </html>
    43.
单线程异步的演示及解读:

我的代码:(我的两个输入框注意区分,一个是带定时器的 一个是不带的)

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. 

  7.     <title>Document</title>
    8. 

  8.   </head>
    9. 

  9.   <body>
    10. 

  10.     <form action="">
    11. 

  11.       <input type="text" name="text" id="text" value="" onkeydown="ad(this)" />
    12. 

  12.       <input
    13. 

  13.         type="text"
    14. 

  14.         name="text"
    15. 

  15.         id="text"
    16. 

  16.         value=""
    17. 

  17.         onkeydown="setTimeout(() => {adb(this)
    18. 

  18.         // 当主线程带有延迟操作时,使用一次性定时器给线程增加一个定时操作,也就是异步操作
    19. 

  19.       }, 1); "
    20. 

  20.       />
    21. 

  21.        <input type="text" oninput="adc(this)" placeholder="input" />
    22. 

  22.     </form>
    23. 

  23.     <script>
    24. 

  24.       function ad(ele) {
    25. 

  25.         let value = ele.value;
    26. 

  26.         console.log(value);
    27. 

  27.       }
    28. 

  28.       function adb(ele) {
    29. 

  29.         let value = ele.value;
    30. 

  30.         console.log(value);
    31. 

  31.       }
    32. 

  32.        function adc(ele) {
    33. 

  33.         let value = ele.value;
    34. 

  34.         console.log(value);
    35. 

  35.       }
    36. 

  36.     </script>
    37. 

  37.   </body>
    38. 

  38. </html>
    39.

老师的代码:

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. 

  7.     <title>单线程异步的演示</title>
    8. 

  8.   </head>
    9. 

  9.   <body>
    10. 

  10.     <form action="" style="display: grid; gap: 1em; width: 20em">
    11. 

  11.       <input type="text" onkeydown="console.log(this.value)" placeholder="同步" />
    12. 

    13. 

  13.       <!-- 慢半拍 -->
    14. 

  14.       <!-- 分析为什么第一次获取不到?
    15. 

  15.       1. 当按下某个键时, 它会触发keydown事件,事件循环将事件方法从任务队列添加到主线中,并立即调用,即console.log立即执行
    16. 

  16.       2. 但是此时这个键对应的值,例如1, 还没有被DOM渲染到input输入框中,所以console.log获取不到值,或获取一个空值
    17. 

  17.       3. 因为"按下1" 和 "显示1" 是2步操作,而console.log是在第1步结束后一瞬间执行,而值还没被显示到input框中
    18. 

  18.       4. 所以, console.log()执行时机,是在"按下"与"显示"之间,所以无法获取到用户输入的内容或获取到一个空值
    19. 

  19.       5. 为什么第2次按下时,console.log()可以获取到了呢?
    20. 

  20.       6. 是因为当用户再次按下时, console.log()立即执行,此时input中已经有了内容,就是上一次的输入内容,所以就正常输出了 -->
    21. 

    22. 

  22.       <!-- 解决方案也很简单,让console.log()异步执行即可,等到input框中的内容渲染完成之后再执行 -->
    23. 

  23.       <!-- 必知内容:
    24. 

  24.       1. DOM渲染是同步任务, 这里的dom渲染,是指将内容显示到input框中
    25. 

  25.       2. DOM事件是异步任务, 使用keydown
    26. 

  26.       3. 异步必须在同步完成后执行 
    27. 

  27.       -->
    28. 

    29. 

  29.       <!-- 现在简单了, 将console.log异步调用就可以,直接放在setTimeout中就可以,将延迟设置为0 -->
    30. 

    31. 

  31.       <!-- 因为setTimeout是异步任务,一定会等主线程中的同步任务执行完毕才会进入主线程,转为同步任务执行
    32. 

  32.       而此时, dom渲染已完成, input框中已经有了数据,所以console.log()就正确的, 同步的获取到了数据
    33. 

  33.       完美解决了"慢半拍"的问题 -->
    34. 

  34.       <input type="text" onkeydown="setTimeout(()=>console.log(this.value),0)" placeholder="异步" />
    35. 

    36. 

  36.       <!-- 解决方案 -->
    37. 

  37.       <input type="text" oninput="console.log(this.value)" placeholder="input" />
    38. 

    39. 

  39.       <!-- input = keydown + setTimeout -->
    40. 

  40.     </form>
    41. 

  41.   </body>
    42. 

  42. </html>
    43.
字符中常用api-1操作
代码 示例 说明
.length str.length 索引长度
.charAt str.charAt(5) 索引返回当前的索引的字符,示例是第五个
.indexOf str.indexOf(“p”) 根据字符返回当前字符的索引
.search str.search(“中”) 跟indexOf一样,但是支持正则
.concat str.concat(“(“, “学php”, “)”) 拼装,不过现在都用+习惯来拼装了
.replace str.replace(“php”, “PHP”) 查找替换,并不是完整意义上的替换
.slice str.slice(0, 3) 根据索引取字符串
.substr str.substr(-5, 3) 根据索引字符串,支持正则和从后面提取
.split str.split(“”) 字符串拆分成数组,如果不加””就直接一个数组
.toLowerCase str.toLowerCase() 转换字母的大小写
html相关的一组 html相关的一组 html相关的一组
.link(“域名”) str.link(“域名”) 直接插入域名
.bold() str.bold() 加粗操作
.big() str.big() 加大操作
.anchor(“url”) str.anchor(“url”) 增加一个锚点,增加到name属性

没有什么比截图示例更好的了!!
上代码:

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. 

  7.     <title>字符中常用api-1操作</title>
    8. 

  8.   </head>
    9. 

  9.   <body>
    10. 

  10.     <script>
    11. 

  11.       let str = "pHp中文网";
    12. 

  12.       //   .length 查询字符长度 经常用了..
    13. 

  13.       console.log(str.length);
    14. 

  14.       //.charAt 根据索引返回当前的索引的字符
    15. 

  15.       console.log(str.charAt(5)); //返回的是--网
    16. 

  16.       //.indexOf 根据字符获取索引 输入相关字符数字,返回当前数组的索引值
    17. 

  17.       console.log(str.indexOf("p")); //发现一个问题,里面要是俩p.返回离索引0包括索引0在内的最近的一个
    18. 

  18.       //   .search跟indexOf一样的 但支持正则
    19. 

  19.       //   console.log(str.search("中"));
    20. 

  20.       // concat 字符串的拼装
    21. 

  21.       console.log(str.concat("(", "学php", ")"));
    22. 

  22.       //   都用+和`` 拼装了
    23. 

  23.       // replace替换
    24. 

  24.       console.log(str.replace("php", "PHP")); //查找替换,只是无中生有的替换,并不是真正意义上的替换,
    25. 

  25.       //   重新输出一下,仍然是原来的
    26. 

  26.       console.log(str);
    27. 

  27.       //   slice 取子串
    28. 

  28.       //   取值从0到3索引//不支持从后面取
    29. 

  29.       console.log(str.slice(0, 3));
    30. 

  30.       //   substr 取子串 支持从后往前取substr(-3,3)代表从后面第三个取三个 -1就是最后一个
    31. 

  31.       console.log(str.substr(-5, 3));
    32. 

  32.       //   split 字符串拆分变成数组
    33. 

  33.       console.log(str.split("")); //要转为数组,括号里面加个引号,如果不加,整个字符都变成了一个数组
    34. 

  34.       //   toLowerCase, toUpperCase 大小写转换
    35. 

  35.       console.log(str.toLowerCase()); //刚刚改了下,中间H改成了大小,转换后又为小小了
    36. 

  36.       console.log(str.toUpperCase()); //转换成大写
    37. 

  37.       //   html相关的一组
    38. 

  38.       console.log(`<a href="https://php.cn">${str}</a>`);
    39. 

  39.       //   以字符的写法更简单,其实愿意用哪个用哪个
    40. 

  40.       console.log(str.link("https:www.baidu.com"));
    41. 

  41.       console.log(str.bold()); //加粗
    42. 

  42.       console.log(str.big()); //加大
    43. 

  43.       console.log(str.anchor("url")); //增加一个name属性,值为url,也叫锚点
    44. 

  44.     </script>
    45. 

  45.   </body>
    46. 

  46. </html>
    47.

上截图:
学习了事件的冒泡与事件的委托代理以及表单提交验证js线程运行机制还有字符的拼接截取替换html插入以及数组常用的api，例如转类数组增删遍历归并删除替换等

数组的api-1

使用到了…rest展开、复制操作
使用到了Array.of 离散值改变为数组操作
Array.from 类数组进行转换
代码部分：

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6. 

  6.     <title>Document</title>
    7. 

  7.   </head>
    8. 

    9. 

  9.   <body></body>
    10. 

  10.   <script>
    11. 

  11.     let arr = [
    12. 

  12.       1,
    13. 

  13.       2,
    14. 

  14.       3,
    15. 

  15.       "arr",
    16. 

  16.       "true",
    17. 

  17.       {
    18. 

  18.         x: 1,
    19. 

  19.         y: 2,
    20. 

  20.       },
    21. 

  21.       [1, 2, 3],
    22. 

  22.       function () {},
    23. 

  23.     ];
    24. 

  24.     console.log(arr);
    25. 

  25.     //  复制数组 使用... 展开
    26. 

  26.     let arr1 = [...arr];
    27. 

  27.     console.log(arr1);
    28. 

  28.     // 扩展数组 拿到上面的arr在展开
    29. 

  29.     arr = [1, 2, 3, ...arr, 7, 8, 9];
    30. 

  30.     console.log(arr);
    31. 

    32. 

  32.     // Array.of 把离散值创建成数组
    33. 

  33.     arr = Array.of(1, 2, 3, 4, 5, 6);
    34. 

  34.     console.log(arr);
    35. 

  35.     // 如果得到的数组需要分两步操作，所以就需要二次使用，可以用...展开二次使用
    36. 

  36.     let ab = [1, 2, 3, 4, 5, 6];
    37. 

  37.     arr = Array.of(...ab);
    38. 

  38.     console.log(arr);
    39. 

  39.   </script>
    40. 

  40. </html>
    41.

代码示例截图：
学习了事件的冒泡与事件的委托代理以及表单提交验证js线程运行机制还有字符的拼接截取替换html插入以及数组常用的api，例如转类数组增删遍历归并删除替换等

数组的常用api-2-新增与删除

数组字符串
尾部新增：push,
尾部删除pop,
头部新增unshift,
头部删除shift,
删除数组delete，但索引长度不变
代码部分：

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6. 

  6.     <title>Document</title>
    7. 

  7.   </head>
    8. 

    9. 

  9.   <body>
    10. 

  10.     <script>
    11. 

  11.       // 数组字符串
    12. 

  12.       // 尾部新增：push, 尾部删除pop, 头部新增unshift, 头部删除shift, 删除数组delete，但索引长度不变
    13. 

  13.       let ab = [];
    14. 

  14.       //   头部新增
    15. 

  15.       console.log(ab.push(10, 12));
    16. 

  16.       //   为了确认下 看下日志
    17. 

  17.       console.log(ab.length);
    18. 

  18.       //   看下数组
    19. 

  19.       console.log(ab);
    20. 

  20.       //   删除最后一个
    21. 

  21.       console.log(ab.pop(12));
    22. 

  22.       //   查看下数组
    23. 

  23.       console.log(ab);
    24. 

  24.       //   头部新增
    25. 

  25.       console.log(ab.unshift(1, 8));
    26. 

  26.       console.log(ab);
    27. 

  27.       //   头部删除
    28. 

  28.       console.log(ab.shift(1));
    29. 

  29.       console.log(ab);
    30. 

  30.       //   删除数组
    31. 

  31.       delete ab[1];
    32. 

  32.       console.log(ab);
    33. 

  33.       //   先创建一个数组
    34. 

  34.       let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    35. 

  35.       delete arr[0];
    36. 

  36.       console.log(arr);
    37. 

  37.     </script>
    38. 

  38.   </body>
    39. 

  39. </html>
    40.

示例截图：
学习了事件的冒泡与事件的委托代理以及表单提交验证js线程运行机制还有字符的拼接截取替换html插入以及数组常用的api，例如转类数组增删遍历归并删除替换等

迭代方法, 遍历元素
参数 示例 说明
forEach forEach(function(item, index, arr){…}) forEach使用方法 forEach(function(item, index, arr){…})没个元素单独的逐个回调处理,使用方法 forEach(function(数组的值, 数组的索引(或者键), 数组){…})
map 跟forEach类似，但是有返回值
every arr.every(item => item >= 3) every数组成员全部满足条件则返回true 否则返回false
some arr.some(item => item >= 3) some数组成员只要任何一方满足条件就为真，否则为假//////类似或操作
filter arr.filter(ab => ab >= 3) 返回满足条件的元素的新数组
find arr.find(ab => ab >= 5) 返回满足条件的第一个元素
findIndex arr.findIndex(ab => ab >= 5) 返回满足条件的第一个元素的索引
reduce arr.reduce((acc, cur, index, arr) => acc + cur); 归并操作 有四个值，第一个值是acc累加器，第二个值是当前的值，第三个是当前值对应的索引，第四个值是当前要处理的数组

以上代码中可能示例带了arr数组看不明白，可以直接看下代码跟截图
代码示例：

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6. 

  6.     <title>数组常用api迭代遍历</title>
    7. 

  7.   </head>
    8. 

    9. 

  9.   <body></body>
    10. 

  10.   <script>
    11. 

  11.     // 迭代方法, 遍历元素
    12. 

  12.     // 1. forEach,map///foreach不带返回值，map带返回值
    13. 

  13.     // 2. every, some
    14. 

  14.     // 3. filter, find, findIndex
    15. 

  15.     // 4. reduce
    16. 

  16.     //append, 追加元素
    17. 

  17.     //classlist.add是添加css样式名
    18. 

  18.     //////////////////////////////////////
    19. 

  19.     ///////////forEach查询/////////////////
    20. 

  20.     // forEach使用方法 forEach(function(item, index, arr){...})没个元素单独的逐个回调处理
    21. 

  21.     // forEach使用方法 forEach(function(数组的值, 数组的索引(或者键), 数组){...})没个元素单独的逐个回调处理
    22. 

  22.     // item为值，index为索引，arr为数组
    23. 

  23.     let arr = [2, 3, 4, 5, 6, 7, 8, 9, 10];
    24. 

  24.     // 其中，item 也就是数组的值，是必须的，其他都是可选的
    25. 

  25.     let arrs = arr.forEach(function (item, index, arr) {
    26. 

  26.       console.log(item, index, arr);
    27. 

  27.       //   在当前这个函数中，把item值追加到body中
    28. 

  28.       document.body.append(item);
    29. 

  29.     });
    30. 

  30.     // console.log(arrs); //测试验证 无返回值
    31. 

  31.     ////////////////////////////////////////
    32. 

  32.     ///map与foreach是一样的，只不过有返回值/////
    33. 

  33.     // 比如我想为当前元素的值*2返回示例
    34. 

  34.     arrs = arr.map(function (item) {
    35. 

  35.       return item * 2;
    36. 

  36.     });
    37. 

  37.     // 返回值比22行的arr全部都*2了
    38. 

  38.     console.log(arrs);
    39. 

  39.     /////////////////////////////
    40. 

  40.     ///////every, some只有俩值，true，false//////////
    41. 

  41.     // every数组成员全部满足条件则返回true 否则返回false//
    42. 

  42.     console.log(
    43. 

  43.       arr.every(function (item) {
    44. 

  44.         return item >= 0;
    45. 

  45.       })
    46. 

  46.     );
    47. 

  47.     console.log(arr.every(item => item >= 3));
    48. 

  48.     ///some数组成员只要任何一方满足条件就为真，否则为假//////类似或操作
    49. 

  49.     console.log(
    50. 

  50.       arr.some(function (ab) {
    51. 

  51.         return addEventListener >= 0;
    52. 

  52.       })
    53. 

  53.     );
    54. 

  54.     console.log(arr.some(ab => ab <= 5));
    55. 

  55.     // filter 返回满足条件的元素的新数组
    56. 

  56.     console.log(arr.filter(ab => ab >= 3));
    57. 

  57.     console.log(arr.filter(ab => ab <= 5));
    58. 

  58.     //find 返回满足条件的第一个元素
    59. 

  59.     console.log(arr.find(ab => ab >= 5));
    60. 

  60.     //findIndex 返回满足条件的第一个元素的索引
    61. 

  61.     console.log(arr.findIndex(ab => ab >= 5));
    62. 

    63. 

  63.     //reduce 归并操作 有四个值，第一个值是acc累加器，第二个值是当前的值，第三个是当前值对应的索引，第四个值是当前要处理的数组
    64. 

  64.     // res = arr.reduce(function(acc, cur, index, arr) {
    65. 

  65.     //     console.log("acc=", acc, "cur=", cur, "index=", index, "arr=", arr);
    66. 

  66.     //     // 最终的结果用acc累加器返回
    67. 

  67.     //     return acc + cur;
    68. 

  68.     // }//起始值);//支持起始值 例如从1开始，或者从2开始
    69. 

  69.     res = arr.reduce(function (acc, cur, index, arr) {
    70. 

  70.       console.log("acc=", acc, "cur=", cur, "index=", index, "arr=", arr);
    71. 

  71.       // 最终的结果用acc累加器返回
    72. 

  72.       return acc + cur;
    73. 

  73.     });
    74. 

  74.     console.log(res);
    75. 

    76. 

  76.     res = arr.reduce((acc, cur, index, arr) => acc + cur);
    77. 

  77.     console.log(res);
    78. 

  78.   </script>
    79. 

  79. </html>
    80.

示例截图：
学习了事件的冒泡与事件的委托代理以及表单提交验证js线程运行机制还有字符的拼接截取替换html插入以及数组常用的api，例如转类数组增删遍历归并删除替换等

数组的排序更新删除插入替换等操作

使用到的参数：
sort 数组内的数字排序
join 拼接，对数组转为字符串拼接
slice 数组的子元素取值
splce 支持任何位置删除 新增，替换操作
扩展学习 数据比较多，是一个数组，照样可以插入
使用splce +…
例如arr.splice(1, 0, ...art)
代码示例：

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6. 

  6.     <title>Document</title>
    7. 

  7.   </head>
    8. 

    9. 

  9.   <body></body>
    10. 

  10.   <script>
    11. 

  11.     //sort 数组内的数字排序
    12. 

  12.     let arr = [1, 10, 20, 6];
    13. 

  13.     // 默认是安装unf啥的浏览器编码排序的
    14. 

  14.     console.log(arr.sort());
    15. 

  15.     // 要想把数字进行正确排序，该怎么排序呢？增加一个函数 如下
    16. 

  16.     console.log(
    17. 

  17.       arr.sort(function (a, b) {
    18. 

  18.         //   升序排列
    19. 

  19.         return a - b;
    20. 

  20.       })
    21. 

  21.     );
    22. 

  22.     console.log(
    23. 

  23.       arr.sort(function (a, b) {
    24. 

  24.         //降序排列
    25. 

  25.         return b - a;
    26. 

  26.       })
    27. 

  27.     );
    28. 

  28.     //join 拼接，对数组转为字符串拼接
    29. 

  29.     console.log(arr.join("-"));
    30. 

  30.     console.log(arr.join("."));
    31. 

  31.     arr = ["red", "blue", "green"];
    32. 

  32.     // 默认为逗号拼接
    33. 

  33.     console.log(arr.join());
    34. 

  34.     //slice 数组的子元素取值
    35. 

  35.     arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    36. 

  36.     console.log(arr.slice(2, 4));
    37. 

  37.     // 省略后取值是直接从第3个，因为索引是0，所以后面全要
    38. 

  38.     console.log(arr.slice(2));
    39. 

  39.     // 支持负数提取
    40. 

  40.     console.log(arr.slice(-6, -3));
    41. 

  41.     //splce 支持任何位置删除 新增，替换操作
    42. 

  42.     console.log(arr);
    43. 

  43.     // 前面是索引，后面是删除数，就是从索引1的位置删除2个
    44. 

  44.     console.log(arr.splice(1, 2));
    45. 

  45.     console.log(arr);
    46. 

  46.     //更新操作  删除之后》增加新值
    47. 

  47.     console.log(arr.splice(1, 2, "666", "888"));
    48. 

  48.     console.log(arr);
    49. 

  49.     //插入操作 插入操作即不删除，只新增，所以删除的值为0
    50. 

  50.     console.log(arr.splice(1, 0, "niu", "b"));
    51. 

  51.     console.log(arr);
    52. 

  52.     // 扩展学习 数据比较多，是一个数组，照样可以插入
    53. 

  53.     let art = ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"];
    54. 

  54.     console.log(arr.splice(1, 0, ...art));
    55. 

  55.     console.log(arr);
    56. 

  56.   </script>
    57. 

  57. </html>
    58.

示例截图：
学习了事件的冒泡与事件的委托代理以及表单提交验证js线程运行机制还有字符的拼接截取替换html插入以及数组常用的api，例如转类数组增删遍历归并删除替换等

上一篇： CSS媒体查询，模态框，Flex常用属性

下一篇： 声明函数立即执行函数及匿名函数,以及函数的简写,和查看数据类型的原始类型以及以数组及对象的引用类型,函数类型的应用场景目前稀里糊涂

推荐阅读