博客列表 >JS数组相关函数案例、常用事件案例的练习—2019年10月22日

JS数组相关函数案例、常用事件案例的练习—2019年10月22日

L先生的博客
L先生的博客原创
2019年10月23日 18:56:25801浏览

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 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议