search

博客列表 >12月17日_JavaScript基础（数组、数组常用方法和常见事件）

12月17日_JavaScript基础（数组、数组常用方法和常见事件）

fkkf467
fkkf467原创
2019年12月23日 01:49:43711浏览

一、JavaScript 数组

1. 创建数组

  1.     var arr = [1, 2, 3, 4, 5];
  2.     var arr2 = ['join', 'tom', 'saiy'];
  3.     console.log(arr, arr2);

2. 访问数组元素

  1.     var arr = ['hello', 'world', 'tom'];
  2.     console.log(arr[0]);
  3.     console.log(arr[2]);
  4.     console.log(arr[3]);  // 访问下标超出，则为未定义 undefined

3. 改变数组元素

  1.     var array = ['a','b','c','d'];
  2.     console.log(array);
  3.     array[1] = 'bb';
  4.     console.log(array);

4. 添加数组元素

  1.     var arr = ['a','b','c'];
  2.     arr[3] = 'd';
  3.     arr[arr.length] = 'e';
  4.     console.log(arr);


注意：添加数组时如果索引值超出数组最大索引，则会出现填空元素，数组长度为此时最大索引加1，如果添加元素时索引不为整数，JavaScript 会把数组重定义为标准对象 

  1.     var arr = [1,2,3,4];
  2.     arr[7] = 7;
  3.     arr['a'] = 'aa';
  4.     console.log(arr);
  5.     console.log(arr.length);
  6.     console.log(typeof arr);

二、JavaScript 数组方法

1. push()

该方法（在数组结尾处）向数组添加一个新的元素
该方法返回新数组的长度 

  1.     var arr = ['a','b','c'];
  2.     var l = arr.push('d');
  3.     console.log(arr);
  4.     console.log(l);

  1.     var arr1 = ['apple','orange','banana'];
  2.     var arr2 = ['tomato','strawberry','cabbage'];
  3.     for (var i=0;i<arr2.length;i++){
  4.         arr1.push(arr2[i]);
  5.     }
  6.     console.log(arr1);

2. pop()

该方法从数组中删除最后一个元素
该方法返回“被弹出”的值 

  1.     var arr = ['apple', 'orange', 'banana', 'tomato', 'strawberry', 'cabbage'];
  2.     var t = arr.pop();
  3.     console.log(t);
  4.     console.log(arr);

3. unshift()

该方法（在开头）向数组添加新元素
该方法返回新数组的长度 

  1.     var arrays = ['zhangsan', 'lisi', 'wangwu'];
  2.     var num = arrays.unshift('xiaoming');
  3.     console.log(arrays);
  4.     console.log(num);

4. shift()

该方法会删除首个数组元素
该方法返回被“位移出”的字符串 

  1.     var arr = [1,2,3,4,5];
  2.     var t = arr.shift();
  3.     console.log(t);
  4.     console.log(arr);

5. splice()

该方法可以用于删除元素
第一个参数定义要删除元素的开始索引位置
第二个参数定义应该删除多少个元素 

  1.     var arr = ['a','b','c','d','e'];
  2.     arr.splice(1,2);
  3.     console.log(arr);

6. indexOf()

该方法用于查找元素在数组中的位置
第一个参数表示要查找的元素
第二个参数表示开始查找的位置索引
如果查找到元素则返回找到该元素第一次出现的索引，如果未找到则返回 -1 

  1.     var arr = ['a', 'b', 'c', 'd', 'b', 'e', 'f'];
  2.     console.log(arr.indexOf('a'));
  3.     console.log(arr.indexOf('a',2));
  4.     console.log(arr.indexOf('b',1));
  5.     console.log(arr.indexOf('e',3));

7. 从数组中间加元素

  1.     function add(arr, num, str) {
  2.         var arr2 = [];
  3.         for (var i = 0; i < arr.length; i++) {
  4.             if (i == num) {
  5.                 arr2.push(str);
  6.             }
  7.             arr2.push(arr[i]);
  8.         }
  9.         return arr2;
  10.     }
  12.     arr = ['a', 'b', 'c', 'd', 'e'];
  13.     console.log(add(arr, 2, 'hello'));

三、JavaScript常用事件

1. onclick 事件

