Java Script入门最全笔记(附带具体案例)

JS介绍ECMAScriptDOM基本操作BOM理解

PIKapikaaaa

12385人浏览 · 2022-03-25 01:40:49

PIKapikaaaa · 2022-03-25 01:40:49 发布

JavaScript

一、JS介绍

1.1、理解于概念

理解：

JavaScript是一种即时编译型的变成语言，作为web页面的脚本语言，语言风格和Java相似，但是不是Java的产品

概念：

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

JavaScript的标准是[ECMAScript ](https://baike.baidu.com/item/ECMAScript /1889420)。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES2015。

1.2、作用

JavaScript 可以实现页面标签的动态效果，可以校验html标签中的内容，直接和用户增强交互体验

1.3、组成

JavaScript由三部分组成：

ECMAScript（核心）【js的便准语法、事件等内容】
作为核心，它规定了语言的组成部分：语法、类型、语句、关键字、保留字、操作符、对象

PS：*不完全兼容的实现

DOM（文档对象模型）【文档对象模型、对标签的操作：增删改查等】
DOM把整个页面映射为一个多层节点结果，开发人员可借助DOM提供的API，轻松地删除、添加、替换或修改任何节点。DOM也有级别，分为DOM1、DOM2、DOM3，拓展不少规范和新接口。

BOM （浏览器对象模型）【浏览器对象模型操作浏览器】
支持可以访问和操作浏览器窗口的浏览器对象模型，开发人员可以控制浏览器显示的页面以外的部分。注意：BOM未形成规范。

1.4、使用

<body>
    <button id="btn">第一个按钮</button>
   

    <!-- 方式一：内部使用【可以写在任意位置，代码由上往下依次执行】 -->
    <script>
        // 获取标签元素
        var btn = document.getElementById("btn");

        //指定事件
        btn.onclick=function(){
            //弹窗
            alert("弹窗显示")
        }
    </script>
    <!-- 方式二：外部使用  把js.文件引入 -->
    

    <button id="btn1">第二个按钮</button>
    <script src="xx.js"></script>
</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QX4GZBdg-1648142528448)(C:\Users\12994\Desktop\Java Script.assets\image-20220322223819022.png)]$

二、ECMAScript

2.1、变量

格式： var 变量名 = 初始值；

<body>
    <script>
        // 变量声明
        var a = 10;
        var s = "命运";
        var user = {
            username:"root",
            pwd:"123456"
        }
        var b;   // int xx
        
        //  打印  相当于System.out.println()
        console.log(a);
        console.log(s);
        console.log(user);
        console.log(b);  
    </script>
</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JnsHW7x0-1648142528452)(C:\Users\12994\Desktop\Java Script.assets\image-20220322223848647.png)]$

2.2、数据类型

1、number【所有的数值都属于该类型】

2、string【使用单引号或者双引号的都属于该类型】

3、boolean【true或者false属于该类型】

4、undefined【未定义类型之声明不给初始值的变量】

5、object【除以上之外都属于Object】

<body>
    <script>
        // 1、number【数值都属于该类型】
        var a = 10;
        var b = 3.14;

        // typeof()获取变量数据类型的函数
        console.log(typeof(a));
        console.log(typeof(b));
        console.log("=====================");

        // 2、string 字符类型
        var s = "abcd";
        var s1 = 'a';
        console.log(typeof(s));
        console.log(typeof(s1));
        console.log("=====================");

        // 3、boolean true/false
        var b = true;
        console.log(typeof(b));
        console.log("=====================");

        // 4、undefined 未定义类型
        var xx;
        console.log(typeof(xx));
        console.log("=====================");

        // 5、object 
        var p = {
            name:"张三",
            age:23,
            sex:"男"
        }
        var obj = new Object();
        console.log(typeof(p));
        console.log(typeof(obj));

    </script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qjvZQ4mm-1648142528453)(C:\Users\12994\Desktop\Java Script.assets\image-20220322223922219.png)]$

