javaweb学习day2《JavaScript篇》--JavaScript全套基础知识点详解（附全套源代码及其案例逐语句解析）一万七千字全方位概括

@VON

发布于 2025-12-17 09:28:28

5700

一、前言

不知道大家有没有一同跟随小编坚持下去，这是javaweb学习的第二天，相信大家已经感觉到有些难度了，因为主要学习的是后端和框架，所以js和HTML只是简单的过一遍。这些基础的知识点应该总结的算是十分全面的了。相信对于学习前端的小伙伴们也是一味很好的良药。

黑马程序员的视频质量十分的高，自学能力强的小伙伴们可以去跟着黑马程序员进行全方位的学习。

如果想要跟随小编的脚步，每天都不能落后啊。

javaweb学习day1

二、基础知识点汇总

2.1 js函数

2.1.1 函数定义方式

JavaScript 中可以使用两种方式来定义函数：

函数声明

function add(a, b) {
    return a + b;
}

这种方式使用 function 关键字定义函数，后跟函数名和参数列表。函数声明提升到作用域顶部，可以在声明之前调用。

函数表达式

var add = function(a, b) {
    return a + b;
};

这种方式将一个匿名函数赋值给一个变量 add。这个变量 add 成为一个函数对象的引用。函数表达式不会提升，只有在赋值行之后才能调用。

2.2.2 函数调用

// 调用函数定义-1
var result1 = add(10, 20); // 输出 30
alert(result1);

// 调用函数定义-2
var add = function(a, b) {
    return a + b;
};
var result2 = add(10, 10); // 输出 20
alert(result2);

第一次调用使用了函数声明 function add(a, b) 定义的 add 函数，计算了 10 + 20，并将结果弹出显示在警告框中。
第二次调用使用了函数表达式 var add = function(a, b) 定义的 add 函数，计算了 10 + 10，并将结果弹出显示在警告框中。

2.2 js对象-Array

2.2.1 数组的定义

JavaScript 中可以使用多种方式来定义数组，例如：

使用 new Array() 构造函数：

var arr1 = new Array(1, 2, 3, 4);

使用数组字面量（推荐方式）：

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

2.2.2 数组的基本操作

访问数组元素

console.log(arr1[0]); // 输出数组 arr1 的第一个元素
console.log(arr2[1]); // 输出数组 arr2 的第二个元素

动态数组长度

JavaScript 中的数组长度是可变的，可以随时增加或减少元素，且每个元素可以是不同的类型。

var arr3 = [1, 2, 3, 4];
arr3[10] = 100; // 添加新元素到数组的索引位置 10
arr3[9] = 'A';  // 添加新元素到数组的索引位置 9
arr3[8] = true; // 添加新元素到数组的索引位置 8
console.log(arr3); // 输出完整的数组，包括未赋值的部分

数组的长度属性

var arr4 = [1, 2, 3, 4];
for (let i = 0; i < arr4.length; i++) {
    console.log(arr4[i]); // 遍历数组中的所有元素
}

2.2.3 数组的方法

forEach 方法

var arr5 = [1, 2, 3, 4];
arr5.forEach(function(i) {
    console.log(i); // 遍历数组中所有有值的元素
});

ES6 箭头函数

使用箭头函数可以简化 forEach 方法的定义

arr5.forEach((i) => {
    console.log(i);
});

for 循环遍历

遍历数组中的所有元素，包括未赋值的元素

for (let i = 0; i < arr5.length; i++) {
    console.log(arr5[i]);
}

push 方法

向数组末尾添加新元素：

arr5.push(5); // 在数组 arr5 的末尾添加数字 5
console.log(arr5[11]); // 输出新添加的元素

splice 方法

删除数组中的元素：

var arr6 = [1, 2, 3, 4, 5, 6];
arr6.splice(2, 3); // 从索引位置 2 开始，删除 3 个元素

2.3 js对象-String

2.3.1 字符串的定义

JavaScript 中可以使用字符串字面量直接定义字符串变量，也可以使用 new String() 构造函数创建字符串对象。推荐使用字符串字面量的方式，如：

