表单事件

  • 以下为表单实例。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="style.css">
  9. </head>
  10. <body>
  11.     <form action="" method="post" id=login>
  12.         <label for="email" class="title">用户登录</label>
  13.         <label for="email">邮箱</label>
  14.         <input type="text" onblur="check(this)" name="email" class="email" placeholder="请输入邮箱">
  15.         <label for="password">密码</label>
  16.         <input type="password" onblur="check(this)" name="password" class="password" placeholder="请输入8位数得密码">
  17.         <button>提交</button>
  18.     </form>
  19.     <script>
  20.             function check(ele){
  21.                 event.preventDefault();
  22.                 event.stopPropagation();
  23.                 let act = document.activeElement.name;
  25.                 if (act==="email")
  26.                 {
  27.                     return false;
  28.                 }
  30.                 if (act=="password")
  31.                 {
  32.                     return false;
  33.                 }
  34.                 let parent=ele.form;
  35.                 console.log(ele.value);
  36.                 if (parent.email.value.length==0)
  37.                 {
  38.                     alert("邮箱不能为空");
  39.                     parent.email.focus();
  40.                     return false;
  41.                 }
  42.                 else if(parent.password.value.length==0)
  43.                 {
  44.                     alert("密码不能为空");
  45.                     parent.password.focus();
  46.                     return false;
  47.                 }
  48.                 else{
  49.                     alert("验证通过");
  50.                     return true;
  51.                 }
  52.             }
  53.     </script>
  55. </body>
  56. </html>

javascript数组常用api

字符串数组

  • 1.length获取长度str.length
  • 2.charAt通过索引元素str.charAt(0)
  • 3.indexof通过元素获得索引str.indexof("中")
  • 4.serch通过元素获得索引,但是支持正则表达式
  • 5.concat字符串拼接str.concat("a","bcs")
  • 6.replace替换字符串str.replace("中文网",".cn")
  • 7.slice(a,b)取a到B得子串str.slice(0,3)
  • 8.substr(0,num)取子串从第0个字符开始取num个字符str.substr(0,5)
  • 9.split(“a”,num)分割字符串,第一个参数不为空时,跟你a字符分割字符串,返回字符串数组,第一个参数为空,第二个不为空时,返回前n个字符数组
  • 10.tolowercase()将字符串全部转成小写str.tolowercase()
  • 11.toUppercase()将字符串全部转成大写str.toUppercase()

    其他数组

  • Array.of 原始数据有可能来自一个外部请求api或文件,而这个原始数据就是数组例
  1.     let a=[1,2,3,4,5];
  2.     arr=Array.of(...a);
  3.     console.log(arr);
  • Array.from将类数组转成数组例
  1.    const likeArr = {
  2.         0: "red",
  3.         1: "blue",
  4.         2: "green",
  5.         length: 3,
  6.       };
  7.       console.log(likeArr);
  8.       console.log(Array.from(likeArr));
  • push,从数组尾部加入arr.push(10)
  • pop，从数组尾部删除arr.pop(20)
  • unshift从数组头部加入arr.unshift(10)
  • shift从数组头部删除arr.shift()
  • forEach((item,index,arr)=>{…}), 每个元素逐个调用回调处理,item是必须,foreach没有返回值例子如下
  1.        let arr = [1, 2, 3, 4, 5];
  3. let res = arr.forEach(function (item, index, arr) {
  4.   // 三个参数中, 只有第一个 item是必须的
  5.   console.log(item, index);
  6.   // dom
  7.   document.body.append(item);
  8. });
  • map: 参数与功能 与forEach一样,只不过有返回值,返回值是新数组
  1.  res = arr.map(item => item * 2);
  2.       console.log(res);

  • every断言函数,判断数组中每个值是否符合条件,全部符合返回true，否则返回falseconsole.log(arr.every(item => item >= 0));

  • some: 数组成员中只要有一个满足条件,就返回 true, 否则 false,console.log(arr.some(item => item >= 10));

  • filter: 返回数组中的满足条件的元素组成的新数组console.log(arr.find(item => item >= 3));

  • reduce: 归并

  1.    res = arr.reduce(function (acc, cur, index, arr) {
  2.         console.log("acc=", acc, "cur=", cur, "index=", index, "arr=", arr);
  3.         // 最终结果用 acc 返回, acc累加器
  4.         return acc + cur;
  5.       }, 5);

  • sort排序升序console.log(arr.sort((a, b) => a - b));,降序console.log(arr.sort((a, b) => b - a));

  • join将数组转成字符串

  1.  arr = ["red", "green", "blue"];
  2.       console.log(arr.join());
  3.       console.log(arr.join("-"));
  • slice子元素
  1.  arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  2.       console.log(arr.slice(2, 5));
  3.       console.log(arr.slice(2));
  4.       console.log(arr.slice(-6, -3));
  • splice: 删除, 新增, 替换
  1.  // delete
  2.       console.log(arr);
  3.       console.log(arr.splice(1, 2));
  4.       console.log(arr);
  6.       // update
  7.       console.log(arr.splice(1, 2, "a", "b"));
  8.       console.log(arr);
  10.       // insert
  11.       console.log(arr.splice(1, 0, "red", "green"));
  12.       console.log(arr);
  14.       let data = ["red", "green", "blue"];
  15.       console.log(arr.splice(1, 0, ...data));
  16.       console.log(arr);