博客列表 >js数组和常用事件练习--2019-10-22

js数组和常用事件练习--2019-10-22

木槿昔年的博客
木槿昔年的博客原创
2019年10月23日 18:13:20654浏览

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数组和事件加深印象。

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议