var str = "Hello String";
console.log(str);

2.3.2 字符串的属性

length 属性：用于获取字符串的长度

console.log(str.length); // 输出字符串 str 的长度

2.3.3 字符串的方法

charAt() 方法：返回指定索引位置的字符。

console.log(str.charAt(4)); // 输出索引位置 4 的字符，从0开始计数

indexOf() 方法：检索字符串中指定的子字符串第一次出现的位置。

console.log(str.indexOf("in")); // 输出子字符串 "in" 在 str 中的位置，如果不存在返回 -1

trim() 方法：去除字符串两端的空格。

var str1 = "   hello world   ";
var str2 = str1.trim();
console.log(str1); // 原始字符串保持不变
console.log(str2); // 去除两端空格后的字符串

substring() 方法：提取字符串中两个指定的索引号之间的字符。

var str3 = "hello von";
console.log(str3.substring(6, 9)); // 输出从索引 6 到索引 9（不包含）之间的字符

2.4 js对象-JSON

2.4.1 JSON 格式定义

JSON 是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。在 JavaScript 中，JSON 可以表示为一个对象字面量（object literal），具有属性和方法。

2.4.2 自定义对象的定义

在 JavaScript 中，可以使用对象字面量来定义自定义对象，例如：

var user = {
    name: "von",
    age: 18,
    gender: "dayi",
    sex: "男",
    eat: function() {
        alert("吃东西");
    }
};

alert(user.name); // 访问对象的属性
user.eat(); // 调用对象的方法

这段代码定义了一个名为 user 的对象，包含了 name、age、gender、sex 属性以及 eat 方法。

2.4.3 JSON 字符串

JSON 可以表示为字符串形式，它是一个键值对的集合，属性名和属性值都是用双引号包裹的字符串。例如：

var jsonstr = '{"name":"von","age":18,"addr":["郑州","开封","兰考"]}';

2.4.4 JSON 字符串转换为 JavaScript 对象

使用 JSON.parse() 方法可以将 JSON 字符串解析为对应的 JavaScript 对象。

var obj = JSON.parse(jsonstr);
alert(obj.name); // 访问对象的属性

2.4.5 JavaScript 对象转换为 JSON 字符串

使用 JSON.stringify() 方法可以将 JavaScript 对象转换为 JSON 字符串。

alert(JSON.stringify(obj)); // 输出转换后的 JSON 字符串

2.5 js对象-BOM

2.5.1 window 对象

window.alert("Hello BOM"); 和 alert("Hello bom"); 都是调用 window 对象的 alert() 方法。在 JavaScript 中，全局作用域下的方法和属性可以直接使用，因为它们都属于 window 对象。

2.5.2 confirm 对话框

confirm() 方法显示一个带有确认和取消按钮的对话框，并返回用户的选择结果。如果用户点击确认，返回 true；如果用户点击取消，返回 false。

var flag = confirm("您确定关注博主吗？");
alert(flag);

2.5.3 定时器方法

setInterval()：周期性地执行一个函数。在你的注释中展示了如何每隔两秒执行一次函数。

var i = 0;
setInterval(function(){
    i++;
    console.log("定时器执行了"+i+"次");
}, 2000);

setTimeout()：延迟一定时间后执行一次函数。

setTimeout(function(){
    alert("VON");
}, 3000);

2.5.4 location 对象

location.href 属性用于获取当前页面的 URL。

alert(location.href);

location.href = "http://www.itcast.cn"; 将当前页面重定向到指定的 URL。

location.href = "http://www.itcast.cn";

2.6 js对象-DOM

2.6.1 获取元素

根据 ID 获取元素：

var img = document.getElementById('h1');
alert(img);

这段代码演示了如何使用 getElementById() 方法通过元素的 ID 获取元素。

根据标签名获取元素：

var divs = document.getElementsByTagName('div');
for (let i = 0; i < divs.length; i++) {
    alert(divs[i]);
}

这段代码展示了如何使用 getElementsByTagName() 方法通过标签名获取元素集合，并对每个元素进行操作。

