![ThinkPHP5实战之[教学管理系统]](https://img.php.cn/upload/course/000/000/068/6253d87459486427.png)
批改状态：合格
老师批语：很认真, 加油
收藏
收藏
收藏
一、JS的数组，及常用函数的练习！
定义一个JS数组
var arr=[1,2,3,4,5,6,7,8,9];
使用 arr.push （）函数可以给JS数组添加元素到最后一位！
<script> var arr=[1,2,3,4,5,6,7,8,9]; arr.push(10); console.log(arr); </script>
点击 "运行实例" 按钮查看在线实例
3.使用 arrpop（）函数可以弹出JS数组的最后一个元素！
var arr=[1,2,3,4,5,6,7,8,9];
arr.pop(10);
4.使用arr.shift()函数 可以删除JS数组的第一个元素！
var arr=[1,2,3,4,5,6,7,8,9];
arr.shift();
5.使用arr.unshift()函数，可以从JS数组元素的前面添加元素！
var arr=[1,2,3,4,5,6,7,8,9];
arr.unshift(0);
6.使用arr.splice(index,howmany)函数，可以删除JS数组中的元素，（）内有两个参数，第一个是删除的位置，第二个参数是添要删除的元素数量！
下面演示从元素第三个位置开始删除，删除4个元素！
var arr=[1,2,3,4,5,6,7,8,9];
arr.splice(3,4);
7.使用arr.indexOf(searchvalue，formindex)函数，可以查找JS数组中的元素在数组中的下标位置，其中（）内的第一个参数是要查找的元素，第二个参数是从JS数组元素的位置。如果查找不到就会显示 -1 ！
var arr=[1,2,3,4,5,6,7,8,9];
arr.indexOf(7,0);
8.在JS里，可以使用for循环及while循环来遍历数组：
var arr=[1,2,3,4,5,6,7,8,9];
// 使用for 循环来遍历数组
for (i = 0; i<arr.length; i++) ｛
}
// 使用while循环来遍历数组
var arr=[1,2,3,4,5,6,7,8,9];
var i=0;
while (i<arr.length) {
i++;
}
二、JS常用事件，练习：
1.JS直接跳转链接事件.window.location.href='';
window.location.href='https://www.qq.com';（跳转到腾讯首页）
2.JS跳转新的页面窗口事件：window.open(''）；PS：默认被大多数浏览器拦截：
window.open('https://www.qq.com');（跳转到腾讯首页）
3.当触发鼠标滑过事件：onmouseover=""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
function over(){
alert('鼠标碰到我了');
}
</script>
</body>
<div style="height: 100px;width: 100px;background: red;" onmouseover="over()"></div>
</html>点击 "运行实例" 按钮查看在线实例
4.当鼠标移走的时候触发事件：onmouseleave=""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
function leave(){
alert('鼠标移走了哦！');
}
</script>
</body>
<div style="height: 100px;width: 100px;background: red;" onmouseleave="leave()"></div>
</html>点击 "运行实例" 按钮查看在线实例
5.onblur=“”事件；失去鼠标焦点触发！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text" placeholder="email" onblur="checks()" >
<input type="telphoen" placeholder="请输入手机号码" >
<script>
function checks(){
alert('邮箱不合法，请重新输入：如123456@qq.com');
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
6.onchange="" 事件；value改变时，触发！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<select name="" id="" onchange="change()" >
<option value="1">北京</option>
<option value="2">上海</option>
</select>
<script>
function change(){
alert('您已经定位到上海');
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结： 事件很有用，很有意思，以后做项目都用得上，很多个常用事件开头字母是on.
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
