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

表单事件、常用的字符串,数组api

程序员文章站 2022-05-29 12:48:53
...

表单事件案例

  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>
  26. <body>
  27. <form action="">
  28. <h2>用户登录</h2>
  29. <p>用户名:<input type="text" name="uname" onblur="check(this)"></p>
  30. <p>密 码:<input type="password" name="pwd" onblur="check(this)"></p>
  31. <button>登 录</button>
  32. </form>
  33. <script>
  34. let btn=document.querySelector('button');
  35. btn.onclick=()=>{
  36. // 阻止表单的默认提交行为:
  37. // 方法一:return false
  38. // return false;
  39. // 方法二:event.preventDefault()
  40. event.preventDefault();
  41. // 阻止冒泡
  42. event.stopPropagation();
  43. // 非空验证
  44. // 表单内的每个元素都有一个form属性与当前表单绑定,可利用其获取每个元素的值。
  45. let uname=btn.form.uname;
  46. let pwd=btn.form.pwd;
  47. if(uname.value==''){
  48. alert('用户名不能为空!');
  49. return false;
  50. uname.focus();
  51. }
  52. if(pwd.value==''){
  53. alert('密码不能为空!');
  54. return false;
  55. pwd.focus();
  56. }
  57. alert('登录成功!');
  58. }
  59. function check(obj){
  60. // 方法二:event.preventDefault()
  61. event.preventDefault();
  62. // 阻止冒泡
  63. event.stopPropagation();
  64. // 非空验证
  65. if(obj.value==''){
  66. alert(obj.parentNode.innerText + '不能为空!');
  67. return false; //必需写在obj.focus()前面,否则死循环,一直弹窗。
  68. obj.focus();
  69. }
  70. }
  71. </script>
  72. </body>

表单事件、常用的字符串,数组api

常用的字符串,数组api

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