根据 name 获取元素：

var ins = document.getElementsByName('hobby');
for (let i = 0; i < ins.length; i++) {
    alert(ins[i]);
}

这段代码展示了如何使用 getElementsByName() 方法通过 name 属性获取元素集合，并对每个元素进行操作。

根据 class 获取元素：

var divs = document.getElementsByClassName('cls');
for (let i = 0; i < divs.length; i++) {
    alert(divs[i]);
}

这段代码演示了如何使用 getElementsByClassName() 方法通过类名获取元素集合，并对每个元素进行操作。

2.6.2 改变文本内容

var divs = document.getElementsByClassName('cls');
var div1 = divs[1];
div1.innerHTML = '小编';

这段代码将选中 class 为 cls 的第二个 <div> 元素的文本内容修改为 "小编"。这是通过修改 innerHTML 属性来实现的，用于动态更新 HTML 元素的内容。

2.7 js对象-事件绑定

事件绑定：在前端开发中，事件绑定是指将一个特定的 JavaScript 函数（事件处理程序）与 DOM 元素的某个事件（比如点击事件、鼠标移入事件等）关联起来，以响应用户的操作。
HTML 中的事件属性：像 onclick、onmouseover 等是 HTML 提供的事件属性，可以直接在 HTML 元素上使用，指定一个 JavaScript 函数名或者直接写一段 JavaScript 代码。
DOM 元素属性：DOM 元素对象（比如通过 document.getElementById() 获取的元素）有很多属性，其中包括事件属性（如 onclick），可以通过直接赋值一个函数来实现事件绑定。

2.7.1 通过 HTML 中的事件属性进行绑定

<input type="button" id="btn1" value="事件绑定1" onclick="on()">

这种方式是直接在 HTML 元素上使用事件属性（比如 onclick）来绑定事件处理函数。在这个例子中，onclick="on()" 表示当按钮被点击时，执行名为 on 的函数。在 JavaScript 部分，对应的函数定义如下：

function on(){
    alert("按钮1被点击了");
}

这种方式简单直接，适合于快速实现简单的事件处理逻辑。

2.7.2 通过 DOM 元素属性进行绑定

document.getElementById('btn2').onclick = function(){
    alert("按钮2被点击了");
}

这种方式是在 JavaScript 中选择元素（这里是 ID 为 btn2 的按钮），然后通过 onclick 属性直接赋值一个函数。这个函数会在按钮被点击时触发。这种方式可以使你在 JavaScript 中动态地为元素绑定事件处理函数，从而实现更灵活的交互和控制。

2.8 js对象-常见事件

JavaScript 中常见的事件可以分为多类，每一类事件都对应着用户与页面交互的不同方式和行为。

2.8.1 鼠标事件（Mouse Events）

这些事件与用户通过鼠标与页面进行交互相关。

click: 当鼠标点击元素时触发。
mouseover: 鼠标移动到元素上方时触发。
mouseout: 鼠标从元素移出时触发。
mousedown: 鼠标按下任意按钮时触发。
mouseup: 鼠标释放按钮时触发。
mousemove: 鼠标在元素内部移动时触发。
mouseenter: 鼠标进入元素时触发，不冒泡。
mouseleave: 鼠标离开元素时触发，不冒泡。

2.8.2 键盘事件（Keyboard Events）

这些事件与用户通过键盘与页面进行交互相关。

keydown: 按下键盘上的任意键时触发。
keyup: 释放键盘上的键时触发。
keypress: 按下键盘上的字符键时触发。

2.8.3.表单事件（Form Events）

这些事件与表单元素交互相关。

submit: 在提交表单时触发。
reset: 在重置表单时触发。
change: 在表单元素（<input>, <select>, <textarea> 等）的值改变时触发。

2.8.4 文档/窗口事件（Document/Window Events）

这些事件与整个文档或窗口的状态变化相关。

load: 当页面完全加载后触发。
unload: 当用户离开页面时触发（例如关闭窗口或导航到新页面）。
resize: 当窗口大小调整时触发。
scroll: 当用户滚动页面时触发。