2.3、运算符

算数运算符：+ - * / ++ –

逻辑运算符： && || ！

赋值运算符：= += -= /= *= %=

比较运算符：== >= <= != > < ===[全等]

位运算符：<< >> <<< >>>

三目运算符：条件表达式？值1 ：值2

<body>
    <script>
        // 1、算数运算符 + - * / % ++ --
        var a = 10;
        var b = -3;

        console.log(a%b); // 符号和%前的符号一样

        var c = 3;
        var d = a++ + ++a + ++c + c++;
        console.log(a,c,d);
        // 2、逻辑运算符 && || ！  返回boolean
        console.log((10>9) && (8<7));

        // 3、赋值运算符 = += *= /= %=
        var xx = 100;
        var b = 5;
        b+=xx;
        console.log(b);

        // 4、比较运算符 ==  >  < >= <= != ===
        var str = "abc";
        var str1 = new String("abc");

        console.log(str==str1);   // 只比较内容
        console.log(str===str1);  // 既比较大小又 比较类型

        // 5、位运算符 >> << >>> <<< ^
        console.log(5>>2);

        // 6、三目运算符  表达式 ？ '值1' ：'值2'  相当于if()else()
        var xx1 = 10;
        var xx2 = 9;
        console.log((xx1>xx2)?xx1:xx2);
    </script>
</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QSyPCy8l-1648142528454)(C:\Users\12994\Desktop\Java Script.assets\image-20220322224739710.png)]$

2.4、流程控制

1、分支结构：

if(){} if(){} else{} if(){}else if(){}

switch(){ }

2、循环结构【三要素： 舒适循环变量、改变循环变量、循环条件】

while() do{}while() for(){}

<body>
    <script>
        // 1、 分支结构： if(){}  if(){} else{}  if(){}else if(){}......
        var score = 80;
        if(score > 90){
            console.log("奖励！")
        }else{
            console.log("不奖励~")
        }

        // switch...case...
        switch(score){
            case 90:
                console.log("成绩是90");
                break;
            case 80:
                console.log("成绩是80");
                break;
            default:
                console.log("没有奖励");
                break;
        }

        // 循环结构 while() do{}while() for(){}
        // 三要素 ： 舒适循环变量、改变循环变量、循环条件
        // 循环变量 1- 100的整数和
        var num = 1;
        var sum = 0;
        while(num <= 100){
            sum+=num;
            num++;
        }
        console.log(sum);
        console.log("======================");

        var sum1 = 0;
        var num1 = 0;
        do{
            sum1 += num1;
            num1++;
        }while(num1<=100);
        console.log(sum1);
        console.log("======================");


        var sum2 = 0;
        for(var i = 1;i <= 100; i++){
            sum2+=i;
        }
        console.log(sum2);

    </script>
</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4waEQJ4m-1648142528456)(C:\Users\12994\Desktop\Java Script.assets\image-20220322225006156.png)]$

2.5、函数

相当于Java中的方法

格式：

function 函数名 (参数列表){

函数体；

}

分类：’

无参无返回值

有参无返回值

无参有返回值

有参有返回值

匿名函数

<body>
    <script>
        // 1、定义函数  function(参数){函数体}

        // 2、调用函数 函数名(参数)

        // 3.1、无参 无返回值的函数
        function fun1(){
            console.log("无参、无返回值的函数")
        }
        fun1(); //调用

        // 3.2、有参 无返回值
        function fun2(name){
            console.log("有参、无返回值的函数")
        }
        fun2("chen");

        // 3.3、无参 有返回值
        function fun3(){
            return "无参、有返回值"
        }
        var a= fun3();
        console.log(a);

        // 3.4、有参 有返回值
        function fun4(name,age,sex){
            return name+""+age+""+sex;
        }
        var b= fun4("张三",18,"男");
        console.log(b);

        // 3.5、匿名函数
        var xx = function(){
            console.log("匿名函数")
        }
        xx();
    </script>
