Javascript

1.js介绍

JavaScript（简称js）是⼀种描述语⾔，基于对象和事件驱动的脚本语⾔
JavaScript特点:

脚本语⾔（⼀种轻量级的编程语⾔）
⼀种解释性语⾔（⽆需预编译）
被设计为向HTML⻚⾯添加交互⾏为
运⾏于客户端（浏览器)

注意:js是多种语言语法组合而成所以形成了自己的独特语法

2.js组成

![Snipaste_2024-11-11_09-53-34](https://www.neet0316.com/wp-content/uploads/2025/12/Snipaste_2024-11-11_09-53-34.png

ECMAScript (简称为ES) ,由ECMA组织定期维护更新.ES6之后添加了很多实用的新语法结构.

DOM (文档对象模型). js中把hmtl文档描述为DOM树,通过js对文档中的元素和属性进行修改,从而达到动态的效果.是js交互效果非常重要的部分

BOM(浏览器对象模型).通过JS对浏览器本身的功能进行操作例如刷新页面,控制历史记录,打开关闭窗口等

3.js引入方式

在html中编写js的方式:

js引入方式
1.使用script标签 编写js代码                                       调试代码使用
<script>
    // script 脚本
    console.log("hello javascript!!!!!")
</script>

2.使用script标签带src属性 引入js文件                               上线使用
<script src="/js/myjs.js"> 这里写代码无效 </script>

注意 如果script标签带src属性 则标签体无效

3.在元素上直接编写js代码  特例javascript:void(0) 禁止元素默认行为    用不到
了解即可

注意:

html文档是从上到下加载运行

4.js变量规则

变量  声明
js变量是弱类型
 声明不需要指明变量类型  赋值时 根据值的类型来决定类型
 使用统一的关键字来声明
 var       老的变量关键字
 let       新的变量关键字
 const     新的常量关键字

变量名   
 使用多单词+驼峰
 不要与关键字保留字冲突 

 示例:
let myStr;

5.js数据类型

js设计的初衷是容易上手(好学)(易学难精)

1 数字类型 number 整型浮点型

let myNum = 10;
let myNum = 10.1;
console.log(myNum);
console.log(typeof myNum);

2 布尔型 boolean true/false

let myBol = true;
console.log(myNum);
console.log(typeof myNum);

let myBol = false;
console.log(myBol);
console.log(typeof myBol);

3 字符串 string ” “” 都是字符串

“ 模板字符串通过${变量} 可以拼接变量

let myStr = 'a'
let myStr = "a"
let myStr = `a`

拼接:
let tempNum = 10;
//let myStr = 'a'+tempNum+'a';
//模板字符串 通过${变量} 可以拼接变量
let myStr =`a${tempNum}a`;

4 未定义 undefined 未定义 /未初始化(未赋值)

如果是未赋值值是undefined 类型是undefined

如果是未定义(没有声明直接使用)

会报错类型是undefined

let myVal;

console.log(myVal);
console.log(typeof myVal);

不定义直接用
console.log(myVal);        报错
console.log(typeof myVal); 打印类型 undefined

5 Object 其他各种对象都属于object

let myDate = new Date();
console.log(myDate);
console.log(typeof myDate);

let myArr = [1,2,3];
console.log(myArr);
console.log(typeof myArr);

6 function 函数函数对象

let myFun = function(){
    console.log(1111);
}

myFun()

console.log(typeof myFun);

6.数据类型转化

注意: 从页面取出来数据都是字符串类型

let textVal = document.getElementById(“mySpan”).innerHTML;

console.log(textVal);

所以js中需要数据计算时经常使用类型转换

1.主动类型转换函数

parseInt   转整型数据

    let myStr = '110';
    let newNum = parseInt(myStr);
    console.log(typeof newNum);

注意:
    let myStr = 'A110';
    let newNum = parseInt(myStr);
    转完得到结果NaN(not a number) 数字类型的特殊值 不是数字

parseFloat 转浮点数据

    let myStr = '110.1';
    let newNum = parseFloat(myStr);
    console.log(typeof newNum);

注意:
    let myStr = 'A110.1';
    let newNum = parseFloat(myStr);
    转完得到结果NaN(not a number) 数字类型的特殊值 不是数字

2.内置类型转换(了解)

    //内置类型转换
    //可以转成数字的字符串  与   数字之间     等同的
    //bol值 true/false    与   数字之间1/0  等同的
    //为了保险 尽量少用内置类型转换

    let tempStr = '10';
    let tempNum = 10;
    console.log(tempStr == tempNum);

    let tempBol = false;
    let tempNum2 = 0;
    console.log(tempBol == tempNum2);
    console.log(!0);//true的简化写法

js代码经常需要做代码压缩代码压缩时会出现简化写法

代码压缩通过特定工具完成不需要编码时自己写

7.运算符

   /*算数运算符   + 加法运算  拼接字符串
                  - 减法运算
                  * 乘法运算
                  / 除法运算  Infinity(无限)   NaN 不是数字
                  % 取模运算 
                  ++  自增
                  --  自减 

       赋值运算符  +=        数字加 或 字符串拼接
                  -=        运算完赋值
                  *=
                  /=
                  %=

       比较运算符  ===      比较值 和 类型 有一个不同返回false
                  ==       比较值
                           因为js有内置类型转换

        逻辑运算符 &&       有一个是false 总结果是fasle
                  ||       有一个是true  总结果是true
                  !        bol值取反

     */

注意:

js中number计算非常容易丢精度 toFixed(位数) 保留指定位数
示例:
let myNum =0.1+0.2;
console.log(parseFloat(myNum.toFixed(1)) +0.1);
             转数字        保留位数

    let myNum =0.1+0.2;
    console.log(parseFloat(myNum.toFixed(1)) +0.1);
    let myNum2 = 1;
     myNum2 +='1';
     console.log(myNum2);

     let num1 = 1;
     let num2 = 2;
     console.log(num1!=num2);

    let tempStr = '10';
    let tempNum = 10;
    console.log(tempStr == tempNum);   //true
    console.log(tempStr === tempNum);  //false

8.条件循环语句

条件语句:

if 结构体 (通用性强) 范围条件判断精确条件判断

    if(bol值)   单分支

    if(bol值)   双分支
    else

    if(bol值)            多分支
    else if(myScore<80)
    else

示例:

    let myScore = 96;
    if(myScore<60){
        console.log("去跟壮汉小gege吃饭....");
    }else if(myScore<80){
        console.log("去跟小(姐姐)吃饭吃饭....");
    }else{
        console.log("去跟乔碧萝...吃饭吃饭....");
    }

switch 结构体

精确判断条件

多分支时语法结构更清晰

 switch(myScore){
        case 'A': console.log("ps5 pro!!");break;
        case 'B': console.log("华为手机");break;
        case 'C': console.log("红米手机");break;
        case 'D': console.log("发一个肥皂");break;
        default:console.log("律师函警告");

    }

    let myScore = 'SSR';
    switch(myScore){
        case 'A': console.log("ps5 pro!!");break;
        case 'B': console.log("华为手机");break;
        case 'C': console.log("红米手机");break;
        case 'D': console.log("发一个肥皂");break;
        default:console.log("律师函警告");

    }

循环语句:

for 结构体 (一般用在已知次数的循环)

    基础for循环
    for(let i = 0; i < 10; i++){
        console.log(i);
    }
    其他for结构体
    for...in  
    for(let x in myArr){   x是索引
        console.log(myArr[x]);
    }
    for...of               x是遍历的数据
    for(let x of myArr){
        console.log(x);
    }

示例:

    for(let i = 0; i < 10; i++){
        console.log(i);
    }
    //console.log(i);

    let myArr = ['a','b','c']
    // for(let i = 0; i < myArr.length; i++){
    //     console.log(myArr[i]);
    // }

    for(let x in myArr){
        console.log(myArr[x]);
    }

    for(let x of myArr){
        console.log(x);
    }

while结构体 (用在未知次数的循环上)

    let bol = true;
    while(bol){
        //dosomething.....
        //if(xxx) 结束循环 bol = false
    }

示例:

输出乘法口诀表到页面

document.write("<table border='1'>")
for(let x = 1;x<=9;x++){
    document.write("
<tr>")
    for(let y = 1;y<=x;y++){
        document.write("
<td>")
        document.write(`${y}x${x}=${x*y}`)
        document.write("</td>")
    }
    document.write("</tr>")
}
document.write("</table>&quot;)

9.函数

系统函数

    parseInt    转整型
    parseFloat  转浮点型
    isNaN      !isNaN(&quot;10&quot;) 检测是否纯数字
    eval       把字符串转成算式并计算

    // console.log(!isNaN(&quot;10&quot;));
    // console.log(eval(&apos;2+3/0&apos;));

自定义函数

自己封装函数给自己使用

两种函数格式:

1声明式函数

    声明式函数对象:
    function 函数名(参数列表 ...){
        doSomething.......
        //如果需要返回值 直接加return
        return 返回的数据;
    }

     function myFun(num1,num2){
    //     //debugger
    //    // console.log(num1+num2);
         let newNum = num1+num2;
        return newNum;
     }
    myFun(1,2)
结果是3

2匿名函数

    匿名函数定义:
    let 变量名(函数名) = function(参数列表...){
        //console.log(a+b);
        return a+b
    }

    let myFun = function(a,b){
        //console.log(a+b);
        return a+b
    }
    myFun(1,2)
    结果是3

变量作用域:

    变量作用域
    全局变量  整个页面都可以使用 可以在多个函数内共享
    局部变量  函数内可以使用
             函数内如果没声明直接使用的变量 会被js解析器补全为全局变量(不要用这个特性)

注意点:

1.js中如果函数名重复会发生覆盖(注意函数名不要重复不要跟变量重复)

2.实参与形参可以不对应执行结果与预期会不符(使用时形参与实参个数对应)

打断点(慢慢习惯) 沉下心仔细看代码:

debugger; 如果触发代码时会进断点

F11 一行一行看

F8 跳过断点

![image-20241111155910492](https://www.neet0316.com/wp-content/uploads/2025/12/image-20241111155910492.png

10.事件

js中触发函数的机制定义出了用户交互的常用事件来触发自定义函数

1.元素事件函数之间的关系

<!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="myTest()">
</body><script>
    /*
    html元素  --- >  事件   --- >  函数  

    <input type="button" value="点我" onclick="myTest()">
    function myTest(){
        console.log("运行了......");
    }

    */ 

    function myTest(){
        console.log("运行了......");

    }

</script>
</html>

2.js中常用事件

onclick 点击事件鼠标点击

注意:

编写js交互效果的流程(套路)

    考虑流程
    1 在哪个元素上 加 哪个事件  触发哪个函数

    DOM中的内容
    2.获取哪个元素  操作哪个属性 属性改成什么值

    获取元素
    doucument.getElementById("id值")  可以获取页面中所有元素 需要搭配ID使用

    操作属性
     元素.属性  DOM通用操作
     写操作  元素.属性 = xxxx
     读操作  元素.属性
     html元素的属性都可以操作
    常用属性: 属性值 参考属性本身的规则
     value  表单元素的值
     type   表单元素类型
     id     元素id
     style  style中还有其他的子样式 参考css
            color 文字颜色         
            backgroundColor 背景颜色 
     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>

<style>
        .mycls{
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }

    </style>
</head>
<body>
    <input id="myText" type="text" value="拜登" >
    <input type="button" value="换总统" onclick="changeP(this)" >
    <hr/>
    <div id="mydiv" class="mycls"></div>
    <input type="button" value="换颜色" onclick="changeColor()" >
    <hr/>
    <h1 id="myTitle">总统选举进行中........</h1>
    <input type="button" value="选举结束" onclick="changeTitle()">
</body><script>

    function changeP(myOjb){

        console.log(myOjb);

        console.log(1111);
       let myEle = document.getElementById("myText");
       myEle.value = "特朗普";
       myEle.type = "button";

       console.log( myEle.id);

    }

    function changeColor(){
       let myDiv = document.getElementById("mydiv");
       console.log(myDiv);
       myDiv.style.backgroundColor = "#FF0000"

    }

    function changeTitle(){
        console.log(111);
        let myTitle =  document.getElementById("myTitle");
        console.log(myTitle);

        myTitle.innerHTML = "biubiubiu.....特朗普...."
    }

</script>
</html>

onmouseover 鼠标移入

onmouserout 鼠标移出

    js中 经常有效果切换的场景(执行的代码相同 赋值不同)

    函数中加上形参
    调用时 传入实参 onmouseover="changeBGC('green')" 
    实参数据类型
    如果是字符串 'green'
    如果是数字    123
    如果是bol值   true

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>
        .mycls{
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }

    </style>
</head>
<body>
    <!-- <div id="myDiv" class="mycls" onmouseover="changeBGC('green')" onmouseout="changeBGC('white')" ></div> -->
    <div class="mycls" onmouseover="changeBGC('green',this)" onmouseout="changeBGC('white',this)" ></div>
</body><script>

    function changeBGC(currentColor,myObj){
        //console.log(document.getElementById("myDiv"));
        console.log(currentColor,myObj);

        myObj.style.backgroundColor = currentColor;
    }

    // function changeBGC(currentColor){
    //     //console.log(document.getElementById("myDiv"));
    //     console.log(currentColor);

    //     document.getElementById("myDiv").style.backgroundColor = currentColor;
    // }

    // function changeBGC2(){
    //     //console.log(document.getElementById("myDiv"));

    //     document.getElementById("myDiv").style.backgroundColor = "white";
    // }
    //changeBGC("green")

</script>
</html>

onfocus 获得焦点

onblur 失去焦点

焦点事件主要用在表单元素上

输入框同一时间只有一个框获得输入提示符获得输入提示符的叫获得焦点

通常用鼠标触发也可以被tab键触发

示例:

<!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="text"  onfocus="changeTextColor('blue',this)" onblur="changeTextColor('black',this)"><br>
    <input type="text"  onfocus="changeTextColor('blue',this)" onblur="changeTextColor('black',this)"><br>
    <input type="text"  onfocus="changeTextColor('blue',this)" onblur="changeTextColor('black',this)"><br>
</body><script>
    /* 焦点事件 主要用在表单元素上
        输入框 同一时间  只有一个框获得输入提示符 获得输入提示符的叫获得焦点

       onfocus  获得焦点
       onblur   失去焦点

       函数合并
       通过this 让多个元素复用函数

    */

    function changeTextColor(myColor,myObj){
        myObj.style.color = myColor;
    }

</script>
</html>

注意:

实参传this

可以表示当前发生事件的元素

    如果修改的元素 与触发的元素是同一个 (了解)
    此时可以传this this发生事件的元素
    实参传this  表示的是发生事件的元素

11.window对象

window对象,表示当前窗口

this默认指向当前窗口

window对象中包含其他对象,调用时不需要指明window

注意:

alert()

prompt()

confirm()

这些函数会阻止js解析器(js解析器执行引擎读取运行js) 执行不要使用

12.history对象

历史记录对象

对应浏览器前进后退按钮

![image-20241112153526716](https://www.neet0316.com/wp-content/uploads/2025/12/image-20241112153526716.png

    history 在历史记录里 
        back        前进  
        forward     后退
        go          0当前文档  负数 后退n个文档  正数 前进n个文档

<!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="myBack()"> 
    当前页面
    <input type="button" value="前进" onclick="myForward()">
    <input type="button" value="历史移动" onclick="myGo()">
</body><script>
    /*
    history 在历史记录里 
        back        前进  
        forward     后退
        go          0当前文档  负数 后退n个文档  正数 前进n个文档
    */

    function myBack(){
        //退回上一个浏览器的页面
        history.back()
    }

    function myForward(){
        history.forward()
    }

    function myGo(){
        history.go(1);
    }

</script>
</html>

13.location对象

    location 浏览器地址
        href属性 浏览器地址栏
                 可以使用三种路径
                 做页面跳转

    location.reload()  刷新当前页面

浏览器地址栏可以控制浏览器跳转(意义重大)

前端跳转方式:

    <!-- 页面跳转的方式:
         1.a标签 
         2.表单提交
         3.location.href
           可以使用任意元素做跳转
    -->

示例:

<!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>
    <!-- 页面跳转的方式:
         1.a标签 
         2.表单提交
         3.location.href
           可以使用任意元素做跳转
    -->

    <input type="button" value="跳转页面" onclick="changePage()">
    <input type="button" value="刷新页面" onclick="reFreshPage()">
</body><script>
    /*
    location 浏览器地址
        href属性 浏览器地址栏
                 可以使用三种路径
                 做页面跳转

    location.reload()  刷新当前页面

    */

    function changePage(){
        //三种路径
        /*
         1.相对路径
         location.href = "1内容改变事件.html"
         2.相对根路径   
         location.href = "/day4_javascript2/1内容改变事件.html"
         3.绝对路径
         location.href = "https://www.baidu.com"
        */
        location.href = "https://www.baidu.com"
    }

    function reFreshPage(){
        location.reload();
    }

</script>
</html>

14.document对象

document 当前页面的html文档

![image-20241112153819770](https://www.neet0316.com/wp-content/uploads/2025/12/image-20241112153819770.png

获取元素的常用方法

    getElementById(&quot;id值&quot;)                      查找到唯一一个元素
    getElementsByClassName(&quot;class值&quot;)           查找指定class的元素数组
    getElementsByTagName(&quot;标签名&quot;)               查找指定标签名的元素

![image-20241112153914076](https://www.neet0316.com/wp-content/uploads/2025/12/image-20241112153914076.png

获取元素的组合使用


<div>
        <input id="myText" type="text" value="aaa">
        <input class="mycls" type="text" value="aaa">
        <input class="mycls" type="text" value="aaa">
    </div>
    <div id="myDiv">
        <input id="myText" type="text" value="aaa">
        <input class="mycls" type="text" value="aaa">
        <input class="mycls" type="text" value="aaa">
    </div>

查找第二组元素中的input标签
 document.getElementById("myDiv").getElementsByTagName("input")    在元素内部查找指定元素
查找第二组元素中class值是mycls的元素
 document.getElementById("myDiv").getElementsByClassName("mycls")  在元素内部查找指定元素

遍历数组元素的常用方式

基础for循环(标准有索引有元素)

    for(let i = 0; i<eles.length;i++){
        eles[i].style.color ="red";
    }

for in 循环

    for(let x in eles){
       // 排除掉元素之外的数据
        if(eles[x].style!=undefined){
            eles[x].style.color ="red";
        }
    }

for of 循环(语法最简单没有索引)

    for(let x of eles){
        console.log(x);
        x.style.color ="red";
    }

注意点:

1.在js中 class属性 —> className

2.js中如果调用元素属性不存在得到的是undefined

如果获取元素查找不到得到的是null

15.打开关闭窗口

通过open close 可以打开关闭窗口(了解)

<!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="myOpen()">
    <input type="button" value="关闭窗口" onclick="myClose()">
</body><script>
    //全局变量
    //通过全局变量 在多个函数间共享变量
    let newWin

    function myOpen(){
        //开广告常用
       newWin = open("http://www.baidu.com");
    }

    function myClose(){
        newWin.close();
    }

</script>
</html>

16.定时函数

定时函数函数的执行器

 定时反复执行
        setInterval(执行的函数,间隔的毫秒数)
        clearInterval(taskId) taskId任务编号

 延时执行
        setTimeout(执行的函数,间隔的毫秒数)
        clearTimeout(taskId) taskId任务编号

传入函数三种写法

        传入函数方式
        1. setInterval("myTest()",1000)    "myTest()" 有引号和括号
        2. setInterval(myTest,1000)        myTest     直接函数名 不能加括号 否则会立即执行
        3. setInterval(function(){         传入匿名函数 通过匿名函数指定要执行的代码
                    console.log(22222);
                },1000)

示例:

    //开启定时函数
    let taskId = setInterval(function(){
         console.log(22222);
     },1000)
    //通过任务编号 停止定时
    function stopInterval(){
         clearInterval(taskId)

    }

<!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="startInterval(this)">
    <input type="button" value="停止定时" onclick="stopInterval()">
</body><script>
    /*
    定时函数  函数的执行器

        页面中 定时可以开启多个

        定时反复执行
        setInterval(执行的函数,间隔的毫秒数)
        clearInterval(taskId) taskId任务编号

        延时执行
        setTimeout(执行的函数,间隔的毫秒数)
        clearTimeout(taskId) taskId任务编号

        传入函数方式
        1. setInterval("myTest()",1000)    "myTest()" 有引号和括号
        2. setInterval(myTest,1000)        myTest     直接函数名 不能加括号 否则会立即执行
        3. setInterval(function(){         传入匿名函数 通过匿名函数指定要执行的代码
                    console.log(22222);
                },1000)

    */
    let taskId;
    function startInterval(myObj){
        //js执行 指令式js 执行一行 页面渲染一行
        myObj.disabled = true
        //if(taskId == undefined){
            taskId =  setInterval(function(){
                console.log(1);
            },1000)
       // }

    }

    function stopInterval(){
        clearInterval(taskId)

    }

    // function myTest(){
    //     console.log(11111);

    // }
    //开启定时函数
    // let taskId = setInterval(function(){
    //     console.log(22222);
    // },1000)

    // function stopInterval(){
    //     //clearInterval(taskId)
    //     clearTimeout(taskId);
    // }

    // let taskId = setTimeout(function(){
    //     console.log("你好");
    // },1000)

</script>
</html>

17.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);//元素集合   HTMLCollection
    console.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来查找元素使用

18.dom操作属性

    js中属性操作

    属性形式操作属性
    读属性
    元素.属性
    写属性
    元素.属性 = "xxx"

    函数形式操作属性
    Attribute  属性 
    Properties 属性
    读属性
    getAttribute("属性名")
    写属性
    setAttribute("属性名","属性值")

    两套不完全体通用 (js语法特点)

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

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

19.动态dom操作

原生js动态操作(了解)

    创建元素(不会出现在dom树上  
            虚拟dom元素 支持属性设置)
    document.createElement("li")

    追加子元素(可以把元素渲染出来 挂在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>

20.动态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"]]

    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>

21.String字符串对象

     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

转大写 toUpperCase
    console.log(myStr.toUpperCase());

转小写 toLowerCase
    console.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]);
    //转大写 toUpperCase
    console.log(myStr.toUpperCase());

    //转小写 toLowerCase
    console.log(myStr.toLowerCase());
    //字符替换
    console.log(myStr.replace("123","你好"))

</script>
</html>

22.数学计算对象

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

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

23.日期对象

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);

24.数组对象

        数组  数据的集合 
              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数组遍历

    newArr4.forEach(function(data){
        console.log(data);
    })

注意:如果是从页面获取元素 要用forEach遍历 需要转换类型
    //获取元素集合  Prototype HTMLCollection
    let 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"
    })

25.JSON对象

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").value
       console.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").value

       console.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>