2.8.5 其他常见事件

focus: 元素获得焦点时触发。
blur: 元素失去焦点时触发。
error: 当加载文档或图像时发生错误时触发。

2.8.6 事件处理方法

在 JavaScript 中，可以通过多种方式来处理事件，包括：

HTML 属性: 直接在 HTML 元素中使用 onclick="functionName()" 等属性。
DOM 属性: 在 JavaScript 中通过 element.onclick = function() {} 等方式动态添加事件处理函数。
addEventListener: 使用 addEventListener 方法来为元素添加事件监听器，更灵活地管理事件处理逻辑，支持多个事件处理函数绑定到同一个事件上。

三、案例展示

3.1js对象-DOM-案例

案例结果展示

图一

图二

案例源代码

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM-案例</title>
</head>
<body>
    <img src="./image/one.jpg" id="h1"> <br><br>

    <div class="cls">csdn</div> <br>
    <div class="cls">VON</div> <br>
 
    <input type="checkbox" name="hobby"> 点赞
    <input type="checkbox" name="hobby"> 关注
    <input type="checkbox" name="hobby"> 收藏
</body>

JavaScript部分

<script>
    //1.改变图片：src属性
    var img = document.getElementById('h1');
    img.src = "./image/two.jpg";

    //2.将所有div标签的内容后面加上：加油（红色字体）
    var divs = document.getElementsByTagName('div');
    for (let i = 0; i < divs.length; i++) {
        const div = divs[i];
        div.innerHTML += "<font color='red'> 加油</font>";
    }

    //3.使所有的复选框呈现选中状态
    var ins = document.getElementsByName('hobby');
    for (let i = 0; i < ins.length; i++) {
        const check = ins[i];
        check.checked = true; // 表示选中状态
    }
</script>

逐语句分析

改变图片的 src 属性：

var img = document.getElementById('h1');
img.src = "./image/two.jpg";

document.getElementById('h1') 获取 ID 为 h1 的 <img> 元素。
将该图片的 src 属性从 ./image/one.jpg 修改为 ./image/two.jpg，这样页面将显示名为 two.jpg 的图片。

修改所有 <div> 标签内容：

var divs = document.getElementsByTagName('div');
for (let i = 0; i < divs.length; i++) {
    const div = divs[i];
    div.innerHTML += "<font color='red'> 加油</font>";
}

document.getElementsByTagName('div') 获取所有 <div> 元素。
遍历每个 <div> 元素 (divs 数组)，将其原有的内容末尾添加 <font color='red'> 加油</font>。这段代码会使每个 <div> 元素的内容末尾添加红色的“ 加油”字样。

设置所有复选框为选中状态：

var ins = document.getElementsByName('hobby');
for (let i = 0; i < ins.length; i++) {
    const check = ins[i];
    check.checked = true; // 表示选中状态
}

document.getElementsByName('hobby') 获取所有 name 属性为 hobby 的复选框元素。
遍历每个复选框元素 (ins 数组)，将其 checked 属性设置为 true，这表示复选框处于选中状态。

3.2js事件案例

案例结果展示

图一

图二

案例源代码

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时间案例</title>
</head>
<body>
    <img src="./image/th.png" id="picture"><br>
    <input type="button" value="图片一" onclick="one()">
    <input type="button" value="图片二" onclick="two()">
    <input type="button" value="图片三" onclick="three()">
    <input type="button" value="图片四" onclick="four()">
    <br><br>
    <input type="text" id="name" value="VON" onfocus="lower()" onblur="upper()">
    <br><br>
    <input type="checkbox" name="hobby"> java
    <input type="checkbox" name="hobby"> C语言
    <input type="checkbox" name="hobby"> javaweb
    <br>
    <input type="button" value="全选" onclick="checkAll()">
    <input type="button" value="全不选" onclick="reverse()">
</body>

JavaScript部分