onclick 事件会在元素被点击时发生
onclick 属性可以使用与所有 HTML 元素，除了 ：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>. 

  1. <body>
  2. <button onclick="fun()">点击</button>
  3. <script type="text/javascript">
  4.     function fun() {
  5.         alert("hello world");
  6.     }
  7. </script>
  8. </body>

2. onmouseover 事件 和 onmouseleave 事件

onmouseover 事件会在鼠标指针移动到指定的元素上时发生
onmouseleave 事件在鼠标移出元素时触发 

  1. <body>
  2. <div id="mydiv" onmouseover="come()" onmouseleave="goto()">这是一段文字</div>
  3. <script type="text/javascript">
  4.     function come(){
  5.         document.getElementById('mydiv').style.color = 'green';
  6.     }
  8.     function goto() {
  9.         document.getElementById('mydiv').style.color = 'black';
  10.     }
  11. </script>
  12. </body>

3. onblur 事件

  1. <body>
  2.     <p>
  3.         <label for="email">邮箱：</label>
  4.         <input type="email" name="email" id="email" onblur="is_email_null()" placeholder="请输入邮箱">
  5.         <span id="email_tip" style="color: red"></span>
  6.     </p>
  7.     <p>
  8.         <label for="pwd">密码：</label>
  9.         <input type="password" name="pwd" id="pwd" onblur="is_pwd_null()" placeholder="请输入密码">
  10.         <span id="pwd_tip" style="color: red"></span>
  11.     </p>
  12.     <p>
  13.         <button onclick="is_null()">登录</button>
  14.     </p>
  15. <script type="text/javascript">
  16.     function is_email_null() {
  17.         var email = document.getElementById("email").value;
  18.         if (email == ''){
  19.             document.getElementById('email_tip').innerHTML = "邮箱不能为空";
  20.         }else{
  21.             document.getElementById('email_tip').innerHTML = '';
  22.         }
  23.     }
  24.     function is_pwd_null() {
  25.         var pwd = document.getElementById("pwd").value;
  26.         if (pwd == ''){
  27.             document.getElementById('pwd_tip').innerHTML = "密码不能为空";
  28.         }else{
  29.             document.getElementById('pwd_tip').innerHTML = '';
  30.         }
  31.     }
  32.     function is_null() {
  33.         is_email_null();
  34.         is_pwd_null();
  35.         if (document.getElementById("email").value != '' && document.getElementById("pwd").value!=""){
  36.             alert("可以登录");
  37.         }
  38.     }
  39. </script>
  40. </body>

4. onchange 事件

onchange 事件会在域的内容改变时发生。
onchange 事件也可用于单选框与复选框改变后触发的事件。 

  1. <body>
  2. <div>
  3.     <select id="province">
  4.         <option value="sd">山东省</option>
  5.         <option value="hn">河南省</option>
  6.         <option value="hb">河北省</option>
  7.     </select>
  8.     <select id="city">
  9.         <option value="jn">济南市</option>
  10.         <option value="qd">青岛市</option>
  11.         <option value="dy">东营市</option>
  12.     </select>
  13. </div>
  14. <script type="text/javascript">
  15.     var province = document.getElementById("province");
  16.     province.onchange = function () {
  17.         var options = province.getElementsByTagName("option");
  18.         for (var i = 0; i < options.length; i++) {
  19.             var option = options[i];
  20.             if (option.selected) {
  21.                 var value = option.value;
  22.                 switch (value) {
  23.                     case 'sd':
  24.                         var city = document.getElementById("city");
  25.                         city.innerHTML = "<option value=\"jn\">济南市</option><option value=\"qd\">青岛市</option><option value=\"dy\">东营市</option>";
  26.                         break;
  27.                     case 'hn':
  28.                         var city = document.getElementById("city");
  29.                         city.innerHTML = "<option value=\"jn\">郑州市</option><option value=\"qd\">洛阳市</option><option value=\"dy\">周口市</option>";
  30.                         break;
  31.                     case 'hb':
  32.                         var city = document.getElementById("city");
  33.                         city.innerHTML = "<option value=\"jn\">石家庄市</option><option value=\"qd\">邯郸市</option><option value=\"dy\">保定市</option>";
  34.                         break;
  35.                 }
  36.             }
  37.         }
  38.     }
  39. </script>
  40. </body>

四、总结

学会了数组和一些常用方法，学会了一些常用事件。

上一条：1220作业下一条：1217_JS数组与事件 第34课
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多