js 5哈哈哈哈哈哈哈哈
day5_javascript3
1动态dom操作
1动态操作的两个步骤(理解)
//1.虚拟dom结构 可以做dom操作 但是不会渲染let newLi = document.createElement('li')let newButton = document.createElement('button')newButton.innerHTML = '新添加的button'newLi.appendChild(newButton)//newLi.innerHTML = '新添加的li'//2.挂载到dom树上 触发渲染document.getElementById("myUl").appendChild(newLi)2动态dom操作常见api
document.createElement('li') 创建元素
document.getElementById("myUl").appendChild(newLi) 追加子元素
document.getElementById("myUl").insertBefore(newLi,document.getElementById("myLi")) 插入到指定位置
document.getElementById("myUl").removeChild(document.getElementById("myLi")) 删除元素
document.getElementById("myUl").cloneNode(bol) 克隆元素 bol决定是否复制子元素3动态操作示例
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>title</title>
</head>
<body><button onclick="addEle()">添加一个新li</button><button onclick="addEle2()">添加一个新li2</button><button onclick="addEle3()">添加一个新li3</button><button onclick="delEle()">删除li</button><ul id="myUl"><li id="myLi"><button>测试按钮</button></li></ul>
</body>
<script>
/*document.createElement('li') 创建元素document.getElementById("myUl").appendChild(newLi) 追加子元素document.getElementById("myUl").insertBefore(newLi,document.getElementById("myLi")) 插入到指定位置document.getElementById("myUl").removeChild(document.getElementById("myLi")) 删除元素document.getElementById("myUl").cloneNode(bol) 克隆元素 bol决定是否复制子元素*/
const addEle = ()=>{//1.虚拟dom结构 可以做dom操作 但是不会渲染let newLi = document.createElement('li')let newButton = document.createElement('button')newButton.innerHTML = '新添加的button'newLi.appendChild(newButton)//newLi.innerHTML = '新添加的li'//2.挂载到dom树上 触发渲染document.getElementById("myUl").appendChild(newLi)
}const addEle2 = ()=>{//1.虚拟dom结构 可以做dom操作 但是不会渲染let newLi = document.createElement('li')let newButton = document.createElement('button')newButton.innerHTML = '新添加的button2'newLi.appendChild(newButton)//newLi.innerHTML = '新添加的li'//2.挂载到dom树上 触发渲染document.getElementById("myUl").insertBefore(newLi,document.getElementById("myLi"))
}const addEle3 = ()=>{//1.虚拟dom结构 可以做dom操作 但是不会渲染let newLi = document.getElementById("myLi").cloneNode(true)//newLi.innerHTML = '新添加的li'//2.挂载到dom树上 触发渲染document.getElementById("myUl").appendChild(newLi)
}
const delEle = ()=>{document.getElementById("myUl").removeChild(document.getElementById("myUl").lastElementChild)}
</script>
</html>4简化dom操作
innerHTML 可以让浏览器解析html标签 可以用来简化dom操作 // 适用在替换,追加的场景 删除使用原生js处理 innerText 只能显示纯文本
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>title</title>
</head>
<body><button onclick="addEle()">添加一个新li</button><button onclick="delEle()">删除li</button><ul id="myUl"><li id="myLi"><button>测试按钮</button></li></ul>
</body>
<script>
//innerHTML 可以让浏览器解析html标签 可以用来简化dom操作// 替换 追加// innerText 只能显示纯文本
const addEle = ()=>{document.getElementById("myUl").innerHTML += "<li><button>新按钮</button></li>"
}
const delEle = ()=>{//console.log(document.getElementById("myUl").innerHTML);document.getElementById("myUl").removeChild(document.getElementById("myUl").lastElementChild)}
</script>
</html>5table操作(了解)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button onclick="addRow()">添加一行</button><button onclick="delRow()">删除一行</button><h1>表格测试</h1>
<table id="myTable" border="1"><caption>用户信息表</caption><!-- --><thead><tr><th>姓名</th><th>年龄</th><th>手机号</th><th>住址</th></tr></thead>
<tbody><tr><td>小明</td><td align="center">18</td><td>1333333333</td><td rowspan="2">凤阳大街18号</td></tr><tr><td>小光</td><td>19111111111111111111111</td><td>155555555</td></tr></tbody>
</table>
</body>
<script>//table是二维表 js中会描述成类似二维数组结构//动态操作时 简化为搭配索引操作//.rows 所有行 cells 当前行所有单元格console.log(document.getElementById("myTable").rows[1].cells[0].innerHTML);const addRow = ()=>{let newTr = document.getElementById("myTable").insertRow(1)newTr.insertCell(0).innerHTML = "小王"newTr.insertCell(1).innerHTML = "18"}
const delRow = ()=>{document.getElementById("myTable").deleteRow(document.getElementById("myTable").rows.length-1)
}</script>
</html>innerHTML处理
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button onclick="addRow()">添加一行</button><button onclick="delRow()">删除一行</button><h1>表格测试</h1>
<table id="myTable" border="1"><caption>用户信息表</caption><!-- --><thead><tr><th>姓名</th><th>年龄</th><th>手机号</th><th>住址</th></tr></thead>
<tbody id="mianData"><tr><td>小明</td><td align="center">18</td><td>1333333333</td><td rowspan="2">凤阳大街18号</td></tr><tr><td>小光</td><td>19111111111111111111111</td><td>155555555</td></tr></tbody>
</table>
</body>
<script>let students = [[1,'小狗',15],[2,'小王',17],[3,'小花',16]]const addRow = ()=>{for(let i=0;i<students.length;i++){//通过字符串拼好要添加的数据let content = `<tr><td>${students[i][1]}</td><td align="center">${students[i][2]}</td><td>${students[i][0]}</td></tr>`//追加 让浏览器去解析document.getElementById("mianData").innerHTML += content}
}
const delRow = ()=>{document.getElementById("myTable").deleteRow(document.getElementById("myTable").rows.length-1)
}</script>
</html>注意:
使用innerHTML追加数据时的通用写法
//通过字符串拼好要添加的数据let content = `<tr><td>${students[i][1]}</td><td align="center">${students[i][2]}</td><td>${students[i][0]}</td></tr>`//追加 让浏览器去解析document.getElementById("mianData").innerHTML += content如果添加多条 去遍历需要添加的数据
for(let i=0;i<students.length;i++){//通过字符串拼好要添加的数据let content = `<tr><td>${students[i][1]}</td><td align="center">${students[i][2]}</td><td>${students[i][0]}</td></tr>`//追加 让浏览器去解析document.getElementById("mianData").innerHTML += content}2js中常用对象
1String 字符串对象
indexOf("231") 找字符索引位置lastIndexOf("23") 从后边找字符索引位置注意:if(myStr.indexOf("23")>=0){} 判断字符是否存在substring(2,4) 截取字符串 (起位,结束)substr(2,4) 截取字符串 (起位,长度)replace("要替换的","替换成的") 替换字符串toUpperCase() 转大写toLowerCase() 转小写忽略大小写时使用startsWith 判断是否以xxx开始endsWith 判断是否以xxx结束split("&") 把字符串转换成数组用作拆分有格式的字符串与数组互相转换
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>title</title>
</head>
<body></body>
<script>/*indexOf("231") 找字符索引位置lastIndexOf("23") 从后边找字符索引位置注意:if(myStr.indexOf("23")>=0){} 判断字符是否存在substring(2,4) 截取字符串 (起位,结束)substr(2,4) 截取字符串 (起位,长度)replace("要替换的","替换成的") 替换字符串toUpperCase() 转大写toLowerCase() 转小写忽略大小写时使用startsWith 判断是否以xxx开始endsWith 判断是否以xxx结束split("&") 把字符串转换成数组用作拆分有格式的字符串与数组互相转换*/let myStr = "1abc23abc.png";console.log(myStr.indexOf("231"));console.log(myStr.lastIndexOf("ab"));//判断指定字符串是否存在if(myStr.indexOf("23")>=0){console.log("存在");}console.log(myStr.substring(2,4));console.log(myStr.substr(2,4));console.log(myStr.replace("23","zzz"));console.log(myStr.toUpperCase().toLowerCase());let myStr2 = " abc23abc ";console.log(myStr2.trim());console.log(myStr.startsWith("abc"));console.log(myStr.endsWith(".jpg"));let myStr3 = "name=jaaaaaack&age=18";//把有格式的字符串转换成数组console.log( myStr3.split("&")[0].split("=")[1]);</script>
</html>2Math数学计算对象
注意:Math.random() 取值范围 [0-1)
需要指定区间的随机数 需要计算
扩大倍数多1倍 取整 0-xxx 向下取整 +-移动区间
<!DOCTYPE html> <html> <head><meta charset="UTF-8" /><title>title</title> </head> <body></body> <script>let myNum = -11.5;console.log(Math.floor(myNum));console.log(Math.ceil(myNum));console.log(Math.round(myNum));// 绝对值 计算两个数之间的差值console.log(Math.abs(myNum));//获得随机数 [0-1)console.log(Math.random());//0-10之间的随机数//扩大倍数多1倍 取整 0-xxx 向下取整 +-移动区间 console.log(parseInt(Math.random()*3)+3 );//3-5之间的随机数//-2 +2 </script> </html>
3Date对象
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>title</title>
</head>
<body></body>
<script>//1 获取日期//不传参 当前日期let nowDate = new Date();console.log(nowDate);//传参 指定日期//字符串 表示时期的常用格式 2020/02/01 11:11:11// 数字 1970-01-01 到现在的毫秒数 let nowDate2 = new Date("2020/02/01 11:11:11");console.log(nowDate2);let nowDate3 = new Date(1234443343443);console.log(nowDate3);//2 日期计算 间隔的时间 转成毫秒计算console.log(Math.abs(nowDate2.getTime() - nowDate3.getTime()) );//算出差值之后 再根据日期的特征 计算 天、时、分、秒、毫秒//3 日期的输出//nowDate2.toLocaleString() 2020/2/1 11:11:11 固定字符串格式console.log(nowDate2.toLocaleString());let fullYear = nowDate2.getFullYear();let month = nowDate2.getMonth() + 1;let date = nowDate2.getDate();//获得星期几 0-6 0星期天let week = nowDate2.getDay();let hour = nowDate2.getHours();let minute = nowDate2.getMinutes();let second = nowDate2.getSeconds();console.log(fullYear + "年" + month + "月" + date + "日" + "星期" + week + " " + hour + ":" + minute + ":" + second);
</script>
</html>页面中的时钟(每秒刷新)
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>title</title>
</head>
<body><h1 id="timePanel"></h1>
</body>
<script>setInterval(()=>{let nowDate = new Date()let year = nowDate.getFullYear()let month = nowDate.getMonth() + 1let day = nowDate.getDate()let week = nowDate.getDay()let hour = nowDate.getHours()let minute = nowDate.getMinutes()let second = nowDate.getSeconds()let weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']let DateStr = `${year}年${month}月${day}日 ${weekArr[week]} ${hour}:${minute}:${second}`document.getElementById('timePanel').innerHTML = DateStr},1000)</script>
</html>4Array数组对象
相当于java中没有泛型的list 可以以数组方式使用 还可以以链表形式使用
可以放任意类型 长度可变
* 数组定义* let myArr = [];* let myArr2 = new Array();* * 数组长度可变 数据类型不限
* join("-") 数组转字符串* myArr4.sort((a,b)=>{ 数组排序return a-b 升序(默认)return b-a 降序})push("a") 队尾添加元素 pop() 队尾删除unshift("a") 队头添加元素shift() 队头删除splice(起始索引,删除个数,可选参数 添加什么) 数组中间元素的删除和添加myArr4.forEach((d)=>{ 数组遍历 要注意类型 Arrayconsole.log(d);})Array.from(eles) 把类数组类型 HTMLcollection NodeList 转换成数组Array
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>title</title>
</head>
<body><ul id="myUl"><li>1</li><li>2</li><li>3</li><li>4</li></ul>
</body>
<script>/*** 数组定义* let myArr = [];* let myArr2 = new Array();* * 数组长度可变 数据类型不限* * join("-") 数组转字符串* myArr4.sort((a,b)=>{ 数组排序return a-b 升序(默认)return b-a 降序})push("a") 队尾添加元素 pop() 队尾删除unshift("a") 队头添加元素shift() 队头删除splice(起始索引,删除个数,可选参数 添加什么) 数组中间元素的删除和添加myArr4.forEach((d)=>{ 数组遍历 要注意类型 Arrayconsole.log(d);})Array.from(eles) 把类数组类型 HTMLcollection NodeList 转换成数组Array*/let myArr = [];let myArr2 = new Array();// console.log(myArr,myArr2);let myArr3 = [1,"a",true,new Date(),[1,2,3]];let myArr4 = [1,9,3,2,5];//console.log(myArr4.join("-").split("-"));console.log(myArr4.sort((a,b)=>{return b-a}));// myArr4.push("a");// myArr4.unshift("b");// myArr4.pop()// myArr4.pop()// myArr4.shift()myArr4.splice(2,1,"a","b");console.log(myArr4);myArr4.forEach((d)=>{console.log(d);})let eles = document.getElementById("myUl").childrenconsole.log(eles);// let newEles = Array.from(eles)// console.log(newEles);Array.from(eles).forEach((d)=>{console.log(d);d.style.color = "red"})</script>
</html>5.JSON对象(*)
HTTP+JSON数据 通用格式
JSON js对象标记(简化的自定义对象格式)
json是一种自定义对象的简化格式{"key":value, "key":value, "key":value}key 固定是字符串value 可以是任意类型1.字符串 "张三"2.数字 1233.布尔值 true/false4.对象 {} 5.数组 []6.函数 function(){}json属性操作方式
通过.属性操作对象属性写操作 对象.属性 = "张三"; 读操作 对象.属性扩展操作 对象.新属性 = "北京";注意:json操作属性的另一种方法对象["属性"]
json写法 和转换
json写法json标准写法 key带引号json简化写法 key不带引号json转换方法 与字符串互换JSON.stringify(student2) 把对象转换成json字符串 标准格式JSON.parse(student3) 把json字符串转换成对象 只支持标准格式let student2= {id:1,name:"lisi",age:18};let student3= {"id":1,"name":"lisi","age":18};//只有标准字符串可以转成json对象//console.log(JSON.parse(student3));//console.log(student3);//都转成标准字符串console.log(JSON.stringify(student2));console.log(JSON.stringify(student3));json用法
与后端做数据传递经常搭配数组一起使用 表示复杂的数据结构let classInfo ={"className":"1班","teacher":"罗翔","students":[{id:1,name:"张三1",age:18},{id:2,name:"张三2",age:20}]}
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>title</title>
</head>
<body></body>
<script>// JSON对象/*json是一种自定义对象的简化格式{"key":value, "key":value, "key":value}key 固定是字符串value 可以是任意类型1.字符串 "张三"2.数字 1233.布尔值 true/false4.对象 {} 5.数组 []6.函数 function(){}通过.属性操作对象属性写操作 对象.属性 = "张三"; 读操作 对象.属性扩展操作 对象.新属性 = "北京";json写法json标准写法 key带引号json简化写法 key不带引号json转换方法 与字符串互换JSON.stringify(student2) 把对象转换成json字符串 标准格式JSON.parse(student3) 把json字符串转换成对象 只支持标准格式json用法与后端做数据传递经常搭配数组一起使用 表示复杂的数据结构let classInfo ={"className":"1班","teacher":"罗翔","students":[{id:1,name:"张三1",age:18},{id:2,name:"张三2",age:20}]} 注意:json操作属性的另一种方法classInfo["属性名"] */ let student = {"id": 1, "name":"zhangsan", "age":18,read(){console.log("正在阅读...");}};console.log(student.name);student.name = "张三";console.log(student);student.address = "北京";console.log(student);student.read();let student2= {id:1,name:"lisi",age:18};let student3= {"id":1,"name":"lisi","age":18};//console.log(JSON.parse(student3));//console.log(student3);console.log(JSON.stringify(student2));console.log(JSON.stringify(student3));//学生数组let students=[{id:1,name:"lisi",age:18},{id:2,name:"wangwu",age:20}] console.log(students[1].name);//班级信息let classInfo ={"className":"1班","teacher":"罗翔","students":[{id:1,name:"张三1",age:18},{id:2,name:"张三2",age:20}]} console.log(classInfo.students[1].name);console.log(classInfo["className"]);</script>
</html>