</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V6MyQbYo-1648142528457)(C:\Users\12994\Desktop\Java Script.assets\image-20220322225353784.png)]$

2.6、事件

JS 对标签发生的某个动作做某件事

<body>
    <!-- 1、onclick点击事件 -->
    <button onclick="fun1()">onclick点击事件</button>
    <br><br><br><br>
    <!-- 2、ondblclick双击事件 -->
    <button ondblclick="fun2()">ondblclick点击事件</button>
    <br><br><br><br>
    <!-- 3、onchange 内容改变事件 -->
    <!-- 4、onkeydown | onkeyup 键盘 按下\抬起 事件 -->
    <input type="text" name="username" onchange="fun3()" onkeydown="fun4()" onkeyup="fun5()">
    

   <script>
        function fun1(){
            alert("单机事件触发弹窗~");
        }

        function fun2(){
            alert("双击事件触发弹窗~");
        }
        function fun3(){
            alert("该值已被使用，请重新输入！");
        }
        function fun4(){
            console.log("键盘按下了~");
        }
        function fun5(){
            console.log("键盘抬起~");
        } 
    </script>

</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZGxhj5jV-1648142528458)(C:\Users\12994\Desktop\Java Script.assets\image-20220322225709915.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jz6z66Et-1648142528459)(C:\Users\12994\Desktop\Java Script.assets\image-20220322225739637.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Rof9gDwT-1648142528460)(C:\Users\12994\Desktop\Java Script.assets\image-20220322225853239.png)]$

<style>
        #d{
            width: 100px; 
            height: 100px; 
            background-color: aqua;

        }
    </style>
    <script>
        function changeColor1(){
            // 改变背景颜色
            // 1、获取修改颜色的标签
            var d1 = document.getElementById("d");
            d1.style.backgroundColor="red";
        }
        function changeColor2(){
            var d2 = document.getElementById("d");
            d2.style.backgroundColor="aqua";
        }
        function setColor1(){
            // 1、获取需要修饰的标签
            var inp = document.getElementById("inp");
            // 2、设置边框颜色
            inp.style.backgroundColor="red";
        }
        function setColor2(){
            // 1、获取需要修饰的标签
            var inp = document.getElementById("inp");
            // 2、设置边框颜色
            inp.style.backgroundColor="pink";
        }
    </script>
</head>
<body>
    <!--1、onmouseover 鼠标悬停事件  onmouseout 鼠标移出事件-->
    <div id="d" onmouseover="changeColor1()" onmouseout="changeColor2()"></div>
    <br>

    <!-- 2、onfocus 获取鼠标焦点事件  onblur  失去鼠标焦点事件 -->
    <input id="inp" type="text" onfocus="setColor1()" onblur="setColor2()">
</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RdFZYew9-1648142528461)(C:\Users\12994\Desktop\Java Script.assets\image-20220323235818930.png)]$

2.7、弹框

警告弹窗：alert(“信息”)；

提示弹窗：confirm(“提示信息”)；返回Boolean值

输入弹窗：prompt(“提示输入信息”)；返回输入框的值

<script>
    function tan1(){
        // 1、警告框
        alert("警告信息！");
    }

    function del(){
        // 提示信息
        if(confirm("确定删除么？")){
            console.log("删除");
        }else{
            console.log("不删除");
        }
    }
    function input1(){
        // 弹输入框
        var v = prompt("请输入信息");
        console.log(v);
    }
</script>
<body>
    <button onclick="tan1()">点击按钮</button>
    <button onclick="del()">删除</button>
    <button onclick="input1()">点击输入</button>
</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BolrGQZa-1648142528462)(C:\Users\12994\Desktop\Java Script.assets\image-20220324000125408.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GRLdS9xJ-1648142528463)(C:\Users\12994\Desktop\Java Script.assets\image-20220324000135486.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qDkxMFQ9-1648142528464)(C:\Users\12994\Desktop\Java Script.assets\image-20220324000149088.png)]$

