24.11.13 Javascript3

Javascript3

1.dom元素获取

查找元素的函数     getElementById("id值")                      查找到唯一一个元素getElementsByClassName("class值")           查找指定class的元素数组getElementsByTagName("标签名")               查找指定标签名的元素document.getElementById("myDiv").getElementsByTagName("input")    在元素内部查找指定元素document.getElementById("myDiv").getElementsByClassName("mycls")  在元素内部查找指定元素

查找元素的属性dom树中 根据节点关系查找子节点children           所有子节点(集合)firstElementChild  元素lastElementChild   元素兄弟(同级)节点nextElementSibling  下一个兄弟(同级)节点previousElementSibling 上一个兄弟(同级)节点父节点parentElement      父元素节点

示例:

console.log(document.getElementById("myUl").children);//元素集合   HTMLCollectionconsole.log(document.getElementById("myUl").childNodes);//节点集合 NodeList 不要用console.log(document.getElementById("myUl").getElementsByTagName("li"));console.log(document.getElementById("myUl").firstChild);//节点 如果有空白文本 会获得文本console.log(document.getElementById("myUl").firstElementChild);//元素节点console.log(document.getElementById("myUl").lastElementChild);//元素节点console.log(document.getElementById("myli").nextElementSibling.nextElementSibling.previousElementSibling.previousElementSibling.previousElementSibling);console.log(document.getElementById("myli").parentElement.parentElement)

js操作时需要先获取元素

以上有丰富的api来查找元素使用

2.dom操作属性

js中属性操作属性形式操作属性读属性元素.属性写属性元素.属性 = "xxx"函数形式操作属性Attribute  属性 Properties 属性读属性getAttribute("属性名")写属性setAttribute("属性名","属性值")两套不完全体通用 (js语法特点)

document.getElementById("myText").value = "你好"document.getElementById("myText").setAttribute("val"+"ue","你不好");

所有的效果都是找元素改属性

3.动态dom操作

原生js动态操作(了解)

创建元素(不会出现在dom树上  虚拟dom元素 支持属性设置)document.createElement("li")
//元素表示document.getElementById("xxx")追加子元素(可以把元素渲染出来 挂在dom树上)元素.appendChild(newEle)在指定元素前添加元素.insertBefore(newEle,指定的元素)复制节点元素.cloneNode(true)  bol值决定子节点是否赋值 默认值false删除元素元素.removeChild(删除的节点); //通常搭配查找元素使用

创建元素

两个步骤 1.生成出元素(虚拟dom结构可以设置属性页面上没有)

2.渲染(通过特定api 把元素显示到页面中的某个为止挂载到dom树上)

