登录  /  注册
博主信息
博文 24
粉丝 2
评论 5
访问量 18330
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
js数组和常用事件练习--2019-10-22
木槿昔年的博客
原创
631人浏览过

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举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学