2.8、常见对象

2.8.1、数组

数组：可以存储一组数据

JS数组的声明

var arr = new Array( );

var arr1 = new Array(5);

var arr2 = [1,2,3,4,5];

特点：

1、数组长度可变

2、数组中的数据可以存储不同的类型

3、js的数组相当于Java中的集合可以时单列集合也可以时双列集合

数组的操作：

1、增数组名[索引] = 值或者数组名.push(值)

2、删 delete 数组名[索引]

3、改数组名[索引] = 新值

4、查

普通for循环要求索引有序

for in 循环

注意：

数组名.length 获取数组中有序索引的最大值+1

<script>
        // JS中的数组： 相当java集合
        // 1、数组长度可变     2、可以保存不同数据类型的数据   3、可以保存键和值

        // 1、创建数组
        var arr1 = new Array();
        var arr2 = new Array(5);
        var arr3 = [1,2,3,4,5,6];

        // 2、保存数据【可以通过.push存储】
        arr1[0] = 10;
        arr1[1] = 3.14;
        arr1[2] = "abc";
        arr1.push("命运");
        arr1['x'] = "aaa";
        arr1.push("命运");
        arr1[100] = 100;
        arr1.push("命运");
        console.log(arr1);
        console.log("==保存数据==================");

        // 3、删除数据
        delete arr1[1];
        console.log(arr1);
        console.log("==删除数据==================");

        // 4、修改数据
        arr1[1] = 3.0;
        console.log(arr1);
        console.log("==修改数据==================");

        // 5、查询数据
        console.log(arr1[2])
        console.log("==查询arr1[2]数据==================");

        // 6、遍历数组
        for(var i = 0;i <arr1.length; i++){
            console.log(arr1[i])
        }
        console.log("==for遍历数组==================");

        for(var index in arr1){
            console.log(arr1[index])
        }

        console.log("==for in遍历数组==================");

        // 7、数组长度 length【获取数组中 有序索引最大值 +1】
        console.log(arr1.length)

</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pp4QAboS-1648142528465)(C:\Users\12994\Desktop\Java Script.assets\image-20220324001012761.png)]$

2.8.2、Math对象

console.log(Math.random); 随机数[0,1)

console.log(Math.max(1,2,5)); 取最大值

console.log(Math.min(1,2,5)); 取最小值

console.log(Math.ceil(1.25)); 向上取整

console.log(Math.floor(1.25)); 向下取整

console.log(Math.round()); 四舍五入

console.log(Math.PI()); 获取圆周率

console.log(Math.abs(-10)); 取绝对值

<script>
    // Math操作 数值的对象 提供了一系列的静态函数
    console.log("==Math操作================");
    console.log(Math.random()); //[0,1)
    console.log(Math.max(1,2,3,4,3.2));
    console.log(Math.min(1,2,3,4,3.2));

    console.log("==分页、取整================");
    //23条数据 一页显示5个  需要多少页 23/5=4
    console.log(Math.ceil(23/5));   //向上取整
    console.log(Math.floor(23/5));  //向下取整

    console.log("==四舍五入================");
    // 四舍五入
    console.log(Math.round(5.55));
    console.log(Math.round(5.45));

    console.log("==获取圆周率================");
    // 获取圆周率
    console.log(Math.PI);

    console.log("==获取绝对值================");
    // 获取绝对值
    console.log(Math.abs(-10));
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zA1XXKOw-1648142528466)(C:\Users\12994\Desktop\Java Script.assets\image-20220324001444515.png)]$

2.8.3、String对象

定义字符串

var 变量名 = “”;

var 变量名 = new String(" ");

