博客列表 >js数组函数案例,事件2019年10月22日20时

js数组函数案例,事件2019年10月22日20时

加勒比强强的博客
加勒比强强的博客原创
2019年10月25日 16:00:54735浏览

数组1:arr.push(**)向数组中追加元素,可以添加任何类型的元素

实例

<html>
<head>
</head>
<body>
</body>

<script>


var arr=[1,2,3,4,9];
//
arr.push(2,3,'aaa');
console.log(arr);
alert('长度是'+arr.length);




</script>

</html>

运行实例 »

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

数组2:删除最后一个元素,将删除的元素放在变量中res,alert显示为9,控制台输出剩余数组是1,2,3,4.

实例

<html>
<head>
</head>
<body>
</body>

<script>


var arr=[1,2,3,4,9];
//从尾部弹出元素
var res = arr.pop();
alert(res);
console.log(arr);





</script>

</html>

运行实例 »

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


数组3:从数组中删除一个元素,并且数组里彻底删除这个元素。

实例

<html>
<head>
</head>
<body>
</body>

<script>


var arr=[1,2,3,4,9];
//从开始位置删除元素
var res = arr.shift();
alert(res);
console.log(arr);




</script>

</html>

运行实例 »

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

数组4:反过来添加一个元素unshift,如下:

实例

<html>
<head>
</head>
<body>
</body>

<script>


var arr=[1,2,3,4,9];
//从开始位置添加元素,abc是添加的元素
var res = arr.unshift('abc');
alert(res);
console.log(arr);




</script>

</html>

运行实例 »

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

数组5:从数组中删除一个特定位置的元素,index是删除元素在数组中的位置,也就是下标,从第几个开始删除,howmany是英文多少的意思,在这里就是要删除多少个,下面代码中的结果是删除了数组中3这个元素,从第三个开始删除,并且删除一个元素。


实例

<html>
<head>
</head>
<body>
</body>

<script>


var arr=[1,2,3,4,9];

//arr.splice(index,howmany);
var res = arr.splice(2,1);

console.log(res);
console.log(arr);



</script>

</html>

运行实例 »

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

数组6:查询数组中是否有特定的某个元素,indexOf中,searchvalue代表寻找的元素或者说目标值,formindex代表从哪里开始寻找。下面代码中,由于数组中不存在元素5,所以返回-1.如果能够寻找到想要的元素,则返回这个元素的位置,也就是下标。

实例

<html>
<head>
</head>
<body>
</body>

<script>


var arr=[1,2,3,4,9];

//arr.indexOf(searchvalue,formindex);
var res = arr.indexOf(5,0);
console.log(res);
console.log(arr);



</script>

</html>

运行实例 »

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

数组6:使用while循环遍历数组,i++不能缺少,否则会造成死循环。

实例

<html>
<head>
</head>
<body>
</body>

<script>


var arr=[1,2,3,4,5,9];

var i=0;
while(i<arr.length){
	console.log(arr[i]);
	i++;
}


</script>

</html>

运行实例 »

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


事件1:鼠标滑进设置的div中,在控制台查看结果

实例

<html>
<head>
</head>
<body>


<div style="background: coral;height: 100px;width:100px;" onmouseover="over()">


	
</div>

</body>

<script>

function over(){
	console.log('鼠标滑进了');
}


</script>

</html>

运行实例 »

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

事件2:鼠标划出div,控制台查看结果

实例

<html>
<head>
</head>
<body>


<div style="background: coral;height: 100px;width:100px;" onmouseout="out()">


	
</div>

</body>

<script>

function out(){
	console.log('鼠标滑出了');
}


</script>

</html>

运行实例 »

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

事件3:onmouseover,onmouseout结合在一起后,查看控制台,一出一进都会触发效果,说明js可以在dom中添加事件。

实例


<html>
<head>
</head>
<body>


<div style="background: coral;height: 100px;width:100px;" onmouseleave ="leave()"; onmouseover="over()">


	
</div>

</body>

<script>

function leave(){
	console.log('鼠标滑出了');
}
function over(){
	console.log('鼠标滑进了');
}

</script>

</html>

运行实例 »

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



事件4:检查事件,查看输入的内容是否符合规则

实例

<html>
<head>
</head>
<body>

<input type="text " placeholder="email" onblur="checks()"/><br><br>

	
</div>

</body>

<script>

function checks(){
	alert('邮箱不合法');
}

</script>

</html>

运行实例 »

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


事件5:change(),当一个内容发生变化时,另个元素也会根据这个元素而发生联动,同时变化。

代码中,改变一个元素时,触发一个alert,代表成功改变了。

实例

<html>
<head>
</head>
<body>

<select name="" id="" onchange="change()">
	<option value="1">沈阳</option>
	<option value="2">北京</option>
	<option value="3">广州</option>

</select>
	
</div>

</body>

<script>

function change(){
	alert('value改变了');
}



</script>

</html>

运行实例 »

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




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