function addEle(){//js创建元素//先生成虚拟dom结构//可以设置其中各种属性let newEle = document.createElement("li");//简化dom操作//innerHTML可以解析html标签newEle.innerHTML ="<input type='button' value='test'/>";//可以解析html标签//    let newBtn = document.createElement("input");//    newBtn.type="button";//    newBtn.value = "新按钮";//    newEle.appendChild(newBtn)//渲染document.getElementById("myUl").appendChild(newEle);//document.getElementById("myUl").lastElementChild.innerHTML = "nexLi";}

删除元素

function delEle(){document.getElementById("myUl").removeChild(document.getElementById("myUl").firstElementChild);}

简化dom操作(***)

//innerHTML可以解析html标签

1.追加 和替换 可以借助innerHTML可以解析html标签的特征完成
2.删除 用原生api实现

<!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><input type="button" value="添加元素" onclick="addEle()"><input type="button" value="删除元素" onclick="delEle()"><ul id="myUl"><li id="myLi"><input type="button" value="测试按钮"></li></ul>
</body>
<script>/*1.追加 和替换 可以借助innerHTML可以解析html标签的特征完成2.删除 用原生api实现*/function addEle(){let content = `<li><input type="button" value="新按钮"></li>`document.getElementById("myUl").innerHTML += content}function delEle(){document.getElementById("myUl").removeChild(document.getElementById("myUl").lastElementChild);}</script>
</html>

4.动态table操作

js中会table描述为数组(了解)

通过索引添加删除

同样可以使用简化操作

<!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><input type="button" value="添加一行数据" onclick="addRow()"><input type="button" value="添加一行数据" onclick="addRow2()"><input type="button" value="删除一行数据" onclick="deleteOneRow()"><table id="myTable" border="1"><tr><th>编号</th><th>名称</th><th>住址</th></tr><tr><td>1</td><td>尼古拉斯赵四</td><td>象牙山</td></tr></table>
</body>
<script>let stuData = [[1,"小明","封样大道"],[2,"小明2","封样大道2"],[3,"小明3","封样大道3"]]//insertRow 用于在表格里插入一行数据,(参数)是插入的位置 从0开始//insertCell(0)用于在表格插入表格，参数是表格的索引 从0开始function addRow(){let newRow = document.getElementById("myTable").insertRow(1)let td1 = newRow.insertCell(0)let td2 = newRow.insertCell(1)let td3 = newRow.insertCell(2)td1.innerHTML="2"td2.innerHTML="2"td3.innerHTML="2"}function addRow2(){for(let obj of stuData){//拼号要生成的元素let content = `<tr><td>${obj[0]}</td><td>${obj[1]}</td><td>${obj[2]}</td></tr>`//把元素添加到页面中                document.getElementById("myTable").innerHTML += content}}function deleteOneRow(){document.getElementById("myTable").deleteRow(1)}</script>
</html>

5String字符串对象

js中字符串   ''  ""   ``js中处理字符串更多

查找指定字符串出现的索引位置
indexOf 
lastIndexOf 更多用在检测字符串是否存在
if(myStr.lastIndexOf("bc1111")>=0)

截取字符串substring(起)    substring(起,止)  
substr(起)       substr(起,个数)

分割字符串  根据指定的字符分割为数组let myStr2 = "age=15;name=jack;addr=streetABC";
console.log(myStr2.split(";")[1].split("=")[1]);
得到name的值部分jack

转大写 toUpperCaseconsole.log(myStr.toUpperCase());转小写 toLowerCaseconsole.log(myStr.toLowerCase());

替换字符串
let myStr = "abc123abcdef";
console.log(myStr.replace("123","你好"))结果为 "abc你好abcdef";

<!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></body>
<script>/*js中字符串   ''  ""   ``js中处理字符串更多*/let myStr = "abc123abcdef";// indexOf lastIndexOf //表示指定字符串存在//if(myStr.lastIndexOf("bc1111")>=0) // console.log(myStr.lastIndexOf("bc1111"));//  substring(起)    substring(起,止)  //  substr(起)       substr(起,个数)  console.log(myStr.substring(2,4));console.log(myStr.substr(2,4));//分割字符串  根据指定的字符分割为数组//常用在有格式的字符串解析上let myStr2 = "age=15;name=jack;addr=streetABC";console.log(myStr2.split(";")[1].split("=")[1]);//转大写 toUpperCaseconsole.log(myStr.toUpperCase());//转小写 toLowerCaseconsole.log(myStr.toLowerCase());//字符替换console.log(myStr.replace("123","你好"))</script>
</html>

6数学计算对象

let myNum = 10.5;//向上取整 ceilconsole.log(Math.ceil(myNum));//向下取整 floorconsole.log(Math.floor(myNum));//四舍五入 roundconsole.log(Math.round(myNum));//绝对值 算两个数之间的差值let a = 1;let b = 3;console.log(Math.abs(a-b));//随机数 random [0,1)//  0-2 +1   1-3console.log(parseInt(Math.random()*3));//向上 1-10  向下 0-9   四舍五入 0-10//一般用向下取整 //比最终要的值大1//扩倍 移动区间

注意:js中随机数需要手动计算通过取整扩倍移动区间得到需要的随机数

7日期对象

1日期获取

//获取当前运行的事件console.log(new Date());
//获取指定日期的事件
// 2001-11-11 11:11:11
// 2021/12/12 12:12:12     
console.log(new Date('2001-11-12 11:11:11'));
console.log(new Date('2021/12/12 12:12:12'));

2日期计算

// 做日期计算
let nowDate = new Date();
console.log(new Date(nowDate.getTime()-1000*60*60*24*5) );

3日期显示

//获取年
let myYear = nowDate.getFullYear();
console.log(myYear);
//获取月 0-11
let myMonth = nowDate.getMonth()+1;
console.log(myMonth);
//获取星期
let myDay = nowDate.getDay();
//获取日期
let myDate = nowDate.getDate();
console.log(myDay);//日期当中的日
console.log(myDate);//这周星期几//获取时
let myHours = nowDate.getHours()
console.log(myHours);
//获取分
let myMinutes = nowDate.getMinutes()
console.log(myMinutes);
//获取秒
let mySeconds = nowDate.getSeconds()
console.log(mySeconds);let dateStr = `${myYear}年${myMonth}月${myDate}日 ${myHours}:${myMinutes}:${mySeconds} 星期${myDay}`;
console.log(dateStr);

8数组对象

数组  数据的集合 1.指定数据类型2.指定数组长度(不可变)底层数据结构(需要再内存中直接占用空间)js弱类型js数组 没有加泛型的list不需要指明数据类型长度可变

//1.数组创建

let newArr = new Array();console.log(newArr);let newArr2 = [];console.log(newArr2);

//2.数组中的内容

//js中数组什么都可以放let newArr3 = [1,"abc",true,new Date(),[1,2,3]];console.log(newArr3);//实际使用时 一般把相同数据类型的数据放入一个数组let newArr4 = [4,1,3,8,6,2];console.log(newArr4);

//3.数组常用方法

//join 把数组串成字符串//经常与字符串的split方法对应起来 字符串 与 数组 互换console.log(newArr4.join(";"));console.log(newArr4.join(";").split(";"));//排序  排序规则  function(a,b){return a-b} a-b 升序 b-a降序console.log(newArr4.sort(function(a,b){return a-b}));//当链表使用/*newArr4.push("a")     队尾添加newArr4.pop()         队尾删除newArr4.unshift("a")  队头添加newArr4.shift()       队头删除*/newArr4.push("a")newArr4.pop()newArr4.unshift("a")newArr4.shift()console.log(newArr4);//splice()动态操作数组元素方法//splice(起始,个数,可以选参数)// 如果没有可选参数 可以做删除// 如果有可选参数   做替换 根据个数 与可选参数的个数 决定增加还是减少newArr4.splice(2,1,"a","b")

//4数组遍历 //Array可对元素属性进行调整

newArr4.forEach(function(data){console.log(data);})注意:如果是从页面获取元素 要用forEach遍历 需要转换类型//获取元素集合  Prototype HTMLCollectionlet eles = document.getElementById("btns").children;//Prototype  Array 包含的函数和属性不同//Array.from(eles);//把非Array的数组类型 转成Array 可以调用array的函数了let newEles = Array.from(eles);console.log(newEles);//转换后 可以forEach遍历newEles.forEach(function(data){data.style.color="red"})

9JSON对象

JSON javascript对象标记

//JSON格式//{key:value,key:value}//像map 做自定义对象的let myStu = {"ID":1,"name":"jack","age":15};console.log(myStu.name);myStu.name = "rose";console.log(myStu);json可以方便的 定义 读取 赋值 扩展

//数据类型//key     字符串//value   任意类型let myObj = {"name":"jack","age":15,"birthDay":new Date(),"study":function(){//this 指向当前json对象console.log(this);console.log(this.name+"在学习");}};console.log(myObj);myObj.study()

//json书写格式//标准格式 key带引号 指明是字符串  {"ID":1,"name":"jack2","age":18};//简化格式 key的引号 可以省略不写  {ID:1,name:"jack",age:15};let newStu = {ID:1,name:"jack",age:15};console.log(newStu);//前后端数据传递 使用标准json格式//纯前端使用     使用简化格式// let newStuStr = '{ID:1,name:"jack",age:15}'// console.log(JSON.parse(newStuStr).name);//json转换方法//JSON.stringify(newStu)                          json对象转标准格式字符串//JSON.parse('{"ID":1,"name":"jack2","age":18}')  标准格式字符串 转json对象console.log(JSON.stringify(newStu));console.log(JSON.parse('{"ID":1,"name":"jack2","age":18}'));

//json实际使用时 经常搭配数组使用let students = [{ID:2,name:"jack",age:15},{ID:2,name:"jack2",age:15},{ID:3,name:"jack3",age:15}]let myClass = {className:922,classAddr:'9楼922',students:[{ID:2,name:"jack",age:15},{ID:2,name:"jack2",age:15},{ID:3,name:"jack3",age:15}]}

省市县级联练习

<!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><!-- 级联菜单子级数据 根据父级数据动态生成 --><select id="provSelect" onchange="changeCityList()"><option>---------请选择------------</option></select>省<select id="citySelect" onchange="changeCounty()"><option>---------请选择------------</option></select>市<select id="countySelect"><option>---------请选择------------</option></select>县/区
</body>
<script src="./js/myData.js"></script>
<script>/*1.元素动态生成  替换2.练习json使用*/console.log(areaData);let currentCityList = [];//1填充省数据areaData.forEach(function(prov){//拼元素let content = `<option value="${prov.code}" >${prov.name}</option>`;//console.log(content);//追加元素document.getElementById("provSelect").innerHTML+=content})//2省市联动//省选择之后 找到省对应的市列表 拼到市的select中function changeCityList(){//当前选中的省编号let currentProv =  document.getElementById("provSelect").valueconsole.log(currentProv);//清理选项 从请选择开始//清市列表document.getElementById("citySelect").innerHTML="<option>---------请选择------------</option>"//清县区列表document.getElementById("countySelect").innerHTML = "<option>---------请选择------------</option>"areaData.forEach(function(prov){if(currentProv == prov.code){//找到省了 读取市列表//console.log(prov.city);//保留当前市列表currentCityList = prov.city;//把city列表 写入到citySelect中prov.city.forEach(function(city){//拼元素let content = `<option value="${city.code}">${city.name}</option>`;//追加元素document.getElementById("citySelect").innerHTML+=content})}})}function changeCounty(){//当前选中的市编号let currentCity =  document.getElementById("citySelect").valueconsole.log(currentCity);//选项从头开始document.getElementById("countySelect").innerHTML = "<option>---------请选择------------</option>"//根据暂存的市列表 找到当前的市信息 currentCityList.forEach(function(city){if(city.code == currentCity){//找到市中的县区//console.log(city.area);city.area.forEach(function(county){//拼元素let content = `<option value="${county.code}">${county.name}</option>`;document.getElementById("countySelect").innerHTML+=content;})}})}</script>
</html>