表单事件案例

  1. <style>
  2.         *{
  3.             padding: 0;
  4.             margin: 0;
  5.             box-sizing: border-box;
  6.         }
  7.         form{
  8.             width: 26.875em;
  9.             height: 15em;
  10.             padding: 2em;
  11.             display: grid;
  12.             grid-template-rows: repeat(4,1fr);
  13.             background-color: rgb(215, 246, 253);
  14.             place-content: center;
  15.             /* place-items: center; */
  16.         }
  17.         h2{
  18.             text-align: center;
  19.             color: green;
  20.         }
  21.         input{
  22.             height: 2em;
  23.             padding: 0 1em;
  24.         }
  25. </style>
  27. <body>
  28.     <form action="">
  29.         <h2>用户登录</h2>
  30.         <p>用户名：<input type="text" name="uname" onblur="check(this)"></p>
  31.         <p>密　码：<input type="password" name="pwd" onblur="check(this)"></p>
  32.         <button>登 录</button>
  33.     </form>
  34.     <script>
  35.         let btn=document.querySelector('button');
  36.         btn.onclick=()=>{
  37.             // 阻止表单的默认提交行为：
  38.             // 方法一：return false
  39.             // return false;
  40.             // 方法二：event.preventDefault()
  41.             event.preventDefault();
  42.             // 阻止冒泡
  43.             event.stopPropagation();
  44.             // 非空验证
  45.             // 表单内的每个元素都有一个form属性与当前表单绑定，可利用其获取每个元素的值。
  46.             let uname=btn.form.uname;
  47.             let pwd=btn.form.pwd;
  48.             if(uname.value==''){
  49.                 alert('用户名不能为空！');
  50.                 return false;
  51.                 uname.focus();
  52.             }
  53.             if(pwd.value==''){
  54.                 alert('密码不能为空！');
  55.                 return false;
  56.                 pwd.focus();
  57.             }
  58.             alert('登录成功！');
  59.         }
  61.         function check(obj){
  62.             // 方法二：event.preventDefault()
  63.             event.preventDefault();
  64.             // 阻止冒泡
  65.             event.stopPropagation();
  66.             // 非空验证
  67.             if(obj.value==''){
  68.                 alert(obj.parentNode.innerText + '不能为空！');
  69.                 return false; //必需写在obj.focus()前面，否则死循环，一直弹窗。
  70.                 obj.focus();
  71.             }
  72.         }
  73.     </script>
  74. </body>