常见函数

 <script>
        console.log("==创建字符串================");
        // 1、创建字符串
        var str1 = "abcd";
        var str2 = new String("abcd");
        console.log(str1,str2);     //面试题：上面的字符串的声明方式的区别
        console.log(str1==str2);
        console.log(str1===str2);
        
        console.log("==常见函数================");
        // 2、常见函数
        console.log(str1.length);   //获取字符串长度
        console.log(str1.startsWith('a'));  //判断是不是以 a 开头
        console.log(str1.endsWith('d'));  //判断是不是以 d 结尾

        console.log("==截取字符串================");
        var str3 = "root#123456";
        var arr = str3.split("#")       //split 以#拆分字符串，返回数组
        console.log(arr);

        // 截取字符串【包含0，不包含1】
        console.log(str1.substring(0,1));   //  substring 参数1：起始索引 参数2：结束索引
        console.log(str1.substr(2,2));      //  substr 参数1：起始索引 参数2：截取字符个数
    </script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4iGF2Y3U-1648142528467)(C:\Users\12994\Desktop\Java Script.assets\image-20220324001626719.png)]$

2.8.4、日期对象

var date = new Date( );

<script>
    console.log("==日期对象==============")
    // 日期对象 Date 【Wed Mar 23 2022 15:21:07 GMT+0800 (中国标准时间)】
    // 2022/03/23 15:20:55
    var date = new Date();
    console.log(date);

    console.log("==拼接日期==============")
    // 1、获取年
    var year = date.getFullYear();
    var month = date.getMonth()+1;  // 0-11【记得+1】
    // var day = date.getDay();        //获取当周的第几天
    var day = date.getDate();          //获取当月的第几天
    var hours = date.getHours();
    var min = date.getMinutes();
    var sec = date.getSeconds();
    
    // 打印到控制台
    console.log(year+"年"+month+"月"+day+"日\t"+hours+"时"+min+"分"+sec+"秒");

    // 写到页面
    document.write(year+"年"+month+"月"+day+"日\t"+hours+"时"+min+"分"+sec+"秒")

    

</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h12bbCwT-1648142528468)(C:\Users\12994\Desktop\Java Script.assets\image-20220324001730739.png)]$

2.9、定时器

一次性定时器：到达时间执行

创建定时器参数1：到时候做什么参数2：计时单位ms

setTimeout(参数1，参数2)；

清除定时器

clearTimeout(定时器对象)；

<script>
    var id;
    function window1(){
        // 1、设置定时器(一次性)    参数1：执行的任务【可以是函数】 参数2 ：指定时间ms
        id = setTimeout("dingShi()",2000);
    }
    function dingShi(){
        alert("定时结束后弹窗！");
    }
    function clear2(){
        // 清除一次性定时器 参数：定时器对象
        clearTimeout(id);
    }
    


</script>
<style>
    #clock{
        color: rgb(248, 250, 246);
        width: 2000px;
        height: 900px;
        background-color: black;
        font-size: 150px;
        font-family: "宋体";
        line-height: 900px;

    }
</style>
<body>
    <button onclick="window1()">点击按钮</button>
    <button onclick="clear2()">点击按钮</button>
</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eIUS2Ip6-1648142528469)(C:\Users\12994\Desktop\Java Script.assets\image-20220324002217054.png)]$

循环计时器：每隔多长时间执行一次

创建循环计时器

setInterval(做什么事，间隔时间)；

清除计时器

clearInterval(定时器对象)

