收藏
批改状态：合格
老师批语：可以将js事件添加到多个地方, 有不同的级别
数组1：arr.push(**)向数组中追加元素，可以添加任何类型的元素
<html>
<head>
</head>
<body>
</body>
<script>
var arr=[1,2,3,4,9];
//
arr.push(2,3，'aaa');
console.log(arr);
alert('长度是'+arr.length);
</script>
</html>点击 "运行实例" 按钮查看在线实例
数组2：删除最后一个元素,将删除的元素放在变量中res，alert显示为9，控制台输出剩余数组是1，2，3，4.
<html> <head> </head> <body> </body> <script> var arr=[1,2,3,4,9]; //从尾部弹出元素 var res = arr.pop(); alert(res); console.log(arr); </script> </html>
点击 "运行实例" 按钮查看在线实例
数组3：从数组中删除一个元素，并且数组里彻底删除这个元素。
<html> <head> </head> <body> </body> <script> var arr=[1,2,3,4,9]; //从开始位置删除元素 var res = arr.shift(); alert(res); console.log(arr); </script> </html>
点击 "运行实例" 按钮查看在线实例
数组4：反过来添加一个元素unshift，如下：
<html>
<head>
</head>
<body>
</body>
<script>
var arr=[1,2,3,4,9];
//从开始位置添加元素，abc是添加的元素
var res = arr.unshift('abc');
alert(res);
console.log(arr);
</script>
</html>点击 "运行实例" 按钮查看在线实例
数组5：从数组中删除一个特定位置的元素，index是删除元素在数组中的位置，也就是下标，从第几个开始删除，howmany是英文多少的意思，在这里就是要删除多少个，下面代码中的结果是删除了数组中3这个元素，从第三个开始删除，并且删除一个元素。
<html> <head> </head> <body> </body> <script> var arr=[1,2,3,4,9]; //arr.splice(index,howmany); var res = arr.splice(2,1); console.log(res); console.log(arr); </script> </html>
点击 "运行实例" 按钮查看在线实例
数组6：查询数组中是否有特定的某个元素,indexOf中，searchvalue代表寻找的元素或者说目标值，formindex代表从哪里开始寻找。下面代码中，由于数组中不存在元素5，所以返回-1.如果能够寻找到想要的元素，则返回这个元素的位置，也就是下标。
<html> <head> </head> <body> </body> <script> var arr=[1,2,3,4,9]; //arr.indexOf(searchvalue,formindex); var res = arr.indexOf(5,0); console.log(res); console.log(arr); </script> </html>
点击 "运行实例" 按钮查看在线实例
数组6：使用while循环遍历数组，i++不能缺少，否则会造成死循环。
<html>
<head>
</head>
<body>
</body>
<script>
var arr=[1,2,3,4,5,9];
var i=0;
while(i<arr.length){
console.log(arr[i]);
i++;
}
</script>
</html>点击 "运行实例" 按钮查看在线实例
事件1：鼠标滑进设置的div中，在控制台查看结果
<html>
<head>
</head>
<body>
<div style="background: coral;height: 100px;width:100px;" onmouseover="over()">
</div>
</body>
<script>
function over(){
console.log('鼠标滑进了');
}
</script>
</html>点击 "运行实例" 按钮查看在线实例
事件2：鼠标划出div，控制台查看结果
<html>
<head>
</head>
<body>
<div style="background: coral;height: 100px;width:100px;" onmouseout="out()">
</div>
</body>
<script>
function out(){
console.log('鼠标滑出了');
}
</script>
</html>点击 "运行实例" 按钮查看在线实例
事件3：onmouseover,onmouseout结合在一起后，查看控制台，一出一进都会触发效果，说明js可以在dom中添加事件。
<html>
<head>
</head>
<body>
<div style="background: coral;height: 100px;width:100px;" onmouseleave ="leave()"; onmouseover="over()">
</div>
</body>
<script>
function leave(){
console.log('鼠标滑出了');
}
function over(){
console.log('鼠标滑进了');
}
</script>
</html>点击 "运行实例" 按钮查看在线实例
事件4：检查事件，查看输入的内容是否符合规则
<html>
<head>
</head>
<body>
<input type="text " placeholder="email" onblur="checks()"/><br><br>
</div>
</body>
<script>
function checks(){
alert('邮箱不合法');
}
</script>
</html>点击 "运行实例" 按钮查看在线实例
事件5：change(),当一个内容发生变化时，另个元素也会根据这个元素而发生联动，同时变化。
代码中，改变一个元素时，触发一个alert，代表成功改变了。
<html>
<head>
</head>
<body>
<select name="" id="" onchange="change()">
<option value="1">沈阳</option>
<option value="2">北京</option>
<option value="3">广州</option>
</select>
</div>
</body>
<script>
function change(){
alert('value改变了');
}
</script>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
