批改状态:合格
老师批语:这样的案例网上有许多多做一些
js数组和常用事件
js数组和常用事件,js的数组变量用var来定义,var arr = [1,3,5,7,9];
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js数组和常用事件</title>
<style>
.box{ width: 300px; height: 300px; background: #f60; margin: 100px auto; }
</style>
<script>
var arr = [1,3,5,7,9];
//length 获取数组长度
alert('数组的长度是'+arr.length);
//for循环遍历数组,数组键值从0开始
for(i=0;i<arr.length;i++){
console.log(arr[i]);
}
//push 向数组后面追加值abc
arr.push('abc');
console.log(arr); //[1,3,5,7,9,'abc'];
//pop 删掉,弹出数组后面最后一个值
var res = arr.pop();
console.log(res); // abc
console.log(arr); // [1,3,5,7,9];
//splice(index,howmany),将数组从索引开始往后多少个裁剪
var res = arr.splice(2,3); //键值2开始,后面裁剪掉3个
console.log(res); // [5,7,9];
console.log(arr); //此时数组剩余[1,3]
// shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。
var res = arr.shift();
console.log(res); // 1
console.log(arr); //此时数组剩余[3]
//unshift()方法:在数组的前端添加项
var res = arr.unshift(6);
console.log(res); // 返回数组个数为2
console.log(arr); //此时数组[6,3]
// indexOf() 从左往右查询数组的下标
var res = arr.indexOf(6,0);
console.log(res); //返回键值0
var res = arr.indexOf(3,1);
console.log(res); //返回键值1
var res = arr.indexOf(7,0);
console.log(res); //7不存在,返回-1
function over(){
console.log('鼠标划过了');
}
function leave(){
console.log('鼠标离开了');
}
function dian(){
alert('鼠标点击了');
}
function _blur(){
alert('光标离开了');
}
function _change(){
alert('下拉框改变了');
}
</script>
</head>
<body>
<div class="box" onmouseover="over();" onmouseleave="leave()" onclick="dian()"></div>
<p>输入框失去光标事件</p>
<input type="text" placeholder="输入姓名" onblur="_blur();">
<p>下拉框change事件</p>
<select name="" id="" onchange="_change();">
<option value="1">湖北</option>
<option value="2">广东</option>
<option value="3">江西</option>
<option value="4">安徽</option>
</select>
<p onclick="window.location.href='http://www.baidu.com' ">点击跳转事件</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
结合老师讲的例子,练习js数组和事件加深印象。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号