<body>
<button onclick="start1()">开始</button>
    <button onclick="end1()">结束</button>
    <center>
    <div id="clock" >
    </div>

    <script>
        // 1、获取当前的日期
        var date = new Date();
        var m = (date.getMonth()+1)>9?(date.getMonth()+1):"0"+(date.getMonth()+1);
        var min = (date.getMinutes())>9?(date.getMinutes()):"0"+(date.getMinutes());
        var se = (date.getSeconds())>9?(date.getSeconds()):"0"+(date.getSeconds);
        var cl = date.getFullYear()+"-"+m+"-"+date.getDate()+"\t"+date.getHours()+":"+min+":"+date.getSeconds();
    
        // 2、显示在div
        var d1 = document.getElementById("clock");
        d1.innerHTML = cl;

        var ids;
    function start1(){
        // 1、设置定时器（循环定时器） 参数1：执行任务【可以是函数】 参数2：间隔时间ms
        ids = setInterval("getTime1()",1000);
    }
    
    function getTime1(){
        // 1、获取当前的日期
        var date = new Date();
        var m = (date.getMonth()+1)>9?(date.getMonth()+1):"0"+(date.getMonth()+1);
        var min = (date.getMinutes())>9?(date.getMinutes()):"0"+(date.getMinutes());
        var se = (date.getSeconds())>9?(date.getSeconds()):"0"+(date.getSeconds);
        var cl = date.getFullYear()+"-"+m+"-"+date.getDate()+"\t"+date.getHours()+":"+min+":"+date.getSeconds();
    
        // 2、显示在div
        var d1 = document.getElementById("clock");
        d1.innerHTML = cl;
    }
    

    function end1(){
        clearInterval(ids);
    }
    </script>
</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3TNlodVg-1648142528470)(C:\Users\12994\Desktop\Java Script.assets\image-20220324002747572.png)]$

三、DOM

理解：Document Object Model 文档对象模型。js操作标签的时候将所有的标签当成对象来操作。

作用：

1、对页面标签的获取、创建、删除、修改

2、对标签元素的属性、样式、内容的操作

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lzT0aNYr-1648142528471)(C:\Users\12994\Desktop\Java Script.assets\image-20220324003205686.png)]$

3.1、获取标签元素

查找元素的方法

1、根据标签的id值获取标签元素对象返回标签元素

document.getElementsById(“id值”)；

2、根据标签名获取标签元素返回的HTMLCollection

document.getElementsByTagName(“标签名”)；

3、根据标签的class值获取标签元素对象返回的HTMLCollection

document.getElementsByClassName(“标签名”)；

4、根据标签的name值获取标签元素对象返回NodeList集合

document.getElementsByName(“name值”);

<body>
    <!-- <script>
        // 指html页面加载完成之后 执行该事件
        window.οnlοad=function(){
        // 1、根据id获取标签
        document.getElementById("d1");
                console.log(d1);
        }
    </script> -->

    <div id="d1">
        d1的内容
    </div>

    <div id="d2">
        d1的内容
    </div>

    <div class="d3">
        d1的内容
    </div>

    用户：<input type="text" name="username" placeholder="root">

    <script>
        // 1、根据id获取标签
        // 直接获取，需要写在div下面
         var d1 = document.getElementById("d1");
                console.log(d1);

        // 2、根据标签名获取
        var d2 = document.getElementsByTagName("div"); 
        console.log(d2);

        // 3、根据标签的class值获取【返回HTMLCollection集合】
        var d3 = document.getElementsByClassName("d3"); 
        console.log(d3);

        // 4、根据标签的name值获取 【返回NodeList集合】
        var d4 = document.getElementsByName("username");
        console.log(d4);
    </script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Cy9frzAz-1648142528472)(C:\Users\12994\Desktop\Java Script.assets\image-20220324004113112.png)]$

3.2、创建元素

创建标签元素对象

document.createElement(“标签名”)；

指定存放的位置

a.appendChild(b) 将b标签元素追加到a标签内部

a.insertBefore(b,c) 将b标签元素插入到c标签元素的前面

<body>
    <script>
        // 页面加载完毕之后执行该事件
        window.onload = function(){
            // 1、获取标签元素
            var btn = document.getElementById("btn");

            // 2、绑定点击事件
            btn.onclick = function(){
                // 3、创建img标签  显示图片
                 var img = document.createElement("img");
                // img.src = "//www.baidu.com/s?wd=%E7%99%BE%E5%BA%A6%E7%83%AD%E6%90%9C&sa=ire_dl_gh_logo_texing&rsv_dl=igh_logo_pcs"

                // 4、指定标签在页面中的位置，追加到body的内部
                // document.body.appendChild(img);

                // // 4、指定标签在页面中的位置，插入到body的前面
                document.body.insertBefore(img,this);

            }
        }
    </script>
    <button id="btn">点击</button>
