博客列表 >12月17日js数组的增删改查及事件应用

12月17日js数组的增删改查及事件应用

随风
随风原创
2019年12月18日 10:51:55673浏览

数组的增删改查

`<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<title>js</title>
</head>

<body>

<h2>js数组的增删改查</h2>

<script type="text/javascript">
var arr=[‘张三’,’李四’,’王五’,’孙六’,’赵七’];
// alert(arr);
// console.log(arr);
//查看数组的长度
// var a=arr.length;
// console.log(a);
// 数组新增
// 开头新增
var res=arr.unshift(‘数组开头’);
// console.log(res);
// alert(arr);
// console.log(arr);
//尾部新增
var end=arr.push(‘数组结尾’);
// console.log(arr);
// //中间第第四个位置新增
function arrAdd(t,val) {
var res1=[];
for (i =0 ;i<arr.length;i++) { if(i == t){ res1.push(val); } res1.push(arr[i]); } console.log(res1); } arrAdd(4,'数据中间'); console.log(arr); //数据删除 //头部删除 var begDel=arr.shift(); console.log(arr); //尾部删除 var endDel=arr.pop(); console.log(arr); //中间删除 function arrDel(t) { var res1=[]; for (i =0 ;i<arr.length;i++) { if(i == t){ continue; } res1.push(arr[i]); } console.log(res1); } arrDel(2); //数据修改 arr[1]='李四数据修改'; console.log(arr); //数据查询 var sel=arr.slice(1); console.log(sel); // 数组合并 var arr1=['数组合并']; var arr2 = arr.concat()+arr1; console.log(arr2); </script>

</body>
</html>`

事件应用

`<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<title>js</title>
</head>

<body>

<h2>函数练习</h2>

<h3>onclick onmouseleave onblur onchange</h3>
<!--onblur 当鼠标离开时触发事件-->

<input type="text" id="username" placeholder="请输入用户名" onblur="pl()">
<br>

<input type="password" id="pwd" placeholder="请输入密码" onblur="pl1()">
<br>
<!--onclick 当按钮被点击是触发 p a div i 等标签都可以被触发-->

<button onclick="submits()">提交</button>
<br>

<div>
<!-- onchange 用户改变输入框内容是触发-->
<select name="" id="sel" onchange="vl()">
<option value="1">手机</option>
<option value="2">pad</option>
<option value="3">电脑</option>
<option value="4">电视</option>

</select>
</div>

<!--<a href="javascript:void (0)" onclick="submits()">提交</a>-->

<!-- onmouseover事件在鼠标移动到时触发 onmouseleave事件在鼠标移出时触发-->

<button onclick="submits()" onmouseleave="down()" onmouseover="up()" id="tj">鼠标事件</button>

<script type="text/javascript">

function vl() {
var vl = document.getElementById(‘sel’).value;
alert(‘你的当期值为:’+vl)
}
function pl() {
var username =document.getElementById(‘username’).value;
if(username==’’)
{
alert(‘请输入你的用户名’);
}

}
function pl1() {
var pwd =document.getElementById(‘pwd’).value;
if(pwd==’’)
{
alert(‘请输入你的密码’);
}
}

function up() {
// console.log(‘鼠标上移’);
document.getElementById(‘tj’).style.color=’red’;
}
function down() {
// console.log(‘鼠标下移’);
document.getElementById(‘tj’).style.color=’black’;
}

function submits() {
var username = document.getElementById(‘username’).value;
var pwd = document.getElementById(‘pwd’).value;
if (username==’’){
return alert(‘请输入用户名’);

}
if ((pwd==’’)){
return alert(‘请输入密码’);
}
alert(‘用户名为:’+username+’密码为:’+pwd);
}

</script>

</body>
</html>`

总结

基本了解了数组的增删改查,了解了部分的事件触发。

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