JS第2课-JavaScript数组增删查改与js事件-九期线上班

1、js中数组的增删查改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function func1() {
        var arr = ['a','b','c','d'];
        //获取数组长度
        console.log(arr.length);
        //指定位置修改
        arr[3] = 'e';
        //尾部增加
        arr.push('f');
        //尾部删除
        arr.pop();
        //起始增加
        arr.unshift('新增');
        //删除起始
        arr.shift();
        //查找某个下标
        var  b = arr.slice(1);
        // console.log(arr);
    }
    function func2() {
        //指定位置增加-
        var arr = ['a','b','c','d'];
        var newArr = [];
        for (var i = 0 ; i < arr.length;i++){
            if (i == 2){
                newArr.push('k');
            }
            newArr.push(arr[i]);
        }
        console.log(newArr);
    }
    func2();
</script>
</body>
</html>

2、js中的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用事件</title>
</head>
<body>
<!--onblur 当鼠标离开时触发事件-->
<input type="text" id="username" placeholder="请输入用户名" onblur="loseFocusUser()">
<br>
<input type="password" id="pwd" placeholder="请输入密码" onblur="loseFocusPwd()">
<br>
<!--onclick 当按钮被点击是触发 p a div i 等标签都可以被触发-->
<button onclick="submits()">提交</button>
<br>
<div>
    <!-- onchange 用户改变输入框内容是触发-->
    <select name="" id="select" onchange="selectAction()">
        <option value="1">iPhone11 Pro Max</option>
        <option value="2">HUAWEI Mate 30 5G</option>
        <option value="3">Galaxy Note10+ 5G</option>
        <option value="4">OPPO Reno3 5G</option>
    </select>
</div>
<!--<a href="javascript:void (0)" onclick="submits()">提交</a>-->
<!-- onmouseover事件在鼠标移动到时触发 onmouseleave事件在鼠标移出时触发-->
<button onclick="submits()" onmouseleave="down()" onmouseover="up()" id="tj">鼠标事件</button>
<script type="text/javascript">
    function selectAction() {
        var vl = document.getElementById('select').value;
        alert('你的选择的值为:'+vl)
    }
    function loseFocusUser() {
        var username =document.getElementById('username').value;
        if(username == '') {
            alert('请输入你的用户名');
        }
    }
    function loseFocusPwd() {
        var pwd =document.getElementById('pwd').value;
        if(pwd=='')
        {
            alert('请输入你的密码');
        }
    }
    function up() {
        console.log('鼠标上移');
        document.getElementById('tj').style.color='red';
    }
    function down() {
        console.log('鼠标下移');
        document.getElementById('tj').style.color='black';
    }
    function submits() {
        var username = document.getElementById('username').value;
        var pwd = document.getElementById('pwd').value;
        if (username == ''){
            return alert('请输入用户名');
        }
        if ((pwd=='')){
            return alert('请输入密码');
        }
        alert('用户名为：'+username +'密码为:'+pwd);
    }
</script>
</body>
</html>

总结

学习了js中数组，语法和PHP很像，但是有些细节不一样，比如当前数组有4个元素，下标0123，然后添加了一个下标8的，此时PHP数量为5个，但是js就是9个。学习了数组的增push、unshift  删pop、shift 查slice 改；学习了js的事件处理document.getElementById通过这个可以获取到HTML标签并进行操作。

相关文章