</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I6VZgTsF-1648142528473)(C:\Users\12994\Desktop\Java Script.assets\image-20220324162358338.png)]$

  <script>
// 5、将标签1 添加到标签2中
                var img = document.createElement("img");
                var newdiv = document.createElement("div");
                newdiv.appendChild(img);
      </script>

在这里插入图片描述

3.3、删除元素

标签元素对象.remove( );自己删除自己

a.removeChild(b); 根据父标签对象a删除子标签对象b

<body>
    <script>
        window.onload = function(){
            var d = document.getElementById("bt");
            d.onclick = function(){
                var h3 = document.getElementById("h3");
                h3.remove();
            }
        }

        function del(){
            var h3 = document.getElementById("h3");
             h3.remove();   //自己删除自己

            document.body.removeChild(h3);  //通过父标签删除子标签
        }
    </script>
    <h3 id="h3">哎呀我说命运呐</h3>
    <button id="bt" onclick="del()">点击删除标题</button>
</body>

在这里插入图片描述

3.4、修改元素

a.replaceChild(b,c) 将b标签替换成c标签

<body>
    <script>
        function change1(){
            // 将h3------>h4     
            var h3 = document.getElementById("h3");
            var h4 = document.createElement("h4");

            // 父标签改变子标签  参数1：替换后的元素  参数2：替换的元素
            
            document.body.replaceChild(h4,h3);
        }
    </script>
    <h3 id="h3">仙儿</h3>
    <input type="button" value="修改标签" onclick="change1()" name="" id="">
</body>

在这里插入图片描述

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QShdeQGI-1648142528476)(C:\Users\12994\Desktop\Java Script.assets\image-20220324163737642.png)]$

3.5、属性操作

标签元素对象.属性名 = 属性值；修改属性值

标签元素.setAttribute(“属性名”,“属性值”)；设置属性值

标签元素.removeAttribute(“属性名”)；删除属性值

标签元素.getAttribute(“属性名”); 获取属性值

<body>
    <script>
        function changebook(num){
            var im = document.getElementById("img");
            // 设置src属性
            if(num==1){
                // 方式1：标签元素对象.属性名
                im.src ="img/2.png";
                // 方式2：标签元素对象，setAttribute(属性名，属性值)
             //   im.setAttribute("src","D:");
                im.setAttribute("title","狗狗");

            }else{
                im.src ="img/3.png";
                im.setAttribute("title","猫猫");
            }

          //  im.removeAttribute("title");//删除属性
            console.log(im.src);//获取src属性
            console.log(im.getAttribute("title"));

        }
        
    </script>
    <input type="radio" name="book" onclick="changebook(1)" id="">狗狗
    <input type="radio" name="book" onclick="changebook(2)"  id="">猫猫
    <img id="img" src="" alt="">
</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2tLt0w7K-1648142528477)(C:\Users\12994\Desktop\Java Script.assets\image-20220324164412331.png)]$

3.6、样式操作

元素标签.style.样式名 = 样式值；设置样式

可以通过设置属性 class id style 方式设置样式

<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>Document</title>
    <style>
        .dd{
            border: 5px solid blue;
        }
    </style>
</head>
<body>
<script>
    function changestyle(num){
        // 1、获取标签元素
        var d1 = document.getElementById("d1");
   
        if(num==1){
            // 2、操作样式
            d1.style.backgroundColor = "red";
            //可以根据setAttribute设置参数来改变样式(选择器类型，选择器名称)
            d1.setAttribute("class","dd")
        }else{
            // 2、操作样式
            d1.style.backgroundColor = "aqua";
            d1.setAttribute("class","dd")
        }
        
    }
