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

Community

Learn

Tools Library

AI Tools

Leisure

English

Home > List of blog posts > 12月17日_JavaScript基础（数组、数组常用方法和常见事件）

Blogger Information

Blog 38

fans 1

comment 0

visits 28858

Special Recommendation

More>

Related recommendations

一、JavaScript 数组

1. 创建数组

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

2. 访问数组元素

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

3. 改变数组元素

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

4. 添加数组元素

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

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

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

二、JavaScript 数组方法

1. `push()`

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

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

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

2. `pop()`

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

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

3. `unshift()`

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

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

4. `shift()`

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

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

5. `splice()`

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

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

6. `indexOf()`

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

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

7. 从数组中间加元素

    function add(arr, num, str) {
        var arr2 = [];
        for (var i = 0; i < arr.length; i++) {
            if (i == num) {
                arr2.push(str);
            }
            arr2.push(arr[i]);
        }
        return arr2;
    }
    arr = ['a', 'b', 'c', 'd', 'e'];
    console.log(add(arr, 2, 'hello'));

三、JavaScript常用事件

1. `onclick` 事件

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

<body>
<button onclick="fun()">点击</button>
<script type="text/javascript">
    function fun() {
        alert("hello world");
    }
</script>
</body>

2. `onmouseover` 事件和 `onmouseleave` 事件

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

<body>
<div id="mydiv" onmouseover="come()" onmouseleave="goto()">这是一段文字</div>
<script type="text/javascript">
    function come(){
        document.getElementById('mydiv').style.color = 'green';
    }
    function goto() {
        document.getElementById('mydiv').style.color = 'black';
    }
</script>
</body>

3. `onblur` 事件

<body>
    <p>
        <label for="email">邮箱：</label>
        <input type="email" name="email" id="email" onblur="is_email_null()" placeholder="请输入邮箱">
        <span id="email_tip" style="color: red"></span>
    </p>
    <p>
        <label for="pwd">密码：</label>
        <input type="password" name="pwd" id="pwd" onblur="is_pwd_null()" placeholder="请输入密码">
        <span id="pwd_tip" style="color: red"></span>
    </p>
    <p>
        <button onclick="is_null()">登录</button>
    </p>
<script type="text/javascript">
    function is_email_null() {
        var email = document.getElementById("email").value;
        if (email == ''){
            document.getElementById('email_tip').innerHTML = "邮箱不能为空";
        }else{
            document.getElementById('email_tip').innerHTML = '';
        }
    }
    function is_pwd_null() {
        var pwd = document.getElementById("pwd").value;
        if (pwd == ''){
            document.getElementById('pwd_tip').innerHTML = "密码不能为空";
        }else{
            document.getElementById('pwd_tip').innerHTML = '';
        }
    }
    function is_null() {
        is_email_null();
        is_pwd_null();
        if (document.getElementById("email").value != '' && document.getElementById("pwd").value!=""){
            alert("可以登录");
        }
    }
</script>
</body>

4. `onchange` 事件

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

<body>
<div>
    <select id="province">
        <option value="sd">山东省</option>
        <option value="hn">河南省</option>
        <option value="hb">河北省</option>
    </select>
    <select id="city">
        <option value="jn">济南市</option>
        <option value="qd">青岛市</option>
        <option value="dy">东营市</option>
    </select>
</div>
<script type="text/javascript">
    var province = document.getElementById("province");
    province.onchange = function () {
        var options = province.getElementsByTagName("option");
        for (var i = 0; i < options.length; i++) {
            var option = options[i];
            if (option.selected) {
                var value = option.value;
                switch (value) {
                    case 'sd':
                        var city = document.getElementById("city");
                        city.innerHTML = "<option value=\"jn\">济南市</option><option value=\"qd\">青岛市</option><option value=\"dy\">东营市</option>";
                        break;
                    case 'hn':
                        var city = document.getElementById("city");
                        city.innerHTML = "<option value=\"jn\">郑州市</option><option value=\"qd\">洛阳市</option><option value=\"dy\">周口市</option>";
                        break;
                    case 'hb':
                        var city = document.getElementById("city");
                        city.innerHTML = "<option value=\"jn\">石家庄市</option><option value=\"qd\">邯郸市</option><option value=\"dy\">保定市</option>";
                        break;
                }
            }
        }
    }
</script>
</body>

四、总结

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

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：事件是整个js的基石, 相当重要

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

PHP开发环境配置（phpStudy，phpStorm和Chrome插件的安装及设置）- ***九期线上班

2019-10-29 01:53:38

一、JavaScript 数组

1. 创建数组

2. 访问数组元素

3. 改变数组元素

4. 添加数组元素

二、JavaScript 数组方法

1. push()

2. pop()

3. unshift()

4. shift()

5. splice()

6. indexOf()