12月17日- JS基础（二）

一、数组的定义和操作

• 数组定义

<script>
    //方法一
    var arr1 = new Array('java', 'php', 'python');
    //方法二
    var arr2 = ['java', 'php', 'python'];
</script>

• push()： 向数组末尾添加一个或多个元素,并返回新数组的长度

<script>
    var arr = ['java', 'php', 'python'];
    var res = arr.push('html');
    console.log(res); // 输出：4
</script>

• pop()： 删除数组的最后一个元素并返回删除的元素

<script>
    var arr = ['java', 'php', 'python'];
    var newArr = arr.push();
    console.log(newArr); // 输出：python
</script>

• shift()： 删除并返回数组的第一个元素

<script>
    var arr = ['java', 'php', 'python'];
    var res  = arr.shift();
    console.log(res); // 输出：java
</script>

• unshift()： 向数组的开头添加一个或更多元素，并返回新的长度

<script>
    var arr = ['java', 'php', 'python'];
    var res  = arr.unshift('css');
    console.log(res); // 输出：4
</script>

• slice()： 从已有的数组中返回选定的元素, 返回结果为数组

<script>
    var arr = ['java', 'php', 'python'];
    var res  = arr.slice(0, 2);
    console.log(res); // 输出：["java", "php"]
</script>

• splice()： 添加或删除数组中的元素, 返回结果为删除的元素数组

<script>
    var arr = ['java', 'php', 'python'];
    var res  = arr.splice(1, 0, 'html', 'css');
    console.log(res); // 输出：[]
    console.log(arr); // 输出：["java", "html", "css", "php", "python"]
</script>

• concat()： 连接两个或更多数组，并返回结果

<script>
    var arr = ['java', 'php', 'python'];
    var arr2 = ['html', 'css'];
    var res = arr.concat(arr2);
    console.log(arr); // 输出：["java", "php", "python", "html", "css"]
</script>

• indexOf()： 返回一个元素在数组中下标

<script>
     var arr = ['java', 'php', 'python'];
    var res = arr.indexOf('php');
    console.log(res); // 输出：1
</script>

• isArray()： 判断对象是否为数组

<script>
    var arr = ['java', 'php', 'python'];
    var res = Array.isArray(arr);
    console.log(res); // 输出：true
</script>

• join()： 把数组转化为字符串,()内连接符可选

<script>
    var arr = ['java', 'php', 'python'];
    var res = arr.join();
    console.log(res); // 输出：java,php,python
</script>

• includes()： 判断数组是否包含指定的值

<script>
    var arr = ['java', 'php', 'python'];
    var res = arr.includes('php');
    console.log(res); // 输出：true
</script>

二、DOM事件

• onclick()： 当用户点击某个元素调用的事件

<button onclick="show()">点击我</button>
<script>
   function show() {
       alert('我被点击了');
   }
</script>

• ondbclick()： 当用户双击某个对象时调用的事件

<button ondbclick="show()">点击我</button>
<script>
   function show() {
       alert('我被双击了');
   }
</script>

• onmouseover()： 鼠标移到某元素之上

<button onmousemove="show()">点击我</button>
<script>
   function show() {
       alert('我移动到元素上了');
   }
</script>

• onmouseout()： 鼠标从某元素移开

<button onmouseout="show()">点击我</button>
<script>
   function show() {
       alert('我从元素上移开了');
   }
</script>

• onblur()： 失去焦点时触发

<input type="text" onblur="show()">
<script>
   function show() {
       alert('失去焦点时触发');
   }
</script>

• onchange()： 内容改变时触发

<select name="city" id="city" onchange="show()">
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">广州</option>
    <option value="4">深圳</option>
</select>
<script>
   function show() {
       var text = document.getElementById('city').value;
       alert(text);
   }
</script>

THE END !