博主信息
博文 28
粉丝 0
评论 0
访问量 26239
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
JS数组相关函数案例、常用事件案例的练习—2019年10月22日
L先生的博客
原创
965人浏览过

JS数组相关函数案例

定义数组

实例

<script>
	var arr=["dh","flk",6,7];  //定义数组的方法一
	var arr2=new Array("dh","flk",6,7);  //定义数组的方法二
	var arr3=new Array();
	arr3[0]=10;
	arr3[1]=20;  //定义数组的方法三
	
	console.log(arr);  //结果  dh,flk,6,7
	console.log(arr[0]);  //结果  dh
	// 其他两个数组的输出类似,一般使用第一种
		
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

结果:

4.JPG

数组遍历

实例

<script>
	var arr = [3,5,4,6,7,];
	// 方法一:
	for(i=0;i<arr.length;i++){
	    console.log(arr[i]);
	}
	// 方法二:
	var i=0;
	while(i<arr.length){
	    console.log(arr[i]);
	    i++;
	}
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

结果:依次输出数组内的数据

数组元素的增删改查

实例

<script>
	var arr=[2,4,6,7,8];
	console.log(arr);
	// 增
	arr.push(9);  //往数组最后追加元素
	console.log(arr);
	arr.unshift(10);    //往数组首部追加元素。
	console.log(arr);
	// 删
	arr.pop();      //弹出尾部元素,返回删除元素的值,不需要参数
	console.log(arr);
	arr.shift();      //弹出首部元素,返回删除元素的值,不需要参数
	console.log(arr);
	
	// arr.splice(index,howmany);     //第一个参数是删除的起始位置,第二个是删除的数量
	var res = arr.splice(2,2);    //返回删除了的数据,从下标为2开始删除2个元素
	console.log(res);
	console.log(arr);
	// 改
	arr[0]=99;
	console.log(arr);
	// 查
	// arr.indexOf(searchvalue,formindex);  //第一个参数是找查找的数据,第二个参数是查找的起始位置
	var res = arr.indexOf(8,0);        //返回查找到的数据的位置,如果找不到返回-1
	console.log(res);
	var res = arr.indexOf(10,0);        //返回查找到的数据的位置,如果找不到返回-1
	console.log(res);
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

结果:

5.JPG

常用事件案例

鼠标经过移除事件

实例

<body>
<div style="background:red;width:100px;height:50px;" onmouseover="over()" onmouseleave="leave()">
</div>
<script>
function over(){console.log('鼠标划过了');}
function leave(){console.log('鼠标移走了');}
</script>
</body>

运行实例 »

点击 "运行实例" 按钮查看在线实例

结果:

6.JPG

onblur

填写表单时,填写完一个输入框,进入下一个输入框时(失去聚焦)使用的方法,可以用于校验

实例

<input type="text" placeholder="email" onblur="checks1()" />
<input type="telphone" placeholder="电话" onblur="checks2()" />
<script>
function checks1(){alert('email不合法');}
function checks2(){alert('dianhua不合法');}
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

onchange

实例

<select onchange="change()">
	<option value='1'>上海</option>
	<option value='2'>北京</option>
</select>
<script>
function change(){alert('值改变了');}
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

页面跳转

window对象重新定位

实例

<script>
window.location.href='https://www.baidu.com';
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

打开新窗口,功能类似a标签,默认被拦截,可以打开

实例

<a href="https://www.baidu.com" target="_black">baidu</a>
window.open('https://www.baidu.com')

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结:

数组插入数据键与本来的有间隙时,js自动填充为空,length的长度为新插入的键的值。

常见的事件还包括:
    onclick                单击事件
    onMouseOver            鼠标经过事件
    onMouseOut            鼠标移出事件
    onChange            文本内容改变事件
    onSelect            文本框选中事件
    onFocus                光标聚集事件
    onBlur                移开光标事件
    onLoad                网页加载事件
    onUnload            关闭网页事件


批改状态:合格

老师批语:事件具有一定的规律 , 记住触发条件与参数很重要
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

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

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