<script>
    
    //1.点击图片一、二、三、四，图片会发生变换
    function one(){
        var img = document.getElementById('picture');
        img.src = "./image/one.jpg";
    }
    function two(){
        var img = document.getElementById('picture');
        img.src = "./image/two.jpg";
    }
    function three(){
        var img = document.getElementById('picture');
        img.src = "./image/three.jpg";
    }
    function four(){
        var img = document.getElementById('picture');
        img.src = "./image/four.jpg";
    }
    //2.输入框聚焦后，展示小写；输入框离焦后，展示大写；
    //onfocus--聚焦，onblur--离焦
    function lower(){//小写
        var input = document.getElementById("name");
        input.value = input.value.toLowerCase();
    }
    function upper(){//大写
        var input = document.getElementById("name");
        input.value = input.value.toUpperCase();
    }
    //3.点击“全选”按钮，使所有的复选框呈现选中状态；
    function checkAll()
    {
        var hobbys = document.getElementsByName("hobby");
        for (let i = 0; i < hobbys.length; i++) {
            const element = hobbys[i];
            element.checked = true;
        }
    }
    function reverse(){
        var hobbys = document.getElementsByName("hobby");
        for (let i = 0; i < hobbys.length; i++) {
            const element = hobbys[i];
            element.checked = false;
        }
    }
    
</script>
</html>

逐语句分析

<img src="./image/th.png" id="picture"><br>

显示了一个图片，初始路径为 ./image/th.png，并设置了id为picture。
<br>标签用于在图片和按钮之间添加一个换行。

按钮部分：

<input type="button" value="图片一" onclick="one()"> 到 <input type="button" value="图片四" onclick="four()">
这四个按钮分别显示为“图片一”到“图片四”，每个按钮点击时会调用对应的JavaScript函数。

输入框：

<input type="text" id="name" value="VON" onfocus="lower()" onblur="upper()">
一个文本输入框，初始值为“VON”，当输入框聚焦时（onfocus），会调用lower()函数，当输入框失焦时（onblur），会调用upper()函数。

复选框部分：

<input type="checkbox" name="hobby"> java
<input type="checkbox" name="hobby"> C语言
<input type="checkbox" name="hobby"> javaweb
三个复选框，分别显示为“java”，“C语言”，“javaweb”，它们的name属性都为“hobby”。

全选和全不选按钮：

<input type="button" value="全选" onclick="checkAll()">
<input type="button" value="全不选" onclick="reverse()">
两个按钮，一个用于全选所有复选框，另一个用于全不选所有复选框，点击时分别调用checkAll()和reverse()函数。

四、全套源代码总结

4.1 js函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js函数</title>
</head>
<body>
    <script>
        //定义函数-1
        function add(a,b){
            return a+b;
        }

        //函数调用
        var result = add(10,20);
        alert(result);

        //定义函数-2
        var add = function (a,b){
            return a+b;
        }

        //函数调用
        var result = add(10,10);
        alert(result);
    </script>
</body>
</html>

4.2 js对象-Array

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Array</title>
</head>
<body>
    <script>
        //定义数组-1
        var arr1 = new Array(1,2,3,4);
        //定义数组-2
        var arr2 = [1,2,3,4];

        //输出数组中的数据
        console.log(arr1[0]);
        console.log(arr2[1]);

        //长度可变，类型可变
        var arr3 = [1,2,3,4];
        arr3[10] = 100;
        arr3[9] = 'A';
        arr3[8] = true;
        console.log(arr3);

        //javaScript中的数组相对于java中集合，数组的长度是可变的，而JavaScript是弱类型，所以可以存储任意的类型的数据

        //属性：length
        var arr4 = [1,2,3,4];
        for (let i = 0; i < arr4.length; i++) {
            console.log(arr4[i]);
        }
        console.log("===================");

        //方法：
        //1.forEash:遍历数组中所有有值的元素

        var arr5 = [1,2,3,4];
        arr5[10] = 'A';
        arr5.forEach(function(i){
            console.log(i);
        })

        console.log("=====================");
        //ES6 箭头函数：（...）=>{...}--简化函数定义

        arr5.forEach((i)=>{console.log(i);})
        console.log("=====================");

        //for循环遍历所有元素，包含未赋值的元素
        for (let i = 0; i < arr5.length; i++) {
            console.log(arr5[i]);
        }
        console.log("=====================");
        //2.push：添加元素到数组末尾
        arr5.push(5);
        console.log(arr5[11]);
        console.log("=====================");

        //3.splice:删除元素
        var arr6 = [1,2,3,4,5,6];
        arr6.forEach((i)=>{console.log(i);})
        console.log("=====================");
        arr6.splice(2,3);
        arr6.forEach((i)=>{console.log(i);})
        console.log("=====================");
    </script>
