一.js中数组的增删查改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function func1() {
var arr = ['a','b','c','d'];
//获取数组长度
console.log(arr.length);
//指定位置修改
arr[3] = 'e';
//尾部增加
arr.push('f');
//尾部删除
arr.pop();
//起始增加
arr.unshift('新增');
//删除起始
arr.shift();
//查找某个下标
var b = arr.slice(1);
// console.log(arr);
}
function func2() {
//指定位置增加-
var arr = ['a','b','c','d'];
var newArr = [];
for (var i = 0 ; i < arr.length;i++){
if (i == 2){
newArr.push('k');
}
newArr.push(arr[i]);
}
console.log(newArr);
}
func2();
</script>
</body>
</html>
二.js中的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用事件</title>
</head>
<body>
<!--onblur 当鼠标离开时触发事件-->
<input type="text" id="username" placeholder="请输入用户名" onblur="loseFocusUser()">
<br>
<input type="password" id="pwd" placeholder="请输入密码" onblur="loseFocusPwd()">
<br>
<!--onclick 当按钮被点击是触发 p a div i 等标签都可以被触发-->
<button onclick="submits()">提交</button>
<br>
<div>
<!-- onchange 用户改变输入框内容是触发-->
<select name="" id="select" onchange="selectAction()">
<option value="1">iPhone11 Pro Max</option>
<option value="2">HUAWEI Mate 30 5G</option>
<option value="3">Galaxy Note10+ 5G</option>
<option value="4">OPPO Reno3 5G</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 selectAction() {
var vl = document.getElementById('select').value;
alert('你的选择的值为:'+vl)
}
function loseFocusUser() {
var username =document.getElementById('username').value;
if(username == '') {
alert('请输入你的用户名');
}
}
function loseFocusPwd() {
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>
三.总结
通过学习了解了js数组中的增删查改,它与php语法相似却又有些不同。
又学到了js的事件处理,通过这些可以获取HTML标签并进行操作