12月17号：JavaScript基础--数组和事件

一、 数组

• 往数组尾部添加一个元素：push(),返回的是新数组的长度

  function arrays() {
        var arr = ['a','b','c'];
        res = arr.push('d');
        console.log('数组长度：'+ res);
        console.log(arr);
    }
    arrays();

  运行效果：
  

• 从数组尾部弹出一个元素pop()，返回的是弹出的元素

  function arrays2() {
        var arr = ['a','b','c','d'];
        res = arr.pop('d');
        console.log(arr);
        console.log('弹出的元素是：'+res)
    }
    arrays2();

  运行效果：
  

• 从数组从头部添加元素： unshift() 返回的是新数组的长度

    function arrays3() {
        var arr = ['a','b','c'];
        arr.unshift('e');
        console.log(arr);
    }
     arrays3()

  运行效果：
  

• 从头部删除元素：shift() 返回的是弹出的元素

   function arrays4() {
        var arr = ['a','b','c','d'];
        arr.shift('a');
        console.log(arr)
    }
     arrays4()

  运行效果：
  

• 从数组中间删除 splice('从哪开始删','删多少个'),返回的是删掉的元素

  function arrays5() {
        var arr=['a','b','c','d','e'];
        $res = arr.splice('2',2)
        console.log(arr);
        console.log('删掉的元素：' + $res)
    }
    arrays5()

  

• indexOf('找谁',[从哪个位置开始查]) 找到了返回的是该元素在数组的下标，查不到返回-1

  function arrays6() {
        var arr=['a','b','c','d','e'];
        res = arr.indexOf('c');
        console.log(res); //输出2
        res2 = arr.indexOf('g');
        console.log(res2);//输出-1
    }
    arrays6();

• 从数组中间插入元素

  var arr=['a','b','c','d','o'];
    function addin(index,val) {
        var new_arr = [];
        for (var i = 0; i<arr.length; i++){
            if (i == index){
                new_arr.push(val);
            }
            new_arr.push(arr[i]);
        }
        return new_arr;
    }
   $res = addin(2,'f');
    console.log($res);

  运行效果：
  

二、 事件

<p id="demo" onmouseover="aa()" onmouseleave="bb()"> 用户名：<input type="text" id="name" onblur="ob()"><span id="tips"></span></p>
<p id="mm" onmouseover="cc()" onmouseleave="dd()">密码：<input type="password" id="pwd"></p>
<p>地域：<select name="sel" id="sel" onchange="ch()">
    <option value="1">湖南</option>
    <option value="2">湖北</option>
    <option value="3">江西</option>
    <option value="4">四川</option>
</select></p>
<button onclick="submits()">提交</button>
<script>
    //鼠标移上来触发事件
    function aa() {
        console.log('鼠标移上来了');
        document.getElementById('demo').style.color = 'red';
    }
    //鼠标移走触发事件
    function bb() {
        console.log('鼠标移走了');
        document.getElementById('demo').style.color = 'black';
    }
    //鼠标移上来触发事件
    function cc() {
        console.log('鼠标移上来了');
        document.getElementById('mm').style.color = 'red';
    }
    //鼠标移走触发事件
    function dd() {
        console.log('鼠标移走了');
        document.getElementById('mm').style.color = 'black';
    }
    //失去焦点触发事件
    function ob() {
        var name = document.getElementById('name').value;
        var tips = document.getElementById('tips');
        if (name ==''){
        tips.innerHTML= '<i style="font-size: 12px;color:red; ">用户名不能为空！</i>';
        return;
         }else {
            tips.innerHTML= '';
        }
    }
    //选定触发
    function ch() {
        var sel = document.getElementById('sel').value;
        alert(sel);
        return;
    }
    //提交验证
    function submits() {
        var name = document.getElementById('name');
        var pwd = document.getElementById('pwd');
        if (name.value == ''){
            alert('请输入用户名！');
            name.focus();//定位光标
            return;
        }
        if (pwd.value == ''){
            alert('请输入密码！');
            pwd.focus(); //定位光标
            return;
        }
        alert('用户名：' + name.value + ' 密码：' + pwd.value);
    }
</script>