85 lines
1.8 KiB
HTML
85 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>js 复习</title>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<input type="text" placeholder="关键字">
|
||
<button>搜索</button>
|
||
<div class="result"></div>
|
||
|
||
|
||
</body>
|
||
<script>
|
||
// 数组&对象 循环 事件&方法（代码封装） ajax请求 dom操作
|
||
|
||
//
|
||
|
||
// 数组 for forEach while map filter
|
||
var a = [1, 2, 3, 4, 5, 6]
|
||
console.log(a[0]);
|
||
|
||
a.forEach((v) => {
|
||
console.log(v);
|
||
})
|
||
|
||
|
||
// for in 对象 key（键 名字） - value（值） 来存值
|
||
var obj = {
|
||
name: '刘兵',
|
||
age: 18
|
||
}
|
||
|
||
for (const key in obj) {
|
||
console.log(obj[key]);
|
||
}
|
||
|
||
|
||
// 作业 遍历打印出下面数组中的所有数值
|
||
// typeof 变量名 作用：求变量类型
|
||
var test = [1, 2, 3, 4, [5, 6, 7, 8], [9, 10, 11, 12, 13]];
|
||
|
||
test.forEach(v => {
|
||
|
||
// 如果外层循环遇到了 数字，才打印
|
||
if (typeof v == "number") {
|
||
console.log(v);
|
||
|
||
// 如果外层循环的时候遇到了 数组，那么就进行二次遍历
|
||
} else {
|
||
v.forEach(j => {
|
||
console.log(j);
|
||
});
|
||
}
|
||
})
|
||
|
||
|
||
// 使用 querySelector 获取一个按钮并存放到变量button中
|
||
// 获取多个 querySelectorAll
|
||
// innerText 插入文字
|
||
// innerHTML 插入html
|
||
var button = $("button");
|
||
var input = $("input");
|
||
var result = $(".result");
|
||
|
||
button.onclick = () => {
|
||
console.log(input.value)
|
||
result.innerText = input.value
|
||
}
|
||
|
||
|
||
function $(className) {
|
||
return document.querySelector(className)
|
||
}
|
||
|
||
|
||
|
||
</script>
|
||
|
||
</html> |