</script>
    <div id="d1" onmouseover="changestyle(1)" onmouseout="changestyle(2)" 
    style="width: 200px; height: 200px; background-color: aqua;">

    </div>
</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P7nT7nB9-1648142528478)(C:\Users\12994\Desktop\Java Script.assets\image-20220324165628371.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XAqrg8XA-1648142528478)(C:\Users\12994\Desktop\Java Script.assets\image-20220324165700493.png)]$

3.7、内容操作

操作双边标签中的内容

标签元素.innerText；

标签元素.innerHTML；

操作input框内容

标签元素.value

<body>
    <script>
        window.onload = function(){
            // 1、获取标签元素
            var h2 = document.getElementById("h2");

            // 2、获取内容
            console.log(h2.innerText);  //只获取里面的文本内容
            console.log(h2.innerHTML);  //获取标签内的所有内容  包括子标签

            // 3、设置
            h2.innerText="人民万岁！";
            h2.innerHTML="<i>人民万岁！</i>";

            // 获取输入框中的内容
            var inp = document.getElementById("inp");
            console.log(inp.innerText);         //【不能获取单边标签的内容】
            console.log(inp.innerHTML);          //【不能获取单边标签的内容】
           
            console.log(inp.value);    //获取input框内容
            inp.value = "嘿嘿嘿";       //设置input框内容
            console.log(inp.value);  
        }
    </script>
    <h2 id="h2">
        <i>生存呐</i>

        
    </h2>
    <input id="inp" type="text" name="username" value="小甜甜">
</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mkJF45KI-1648142528479)(C:\Users\12994\Desktop\Java Script.assets\image-20220324171857792.png)]$

四、BOM

理解

BOM Browser Object Model 浏览器对象模型，在浏览器初始化页面时，在内存中创建一个全局对象，用来描述窗体的属性和状态。这个全局对象成为浏览器对象模型

BOM有一个核心对象window，包含5个核心模块对象

Document 文档对象

History 页面的浏览器记录

Location 页面的地址

Screen 显示屏幕信息

Nvigator 浏览器的相关信息

常见函数

弹框：

【window.】alert( )

【window.】confirm( )

【window.】prompt( )

定时器：

【window.】setTimeout( )

【window.】setInterval ( )

<body>
    <script>
        function fush1(){
            // js页面刷新
            window.location.reload();
        }

        function jump1(){
            // js页面跳转
           window.location.href= "07-内容操作.html"
        }

        function back1(){
            window.history.back();
        }

        function forward1(){
            window.history.forward();
        }

    </script>
    <button onclick="fush1()">刷新</button>
    <button onclick="jump1()">跳转</button>
    <button onclick="back1()">后退</button>
    <button onclick="forward1()">前进</button>
</body>

sername" value=“小甜甜”>

```

[外链图片转存中…(img-mkJF45KI-1648142528479)]

四、BOM

理解

BOM Browser Object Model 浏览器对象模型，在浏览器初始化页面时，在内存中创建一个全局对象，用来描述窗体的属性和状态。这个全局对象成为浏览器对象模型

BOM有一个核心对象window，包含5个核心模块对象

Document 文档对象

History 页面的浏览器记录

Location 页面的地址

Screen 显示屏幕信息

Nvigator 浏览器的相关信息

常见函数

弹框：

【window.】alert( )

【window.】confirm( )

【window.】prompt( )

定时器：

【window.】setTimeout( )

【window.】setInterval ( )

<body>
    <script>
        function fush1(){
            // js页面刷新
            window.location.reload();
        }

        function jump1(){
            // js页面跳转
           window.location.href= "07-内容操作.html"
        }

        function back1(){
            window.history.back();
        }

        function forward1(){
            window.history.forward();
        }

    </script>
    <button onclick="fush1()">刷新</button>
    <button onclick="jump1()">跳转</button>
    <button onclick="back1()">后退</button>
    <button onclick="forward1()">前进</button>
</body>