常用的字符串,数组api

  1. const pp='好好学习，天天向上！';
  3. // 常用的字符串API
  5. // 1.length:获取长度
  6. console.log(pp.length);
  7. // 2.indexOf()判断指定字符在目标字符串中的索引
  8. console.log(pp.indexOf('天天')); // 返回 5
  9.     // 当不存在时，返回-1
  10. console.log(pp.indexOf('李')); // 返回 －1
  11. // 3.search() 功能跟indexOf一样，但支持正规表达式且语义化更好。
  12. console.log(pp.search('天天')); // 返回5
  13. // 4.``模板字面量，可用作字符串拼接等。
  14. // 5.split（）把字符串转成数组，如果参数为空字符串，则会将原始字符串打散，返回以单个字符组成的数组
  15. console.log(pp.split('，')); //返回 [ '好好学习', '天天向上！' ]
  16. // 6.join()把数组用指定字符拼装成字符串
  17. const arr=['my','name','is','lst'];
  18. console.log(arr.join(' ')); // 返回 my name is lst
  19. // 7.replace('要替换的内容','新内容')字符串替换
  20. console.log(pp.replace('好好','日日')); // 返回 日日学习，天天向上！
  21. // 8.slice(起始索引,结束索引)字符串截取。注：不包含最后一个
  22. console.log(pp.slice(0,3)); // 返回 好好学
  23. // 9.substr(开始索引,数量)字符串截取,如果只有一个参数，表示从开始索引起到之后的所有字符。支持反向截取（原始字符串从后往前数索引分别为：-1,-2,……，截取时也是从起始位置往后数）
  24. console.log(pp.substr(0,4)); // 返回 好好学习
  25. console.log(pp.substr(-5,1)); //返回 天
  26. console.log(pp.substr(-5,5)); //返回 天天向上！
  27. console.log(pp.substr(-5)); //返回 天天向上！
  28. // 10.toLowerCase转小写；toUpperCase转大写
  29. let str='abcde';
  30. console.log(str.toLowerCase()); // 返回abcde
  31. console.log(str.toUpperCase()); // 返回ABCDE
  32. // 11. link生成a链接
  33. console.log(pp.link('http://baidu.com')); // 返回 <a href="http://baidu.com">好好学习，天天向上！</a> 
  36. // 常用的数组API
  38. let Arr=[1,2,3,4,5];
  39. // 1.rest语法 ...arr
  40. let arr2=[...Arr];
  41. console.log(arr2); // 返回 [ 1, 2, 3, 4, 5 ] 
  42. console.log([0,...Arr,7,8,9]); // 返回 [ 0, 1, 2, 3, 4, 5, 7, 8, 9 ]
  43. // 2. Array.of 将离散的值转成数组
  44. console.log(Array.of(1,2,3,4,5)); // 返回 [ 1, 2, 3, 4, 5 ] ​​​​​
  45. // 3.Array.from(类数组) 将一个类数组(集合)转成数组：常用于获取DOM节点操作
  46. let Arrs=[];
  47. // 4.数组的增加删除 － 从数组的尾部开始
  48.     // 增加：push() 将元素增加到数组的尾部。可一次追加多个元素，用,隔开。
  49.     Arrs.push('笔记本');
  50.     Arrs.push('手机');
  51.     console.log(Arrs); // 返回 [ '笔记本', '手机' ] 
  52.     // 删除：pop() 从数组尾部开始删除
  53.     Arrs.pop();
  54.     console.log(Arrs); // 返回 [ '笔记本' ]
  56. // 5.数组的增加删除 － 从数组的头部开始
  57.     // 增加：unshift() 将元素增加到数组的头部，可一次追加多个元素，用,隔开。
  58.     Arrs.unshift('平板');
  59.     console.log(Arrs);   // 返回 [ '平板', '笔记本' ] 
  60.     // 删除：shift() 从数组头部开始删除
  61.     Arrs.shift();
  62.     console.log(Arrs); // 返回 [ '笔记本' ]
  63.     // 如果一次添加多个元素，unshift(1,2,3) 执行结果是按倒序进行添加，即：先添加3，再2，再1。即：1在最上面，3在最下面。跟书写顺序相同。
  64.     Arrs.unshift(1,2,3);
  65.     console.log(Arrs);  // 返回 [ 1, 2, 3, '笔记本' ] ​​​​​
  67. // 6. delete Arr[索引] 删除数组中任意位置的元素。此方法删除元素后，只是把内容删了，索引还在，只是内容变成了空白，length不变。不影响遍例
  68.     delete Arrs[2];
  69.     console.log(Arrs); // 返回 [ 1, 2, , '笔记本' ]
  71.     // 7.数组的length属性是可写属性，可以设置。如果设置的值小于当前数组长度，则从数组尾部开始删除
  72.     Arrs.length=2;
  73.     console.log(Arrs); // 返回 [ 1, 2 ] 
  75. // 数组的迭代（遍例）
  76. let Arr2=[1,2,3,4,5];
  77. // 1.arr.forEach(function(item,index,arr){...})
  78.     // 作用：对数组的每个元素进行调用处理
  79.     // 参数说明：
  80.     // item:(必选参数)数组中的每一个元素的值
  81.     // index:(可选参数)每个元素的索引
  82.     // arr:(可选参数)当前数组
  83.     // 没有返回值
  84.     Arr2.forEach((item)=>{
  85.         item+=1;
  86.         console.log(item); // 返回 2,3,4,5,6
  87.     });
  89. // 2.arr.map(function(item,index,arr){...})
  90.     // 作用、参数、功能跟forEach一样，只是有返回值,返回一个处理后的数组。
  91.     let newArr=Arr2.map(item=>item*2);
  92.     console.log(newArr); // 返回新数组 [ 2, 4, 6, 8, 10 ]
  94. // 3.arr.every(function(item){...})
  95.     // 作用：数组成员全部满足条件，返回true，否则返回false
  96.     // 返回值：true/false
  97.     let a=Arr2.every(item=>item>4);
  98.     console.log(a); // 返回 false
  99.     a=Arr2.every(item=>item>0.5);
  100.     console.log(a); // 返回 true
  102. // 4.arr.some(function(item){...})
  103.     // 作用：数组成员中只要有一个满足条件就返回true,全部不满足时和返回false
  104.     // 返回值：true/false
  105.     a=Arr2.some(item=>item>=5);
  106.     console.log(a); // 返回 true
  107.     a=Arr2.some(item=>item>=55);
  108.     console.log(a); // 返回 false
  110. // 5.arr.filter(function(item){...})
  111.     // 作用：返回数组中满足条件的元素所组成的新数组
  112.     // 返回值：满足条件的新数组
  113.     a=Arr2.filter(item=>item>2);
  114.     console.log(a); // 返回 [3,4,5]
  116. // 6.arr.find(function(item){...})
  117.     // 作用：返回数组中满足条件的第一个元素的值
  118.     // 返回值：元素的值
  119.     a=Arr2.find(item=>item>3);
  120.     console.log(a); // 返回 4
  122. // 7.arr.findIndex(function(item){...})
  123.     // 作用：返回数组中满足条件的第一个元素的索引
  124.     // 返回值：元素的索引int
  125.     a=Arr2.findIndex(item=>item>3);
  126.     console.log(a); // 返回 3
  128. // 8.arr.reduce(function(acc,cur,index,arr){...},number)
  129.     // 作用：归并操作，比如求数组所有元素之和、乘积等等
  130.     // 参数说明：第一个是回调函数，有4个参数。第二个是number默认为0，可选，表示从几开始累加。例如求和：意思就是数组所有元素之和再+number,用于初始化等操作。
  131.     // acc:累加器
  132.     // cur:当前元素
  133.     // index:当前元素索引
  134.     // arr:当前数组
  135.     // number:默认值0，可选。
  136.     a=Arr2.reduce((acc,item)=>acc+item);
  137.     console.log(a); // 返回 15
  138.     a=Arr2.reduce((acc,item)=>acc+item,60);
  139.     console.log(a); // 返回 75
  141. // 数组排序
  142. let Arr3=[1,10,2,20,3,4,5];
  143. // 1.arr.sort(callback)
  144.     // 参数说明：可选
  145.     // 如果不写参数，则按照ask码排序，1,10,2,20,3...不是理想结果,想按照数字顺序排需要加入回调函数参数
  146.     // 顺序排：function(a,b){a-b}
  147.     // 倒序排：function(a,b){b-a}
  148.     Arr3.sort();
  149.     console.log(Arr3); // 返回 [ 1, 10, 2, 20, 3, 4, 5 ]
  150.     Arr3.sort((a,b)=>a-b);
  151.     console.log(Arr3); // 返回 [ 1, 2, 3, 4, 5, 10, 20 ]
  152.     Arr3.sort((a,b)=>b-a);
  153.     console.log(Arr3); // 返回 [ 20, 10, 5, 4, 3, 2, 1 ]
  155. // 数组截取元素
  156. // 1.arr.slice(开始索引，结束索引),返回的结果不包含最后索引本身的元素。
  157.     // 用法同字符串的str.slice一样。可正向可反向取
  158.     a=Arr3.slice(3,5);
  159.     console.log(a); // 返回 [ 4, 3 ] 结果不包含结束索引5所在的元素。
  161. // 数组元素的增删改，最强大的一个函数
  162.     // arr.splice(参数数量可变)
  163.     // 参数说明：参数数量可变。但前两个固定
  164.     // 第一个：index 为起始索引，即从第几个元素开始操作
  165.     // 第二个：删除数量，即删除几个元素。如果为0则一般用于插入操作
  166.     // 1.删除操作
  167.     let Arr4=[1,2,3,4,5,6,7,8];
  168.     Arr4.splice(1,2); // 从第2个起删除两个
  169.     console.log(Arr4); // 返回 [ 1, 4, 5, 6, 7, 8 ]
  170.     // 2.更新操作(先删除再填充)
  171.     Arr4.splice(1,2,10,20);
  172.     console.log(Arr4); // 返回 [ 1, 10, 20, 6, 7, 8 ]
  173.     // 3.插入操作：在索引前方插入
  174.     Arr4.splice(2,0,'My','Name','Is');
  175.     console.log(Arr4); // 返回 [ 1, 10, 'My', 'Name', 'Is', 20, 6, 7, 8 ]
  176.     // 可以用...arr 语法操作
  177.     let news=[666,888,999];
  178.     Arr4.splice(5,0,...news); // 在索引5的元素前面插入news数组元素
  179.     console.log(Arr4); // 返回 [ 1, 10, 'My', 'Name', 'Is', 666, 888, 999, 20, 6, 7, 8 ]