博客列表 >1217作业js数组增删查改与js事件PHP培训第九期线上班

1217作业js数组增删查改与js事件PHP培训第九期线上班

淡月
淡月原创
2019年12月21日 16:28:57953浏览

一.js中数组的增删查改

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <script>
  9. function func1() {
  10. var arr = ['a','b','c','d'];
  11. //获取数组长度
  12. console.log(arr.length);
  13. //指定位置修改
  14. arr[3] = 'e';
  15. //尾部增加
  16. arr.push('f');
  17. //尾部删除
  18. arr.pop();
  19. //起始增加
  20. arr.unshift('新增');
  21. //删除起始
  22. arr.shift();
  23. //查找某个下标
  24. var b = arr.slice(1);
  25. // console.log(arr);
  26. }
  27. function func2() {
  28. //指定位置增加-
  29. var arr = ['a','b','c','d'];
  30. var newArr = [];
  31. for (var i = 0 ; i < arr.length;i++){
  32. if (i == 2){
  33. newArr.push('k');
  34. }
  35. newArr.push(arr[i]);
  36. }
  37. console.log(newArr);
  38. }
  39. func2();
  40. </script>
  41. </body>
  42. </html>

二.js中的事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>常用事件</title>
  6. </head>
  7. <body>
  8. <!--onblur 当鼠标离开时触发事件-->
  9. <input type="text" id="username" placeholder="请输入用户名" onblur="loseFocusUser()">
  10. <br>
  11. <input type="password" id="pwd" placeholder="请输入密码" onblur="loseFocusPwd()">
  12. <br>
  13. <!--onclick 当按钮被点击是触发 p a div i 等标签都可以被触发-->
  14. <button onclick="submits()">提交</button>
  15. <br>
  16. <div>
  17. <!-- onchange 用户改变输入框内容是触发-->
  18. <select name="" id="select" onchange="selectAction()">
  19. <option value="1">iPhone11 Pro Max</option>
  20. <option value="2">HUAWEI Mate 30 5G</option>
  21. <option value="3">Galaxy Note10+ 5G</option>
  22. <option value="4">OPPO Reno3 5G</option>
  23. </select>
  24. </div>
  25. <!--<a href="javascript:void (0)" onclick="submits()">提交</a>-->
  26. <!-- onmouseover事件在鼠标移动到时触发 onmouseleave事件在鼠标移出时触发-->
  27. <button onclick="submits()" onmouseleave="down()" onmouseover="up()" id="tj">鼠标事件</button>
  28. <script type="text/javascript">
  29. function selectAction() {
  30. var vl = document.getElementById('select').value;
  31. alert('你的选择的值为:'+vl)
  32. }
  33. function loseFocusUser() {
  34. var username =document.getElementById('username').value;
  35. if(username == '') {
  36. alert('请输入你的用户名');
  37. }
  38. }
  39. function loseFocusPwd() {
  40. var pwd =document.getElementById('pwd').value;
  41. if(pwd=='')
  42. {
  43. alert('请输入你的密码');
  44. }
  45. }
  46. function up() {
  47. console.log('鼠标上移');
  48. document.getElementById('tj').style.color='red';
  49. }
  50. function down() {
  51. console.log('鼠标下移');
  52. document.getElementById('tj').style.color='black';
  53. }
  54. function submits() {
  55. var username = document.getElementById('username').value;
  56. var pwd = document.getElementById('pwd').value;
  57. if (username == ''){
  58. return alert('请输入用户名');
  59. }
  60. if ((pwd=='')){
  61. return alert('请输入密码');
  62. }
  63. alert('用户名为:'+username +'密码为:'+pwd);
  64. }
  65. </script>
  66. </body>
  67. </html>

三.总结

通过学习了解了js数组中的增删查改,它与php语法相似却又有些不同。
又学到了js的事件处理,通过这些可以获取HTML标签并进行操作

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议