</body>
</html>

4.3 js对象-String

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>String</title>
</head>
<body>
    <script>
        //创建字符对象
        //两种方法-同Array
        //var str = new String("Hello String");
        var str = "Hello String";
        console.log(str);

        //属性：length
        console.log(str.length);

        //方法：
        //1.charAt:返回指定位置的字符
        console.log(str.charAt(4)); 

        //2.indexof：检索字符串
        console.log(str.indexOf("in"));

        //3.trim：去除字符串两边的空格
        var str1 = "   hello world   "
        var str2 = str1.trim();
        console.log(str1);
        console.log(str2);

        //4.substring：提取字符串中两个指定的索引号之间的字符
        //substring(start,end) ------- 开始索引，结束索引（包含头部，不包含尾部）
        var str3 = "hello von"
        console.log(str3.substring(6,9));

    </script>
</body>
</html>

4.4 js对象-JSON

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON</title>
</head>
<body>
    <script>
        /*
        定义格式
        var 对象名 = {
            属性名1：属性值1，
            属性名2：属性值2，
            ...
            函数名：function（形参列表）{}
        }；
        调用格式：
        对象名.属性名；
        对象名.函数名（）；
        */
        
        //自定义对象
        /*
        var user = {
            name:"von",
            age:18,
            gender:"dayi",
            sex:"男",
            eat:function(){
                alert("吃东西");
            }
        }
        alert(user.name);
        user.eat();
        */
        //定义JSON
        var jsonstr = '{"name":"von","age":18,"addr":["郑州","开封","兰考"]}';
        alert(jsonstr.name);

        //json字符串--js对象
        var obj = JSON.parse(jsonstr);
        alert(obj.name);

        //js对象--json字符串
        alert(JSON.stringify(obj));


    </script>
</body>
</html>

4.5 js对象-BOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BOM</title>
</head>
<body>
    <script>
        //一、window对象
        //获取
        window.alert("Hello BOM");
        //window可以省略
        alert("Hello bom");

        //方法
        //1.confirm：对话框 
        //确认：true，取消：false
        var flag = confirm("您确定关注博主吗？");
        alert(flag);

        //2.setInterval:定时器
        //功能：周期性执行某一个函数
        var i = 0;
        // setInterval(function(){
        //     i++;
        //     console.log("定时器执行了"+i+"次");
        // },2000);

        //3.setTimeout:定时器
        //功能：延迟指定时间执行一次
        // setTimeout(function(){
        //     alert("VON");
        // },3000);

        //二、location对象
        alert(location.href);

        location.href = "http://www.itcast.cn";
        


    </script>
    
</body>
</html>

4.6 js对象-DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM</title>
</head>
<body>
   <img src="./image/th.png" id="h1"> <br><br>

   <div class="cls">csdn</div> <br>
   <div class="cls">VON</div> <br>

   <input type="checkbox" name="hobby"> 点赞
   <input type="checkbox" name="hobby"> 关注
   <input type="checkbox" name="hobby"> 收藏
</body>

<script>
    //1.获取Element元素
    //1.1 获取元素--根据ID获取
    /*
    var img = document.getElementById('h1');
    alert(img);
    */
    //1.2 获取元素--根据标签获取
    /*
    var divs = document.getElementsByTagName('div');
    for(let i = 0;i < divs.length ; i++){
        alert(divs[i]);
    }
    */
    //1.3 获取元素--根据name获取
    /*
    var ins =  document.getElementsByName('hobby');
    for(let i = 0;i < ins.length ; i++){
        alert(ins[i]);
    }
    */
    //1.4 获取元素--根据class获取
    /*
    var divs = document.getElementsByClassName('cls');
    for(let i = 0;i < divs.length ; i++){
        alert(divs[i]);
    }
    */
    //2.改变文本内容
    var divs = document.getElementsByClassName('cls');
    var div1 = divs[1];
    div1.innerHTML = '小编';

    
    
