一、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.