一、常用对象
1.1 数组
1.创建数组:
let arr = [1,2,3];
let arr = new Array(1,2,3);
注意：JS数组不区分数据类型，而且其长度可以随意改变，因此JS数组类似于Java中的集合
2.数组常用方法:
length:这是一个属性，用于获取数组长度
forEach()：遍历数组中的有值元素
push()：从尾部向数组添加元素
splice(开始索引,删除个数)：删除指定元素
<script>
//1. 创建数据
let arr1 = [1,2,3,"hello",new Date(),null,true];
let arr2 = new Array("hello",5,null,false);
console.log(arr1);
console.log(arr2);
//2. 打印长度
console.log(arr1.length);
console.log(arr2.length);
console.log("---------------------------------")
//3.遍历数组中的有值元素
arr1.forEach(element => {
console.log(element);
});
console.log("---------------------------------")
//4. 遍历数组中所有元素
for(let item of arr2){
console.log(item)
}
//5. 向数组添加元素
arr2.push(500)
for(let item of arr2){
console.log(item)
}
console.log("---------------------------------")
//6. 从数组中删除元素
arr2.splice(1,3)
for(let item of arr2){
console.log(item)
}
</script>1.2 字符串
1. 构造方式：
let str = " xcx "; 双引号，单引号都行
let str = new String("哈哈");
2. 常见方法：
length: 属性，获取字符串长度
chatAt(): 返回在指定位置的字符串
indexOf(): 检索字符串位置
trim(): 移除字符串首尾空白
substring(开始,结束) 字符串截取
<script>
//1. 创建字符串
let str1 = " hello world ";
let str2 = new String("好好学习");
console.log(str1);// hello world
console.log(str2);//"好好学习"
//2. 获取字符串长度
console.log(str1.length);//13
//3. 返回指定位置的字符串
console.log(str1.charAt(3))//l
//4. 检查字符串位置
console.log(str1.indexOf("l"));//3
//5. 删除首尾空白
console.log(str1.trim().length);//11
//6. 字符串截取
let str3 = str1.substring(1,6);
console.log(str3);//hello
</script>1.3 数学
Math对象
1. 四舍五入 round()
2. 向下取整 floor()
3. 向上取整 ceil()
4. 产生随机数 random() ：返回 [0,1) 之间的随机数。 [0,1) 左闭右开区间,包含0不包含1
<script>
let n = 1234.567
//1. 四舍五入取整
console.log(Math.round(n));//1235
//2. 向下取整
console.log(Math.floor(n));//1234
//3. 向上取整(去除小数，+1)
console.log(Math.ceil(n));//1235
console.log(Math.ceil(1234));//1234
//4. 产生随机数
console.log(Math.random());//[0,1)
//5. 练习:获取一个[1,10]的随机数
//Math.random()--[0,1)--*10--[0,10)--+1--[1,11)--向下取整--[1,10]
console.log(Math.floor(Math.random()*10+1))
</script>1.4 JSON
1. 概念
JSON（JavaScript Object Notation）JavaScript对象标记法，本质是通过JavaScript对象标记法书写的文本
JSON主要用做数据载体，在网络中进行数据传输，JSON数据的value部分，主要支持三种类型的数据：
1. 简单类型：数字、字符串、布尔、时间、null
2. 数组：使用 [] 表示，let studentName = ["张三","李四","王五"];
3. 对象：使用 {} 表示，let user = {"name":"Jerry","age":18};
2. 转换
JSON字符串转为JS对象:var jsObject = JSON.parse(userStr);
JS对象转为JSON字符串:var jsonStr = JSON.stringify(jsObject);
<script> // 1.描述用户对象（张三丰、男、32岁） let user = { name: "张三丰", sex: "男", age: 32 } console.log(user) console.log(user.age) // 2.描述用户数组（张三丰、张翠山、张无忌） let users1 = ["张三丰", "张翠山", "张无忌"] console.log(users1) let users2 = [ { name: "张三丰", sex: "男", age: 32 }, { name: "张翠山", sex: "男", age: 42 }, { name: "张无忌", sex: "男", age: 52 } ] console.log(users2) // 3.描述韦小宝（27岁，老婆、师傅） let wxb = { name: "韦小宝", age: 27, wife: [ { name: "双儿", sex: "女", age: 20 }, { name: "单儿", sex: "女", age: 24 }, { name: "单双儿", sex: "女", age: 22 } ], shifu:{name : "陈近南",age : 40} } console.log(wxb) //输出韦小宝师父的名字 console.log(wxb.shifu.name) //输出韦小宝的第一个妻子 console.log(wxb.wife[0]) </script>
二、BOM对象
BOM（Browser Object Model ）浏览器对象模型，其作用是把浏览器抽象成为一个对象模型，然后可以使用js模拟浏览器的一些功能。
2.1 Window
Window对象可以实现两种定时器：
设置定时器：setInterval（周期性任务）、setTimeout（一次性任务）
let xxx = setTimeout(function(){
执行的代码
},时间间隔)
清除定时器：clearInterval clearTimeout
clearTimeout(xxx);
<body>
<button id="bt1">清除timeout一次性任务</button>
<button id="bt2">清除Interval周期性任务</button>
<script>
// 1. 定时5秒之后在控制台打印当前时间
let st = setTimeout(function(){
console.log(new Date())
}, 5000);
//点击按钮删除延迟时间函数
document.getElementById("bt1").onclick=function(){
clearTimeout(st)
}
// 2. 每隔2秒在控制台打印递增自然数
let index = 0
let si = setInterval(function(){
console.log("index=" + index)
index++
},2000)
//点击按钮删除间隔时间函数
document.getElementById("bt2").onclick = function(){
clearInterval(si)
}
</script>
</body>2.2 Location
Location对象指的是浏览器的地址栏，它的主要作用是：使用href属性完成地址的获取和跳转
<body>
<button onclick="addr()">获取当前浏览器地址</button>
<br>
<br>
<button onclick="jump()"> 跳转页面(重点)</button>
<script>
//1. 点击按钮，获取当前地址栏地址
function addr(){
console.log(location.href)
}
//2. 点击按钮，设置当前地址栏地址
function jump(){
location.href="http://www.baidu.com"
}
</script>
</body>三、DOM对象
DOM（Document Object Model）文档对象模型，其作用是把HTML页面内容抽象成为一个Document对象，然后可以使用js动态修改页面内容。
1. 获取元素(标签)对象
document.getElementById(id属性值)
document.getElementsByTagName(标签名)
document.getElementsByClassName(class属性值)
document.getElementsByName(name属性值)
2. 读取和设置dom对象属性
对象.属性名
对象.属性名=""
3. 读取和设置dom对象中的文本
对象.innerHTML
对象.innerHTML=""
<body>
<form action="#" method="get">
姓名 <input type="text" name="username" id="username" value="小明"/> <br/><br/>
性别
<input type="radio" name="gender" value="male" class="radio">男 
<input type="radio" name="gender" value="female" class="radio"/>女<br/><br/>
爱好
<input type="checkbox" name="hobby" value="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头<br/><br/>
学历
<select name="edu">
<option value="0">请选择</option>
<option value="1">入门</option>
<option value="2">精通</option>
<option value="3">放弃</option>
</select>
<br/><br/>
<div id="myDiv">程序猿最讨厌的四件事：<br>自己写注释、自己写文档……</div>
</form>
<script>
//1.获取id="username"的标签对象
let un=document.getElementById("username");
console.log(un)
//2.获取class="radio"的标签对象数组
let radios = document.getElementsByClassName("radio")
for(let item of radios){
console.log(item)
}
console.log("--------------------")
//3.获取所有的option标签对象数组
let options = document.getElementsByTagName("option");
for(let item of options){
console.log(item)
}
//将第二个option设置为默认勾选
options[1].selected = true; //或 options[1].selected = "selected";
//4.获取name="hobby"的input标签对象数组
let hobbys = document.getElementsByName("hobby")
for(let item of hobbys){
console.log(item)
}
//将第二个hobby设置为默认勾选
hobbys[1].checked = true;
//5. 修改姓名的值为小红
un.value="小红";
//6. 在上面div中的内容中添加---> <br>别人不写注释、别人不写文档……
document.getElementById("myDiv").innerHTML += "<br>别人不写注释、别人不写文档……"
//7. 给Div添加背景色
document.getElementById("myDiv").style.backgroundColor = "pink"
</script>
</body>
四、Ajax
概念：Asynchronous JavaScript And XML，异步的JavaScript和XML
作用：通过Ajax可以给服务器发送请求，并获取服务器响应的数据，然后在不重新加载整个页面的情况下，更新网页的部分区域
Ajax的原生语法十分繁琐，而Axios是一个封装好的ajax的框架
//axios 发送get请求
axios.get("url").then(resp=>{
resp.data;//返回结果
})
// axios发送post请求
axios.post("url",{username:"张三",age:18}).then(resp=>{
resp.data;// axios发送post请求
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax-Axios-发送请求</title>
<!--1.引入axios外部js-->
<script src="../js/axios-0.18.0.js"></script>
</head>
<body>
<script>
/*
1.引入axios外部js
2.发起调用(get)
*/
//resp:响应数据对象(包括后端返回的数据和响应状态等信息)
axios.get("https://mock.apifox.cn/m1/3128855-0-default/emp/list").then(resp=>{
//获取服务器端响应，处理
console.log(resp.data)
})
</script>
</body>
</html>案例
使用Axios向指定后台发送请求，将拉取的数据渲染成HTML表格
后台的数据地址是：https://mock.apifox.cn/m1/3128855-0-default/emp/list
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Ajax-Axios-案例</title>
<script src="../js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
<table border="1" cellspacing="0" width="60%" id="tab">
<tr id="head">
<th>编号</th>
<th>姓名</th>
<th>图像</th>
<th>性别</th>
<th>职位</th>
<th>入职日期</th>
<th>最后操作时间</th>
</tr>
</table>
</div>
<!--
使用Axios向指定后台发送请求，将拉取的数据渲染成HTML表格
后台的数据地址是：https://mock.apifox.cn/m1/3128855-0-default/emp/list
-->
<script>
//1.页面中导入axios外部js
//2.
axios.get("https://mock.apifox.cn/m1/3128855-0-default/emp/list").then(res=>{
//3.获取完整数据(获取其中的用户数组)
let users = res.data.data
//4.循环用户数据，每个用户构建一个tr字符串
let trs=""
for(let user of users){
trs += "<tr align='center'>"
trs +="<td>"+user.id+"</td>"
trs +="<td>"+user.name+"</td>"
trs +="<td><img src='"+user.image+"' width='70px' height='50px'></td>"
trs +="<td><span>"+(user.gender == '1' ? "男" : "女")+"</span></td>"
trs +="<td>"+user.job+"</td>"
trs +="<td>"+user.entrydate+"</td>"
trs +="<td>"+user.updatetime+"</td>"
trs +="</tr>"
}
//5.将tr字符串，叠加到table中
document.getElementById("tab").innerHTML += trs
})
</script>
</body>
</html>获取数据如图所示：
扫一扫
150
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