</script>
</html>

4.7 js事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件绑定</title>
</head>
<body>
    <input type="button" id="btn1" value="事件绑定1" onclick="on()">
    <input type="button" id="btn2" value="事件绑定2">
</body>

<script>
    //方式一：通过HTML中的事件属性进行绑定
    function on(){
        alert("按钮1被点击了");
    }
    //方式二：通过DOM元素属性进行绑定
    document.getElementById('btn2').onclick = function(){
        alert("按钮2被点击了");
    }
</script>
</html>

4.8 对象-DOM-案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM-案例</title>
</head>
<body>
    <img src="./image/one.jpg" id="h1"> <br><br>

    <div class="cls">csdn</div> <br>
    <div class="cls">VON</div> <br>
 
    <input type="checkbox" name="hobby"> 点赞
    <input type="checkbox" name="hobby"> 关注
    <input type="checkbox" name="hobby"> 收藏
</body>

<script>
    
    //1.改变图片：src属性
    var img = document.getElementById('h1');
    img.src = "./image/two.jpg";

    //2.将所有div标签的内容后面加上：加油（红色字体）
    var divs = document.getElementsByTagName('div');
    for (let i = 0; i < divs.length; i++) {
        const div = divs[i];
        div.innerHTML += "<font color='red'> 加油</font>";
        
    }

    //3.使所有的复选框呈现选中状态
    var ins = document.getElementsByName('hobby');
    for (let i = 0; i < ins.length; i++) {
        const check = ins[i];
        check.checked = true;//表示选中状态
    }
    
</script>

</html>

4.9 事件案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时间案例</title>
</head>
<body>
    <img src="./image/th.png" id="picture"><br>
    <input type="button" value="图片一" onclick="one()">
    <input type="button" value="图片二" onclick="two()">
    <input type="button" value="图片三" onclick="three()">
    <input type="button" value="图片四" onclick="four()">
    <br><br>
    <input type="text" id="name" value="VON" onfocus="lower()" onblur="upper()">
    <br><br>
    <input type="checkbox" name="hobby"> java
    <input type="checkbox" name="hobby"> C语言
    <input type="checkbox" name="hobby"> javaweb
    <br>
    <input type="button" value="全选" onclick="checkAll()">
    <input type="button" value="全不选" onclick="reverse()">
</body>
<script>
    
    //1.点击图片一、二、三、四，图片会发生变换
    function one(){
        var img = document.getElementById('picture');
        img.src = "./image/one.jpg";
    }
    function two(){
        var img = document.getElementById('picture');
        img.src = "./image/two.jpg";
    }
    function three(){
        var img = document.getElementById('picture');
        img.src = "./image/three.jpg";
    }
    function four(){
        var img = document.getElementById('picture');
        img.src = "./image/four.jpg";
    }
    //2.输入框聚焦后，展示小写；输入框离焦后，展示大写；
    //onfocus--聚焦，onblur--离焦
    function lower(){//小写
        var input = document.getElementById("name");
        input.value = input.value.toLowerCase();
    }
    function upper(){//大写
        var input = document.getElementById("name");
        input.value = input.value.toUpperCase();
    }
    //3.点击“全选”按钮，使所有的复选框呈现选中状态；
    function checkAll()
    {
        var hobbys = document.getElementsByName("hobby");
        for (let i = 0; i < hobbys.length; i++) {
            const element = hobbys[i];
            element.checked = true;
        }
    }
    function reverse(){
        var hobbys = document.getElementsByName("hobby");
        for (let i = 0; i < hobbys.length; i++) {
            const element = hobbys[i];
            element.checked = false;
        }
    }
    
</script>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-10-20，如有侵权请联系 cloudcommunity@tencent.com 删除

函数