JavaWeb-JavaScript

甲柒2023-09-25 10:41

JavaWeb-JavaScript

什么是JavaScript

Web标准

  • Web标准也称为网页标准，由一系列的标准组成，大部分由W3C ( World Wide Web Consortium，万维网联盟）负责制定。
  • 三个组成部分：
    HTML：负责网页的结构（页面元素和内容）。
    CSS：负责网页的表现（页面元素的外观、位置等页面样式，如:颜色、大小等）。
    JavaScript：负责网页的行为（交互效果）。

JavaScript

  • JavaScript（简称：JS）是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互。
  • JavaScript和Java是完全不同的语言，不论是概念还是设计。但是基础语法类似。
  • JavaScript在1995年由Brendan Eich 发明，并于1997年成为ECMA标准。
  • ECMAScript 6 (ES6)是最新的JavaScript版本（发布于2015年）。

ECMA

ECMA国际（前身为欧洲计算机制造商协会），制定了标准化的脚本程序设计语言ECMAScript，这种语言得到广泛应用。而JavaScript是遵守ECMAScript的标准的。

js引入方式

内部脚本：

  • 将JS代码定义在HTML页面中
    • JavaScript代码必须位于<script><script>标签之间
    • 在HTML文档中，可以在任意地方，放置任意数量的<script>
    • 一般会把脚本置于<body>元素的底部，可改善显示速度
html 复制代码 
<script>
	alert("Hello JavaScript")
</script>

外部脚本：

  • 将JS代码定义在外部JS文件中，然后引入到HTML页面中
    • 外部JS文件中，只包含JS代码，不包含<script>标签
    • <script>标签不能自闭合
html 复制代码 
<script src="js/demo.js"></script>
js 复制代码 
alert("Hello JavaScript")

代码运行结果

js基础语法

书写语法

  • 区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的
  • 每行结尾的分号可有可无，建议写上;
  • 注释：
    • 单行注释：//注释内容
    • 多行注释：/*注释内容*/
  • 大括号表示代码块
javascript 复制代码 
//判断
if(count == 3){
    alert(count);
}

输出语句

  • 使用window.alert()写入警告框
  • 使用document.write()写入HTML输出
  • 使用console.log()写入浏览器控制台
html 复制代码 
<script>
	window.alert("Hello JavaScript");//浏览器弹出警告框
    
    document.write("Hello JavaScript");//写入HTML，在浏览器展示
    
    console.log("Hello JavaScript");//写入浏览器控制台
</script>

代码运行结果


变量

  • JavaScript中用var关键字（variable的缩写）来声明变量
  • JavaScript是一门弱类型语言，变量可以存放不同类型的值
  • 变量名需要遵循如下规则：
    • 组成字符可以是任何字母、数字、下划线_、或美元符号$
    • 数字不能开头
    • 建议使用驼峰命名
html 复制代码 
<script>
    //var定义变量
	var a = 20;
	a = "张三";

	alert(a);
</script>

代码运行结果

注意事项

  • ECMAScript6新增了let关键字来定义变量。它的用法类似于var，但是所声明的变量，只在let关键字所在的代码块内有效，且不允许重复声明
  • ECMAScript6新增了const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变

代码演示

HTML 复制代码 
<!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>
        // var定义变量
        // var a = 10;
        // a = "张三";

        // alert(a);

        // 特点1：作用域比较大，全局变量
        // 特点2：可以重复定义的
        // {
        //     var x = 1;
        //     var x = "test";
        // }
        // alert(x);

        // let
        {
            let x = 1;
            // let x = "a";    let不能重复定义
            alert(x);//1
        }
        // alert(x);//不能拿到let x = 1;   说明let是局部变量，此行会报错

        // const：常量，不能改变
        const pi = 3.14;
        // pi=3.15;   const声明的是常量，数值不能改哦，此行会报错
        alert(pi);
    </script>
</body>

</html>

数据类型：

JavaScript中分为：原始类型和引用类型

原始类型 描述
number 数字（整数、小数、NaN(Not a Number)）
string 字符串，单双引号都可
boolean 布尔，true、false
null 对象为空
undefined 当声明的变量未初始化时，该变量的默认值是undefined
  • 注：使用typerof运算符可以获取数据类型

代码演示

html 复制代码 
<!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>
        // 原始数据类型
        // alert(typeof 3);//number
        // alert(typeof 3.14);//number

        // alert(typeof "A");//string
        // alert(typeof 'Hello');//string

        // alert(typeof true);//boolean
        // alert(typeof false);//boolean

        // alert(typeof null);//object

        var a;
        alert(typeof a);//undefined
    </script>
</body>

</html>

运算符：

类型 运算符
算术运算符 +、-、*、/、%、++、--
赋值运算符 =、+=、-=、*=、/=、%=
比较运算符 >、<、>=、<=、!=、==、 ===
逻辑运算符 &&、||、!
三元运算符 条件表达式 ? true_value : false_value
  • 注：==会类型转换，===不会类型转换

类型转换

  • 字符串类型转换为数字
    • 将字符串字面值转为数字。如果字面值不是数字，则为NaN
  • 其他类型转为boolean
    • Number：0和NaN为false，其他均为true
    • String：空字符串为false，其他均转为true
    • Null和undefined：均转为false
html 复制代码 
<!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>
        // var age = 20;
        // var _age = "20";
        // var $age = 20;

        // alert(age == _age);//true
        // alert(age === _age);//false
        // alert(age === $age);//true

        // // 类型转换-其他类型转为数字
        // alert(parseInt("12"));//12
        // alert(parseInt("12A45"));//12
        // alert(parseInt("A45"));//NaN(not a number)

        // 类型转换 - 其他类型转为boolean
        // if(0){//false
        //     alert("0 转换为false");
        // }
        // if(NaN){//false
        //     alert("NaN 转换为false");
        // }
        // if(-1){//true
        //     alert("除了0和NaN其他数字都转为true");
        // }

        // 字符串转换为boolean
        if ("") {//false
            alert("空字符串为false,其他都是true");
        }
        if (null) {//false
            alert("null 转化为false");
        }
        if (" ") {//true
            alert("空格字符串转化为true");
        }

        // null和undefined转换为boolean都是false
        if (null) {//false
            alert("null 转化为false");
        }
        if (undefined) {//false
            alert("undefined转化为false");
        }

        // 注意if循环中，判断值为false时不执行代码块内容
    </script>
</body>

</html>

流程控制语句

  • if... else if...else...
  • switch
  • for
  • while
  • do...while

js函数

函数

  • 介绍：函数（方法）是被设计为执行特定任务的代码块

  • 定义：JavaScript函数通过function关键字进行定义，语法为：

javascript 复制代码 
function functionName(参数1, 参数2){	
    //要执行的代码
}

  • 例如定义一个求和函数，并调用

    javascript 复制代码 
    //定义函数
function add(a, b){
    return a + b;
}
//调用函数
var result = add(10,20);
alert(result);

  • 注意：

    • 形式参数不需要类型，因为JavaScript是弱类型语言
    • 返回值也不需要定义类型，可以在函数内部直接使用return返回即可
    • JS中，函数调用可以传递任意个数的参数

  • 调用：函数名称(实际参数列表)

  • 定义方式二：JavaScript函数通过var关键字进行定义，语法为：

javascript 复制代码 
var functionName = function(参数1, 参数2){	
    //要执行的代码
}

  • 例如定义一个求和函数，并调用

    javascript 复制代码 
    //定义函数
var add = function(a, b){
    return a + b;
}
//调用函数
var result = add(10, 20);
alert(result);

js对象

Array

  • JavaScript中Array对象用于定义数组

  • 定义：方式一

    javascript 复制代码 
    var 变量名 = new Array(元素列表);
//例如
var arr = new Arry(1, 2, 3, 4);

  • 定义：方式二

    javascript 复制代码 
    var 变量名 = [元素列表];
//例如
var arry = [1, 2, 3, 4];

  • 访问

    javascript 复制代码 
    arr[索引] = 值;
//例如
arr[10] = "hello";

  • 注意：

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

  • 示例代码

    javascript 复制代码 
            //定义数组
        // var arr = new Array(1, 2, 3, 4);

        var arr = [1, 2, 3, 4];
        console.log(arr[0]);//1
        console.log(arr[1]);//2

        // 特点：长度可变 类型可变
        var arr = [1, 2, 3, 4];
        arr[10] = 50;

        console.log(arr[10]);//50
        console.log(arr[9]);//undefined
        console.log(arr[8]);//undefined

        arr[8] = "A";
        arr[9] = true;
        console.log(arr[8]);//A
        console.log(arr[9]);//true

  • 属性

属性 描述
length 设置或返回数组中元素的数量
  • 方法
方法 描述
forEach() 遍历数组中的每个有值的元素，并调用一次传入的函数
push() 将新元素添加到数组的末尾，并返回新的长度
splice() 从数组中删除元素

代码示例

javascript 复制代码 
        var arr = [1, 2, 3, 4];
        // for 循环遍历数组中的所有元素
        // for (let index = 0; index < arr.length; index++) {
        //     console.log(arr[index]);
        // }

        //forEach：遍历数组中有值的元素
        arr.forEach(function (e) {
            console.log(e);
        })

        // console.log("=====================")
        //ES6 箭头函数：(...) => {...}  作用：简化函数的定义
        arr.forEach((e) => {
            console.log(e);
        })

        //push：添加元素到数组末尾
        arr.push(7, 8, 9);
        console.log(arr);

        //splice：删除元素
        arr.splice(2, 2);
        console.log(arr)

代码运行结果

String

  • String字符串对象创建方式有两种：

    javascript 复制代码 
    //方式一
var 变量名 = new String("...")
//例
var str = new String("Hello String");

//方式二
var 变量名 = "...";
//例
var str = "Hello String";
var str = 'Hello String'

  • 属性

    属性 描述
    length 字符串的长度

  • 方法

    方法 描述
    charAt() 返回指定位置的字符
    indexOf() 检索字符串
    trim() 去除字符串两边的空格
    substring() 提取字符串中两个指定的索引号之间的字符

  • 示例代码

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-String</title>
</head>

<body>
    <script>
        //创建字符串对象
        // var str = new String("Hello String");
        var str = "   Hello String  ";

        console.log(str);

        //length    获取字符串的长度
        console.log(str.length);

        //charAt    返回指定位置的字符
        console.log(str.charAt(6));

        //indexOf   检索字符串位置
        console.log(str.indexOf("lo"));

        //trim  去除字符串两端的空格
        var s = str.trim();
        console.log(s);

        //substring(start, end) 开始索引，结束索引（含头不含尾）
        console.log(s.substring(0, 5));
    </script>
</body>

</html>

    代码运行结果

JSON

  • 定义格式

    javascript 复制代码 
    var 对象名 = {
    属性名1: 属性值1,
    属性名2: 属性值2,
    属性名3: 属性值3,
    函数名: function(形参列表){}
};
//例
var user = {
    name:"Tom",
    age:20,
    gender:"male",
    eat:function(){
        alert("用膳~");
    }
    /*简写
    eat(){
        alert("用膳~");
    }
    */
};

  • 调用格式

    javascript 复制代码 
    对象名.属性名;
对象名.函数名();
//例
console.log(user.name);
user.eat();
JSON-介绍

  • 概念：JavaScript Object Notation，JavaScript对象标记法

  • JSON是通过JavaScript对象标记书法书写的文本

  • 由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输

    json 复制代码 
    {
    "name":"Tom",
    "age":20,
    "gender":"male"
}

  • 定义

    json 复制代码 
    var 变量名 = '{"key1":value1,"key2":value2}';
//例
var userStr = '{"name":"Tom","age":18,"addr":["北京","上海","郑州","西安"]}';

  • value的数据类型为：

    • 数字（整数或浮点数）
    • 字符串（在双引号中）
    • 逻辑值（true或false）
    • 数组（在方括号[]中）
    • 对象（在花括号{}中）
    • null

  • JSON字符串转换为JS对象

    javascript 复制代码 
    var jsObject = JSON.parse(userStr);

  • JS对象转化为JSON字符串

    javascript 复制代码 
    var jsonStr = JSON.stringify(jsObject);

示例代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-JSON</title>
</head>

<body>
    <script>
        //自定义对象
        var user = {
            name: "Tom",
            age: 20,
            gender: "male",
            eat: function () {
                alert("用膳~");
            }
        };

        alert(user.name);
        user.eat();

        // 定义json
        var jsonStr = '{"name":"Tom","age":18,"addr":["北京","上海","郑州","西安"]}';
        alert(jsonStr.name);//undefined 不能获取name的值

        // json字符串 ==》 js对象
        var jsObject = JSON.parse(jsonStr);
        alert(jsObject.name);

        // js对象 ==》 json字符串
        alert(JSON.stringify(jsObject));
    </script>
</body>

</html>

BOM

概念：

Browser Object Model浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象。

  • 组成

    BOM 描述
    Window 浏览器窗口对象
    Navigator 浏览器对象
    Screen 屏幕对象
    History 历史记录对象
    Location 地址栏对象

  • 图示

Window

  • 介绍：浏览器窗口对象

  • 获取：直接使用window，其中window.可以省略

    js 复制代码 
    window.alert("Hello Window");

alert("Hello Window");

  • 属性

    属性 描述
    history 对History对象的只读引用
    location 用于窗口或框架Location对象
    navigator 对于Navigator对象的只读引用

  • 方法

    方法 描述
    alert() 显示带有一段消息和一个确认的警告框
    confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框
    setInterval() 按照指定的周期（以毫秒计）来调用函数或表达式
    setTimeout() 在指定的毫秒数后调用函数或计算表达式
Location

  • 介绍：地址栏对象

  • 获取：使用window.location获取，其中window.可以省略

    js 复制代码 
    window.location.属性;

location.属性;

  • 属性：

    • href：设置或返回完整的URL

      js 复制代码 
      location.href = "https://blog.csdn.net/qq_59621600";

示例代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-BOM</title>
</head>

<body>
    <script>
        // 获取
        window.alert("Hello BOM");
        alert("Hello BOM Window");

        // 方法
        // confirm - 对话框 -- 确认：true，取消：false
        // var flag = confirm("你确认删除该记录嘛？");
        // alert(flag);

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

        //定时器 - setTimeout -- 延迟指定时间执行一次
        // setTimeout(function () {
        //     alert("JS")
        // }, 3000);

        //location
        alert(location.href);

        location.href = "https://blog.csdn.net/qq_59621600";//拿到当前地址后会跳转到该域名

    </script>
</body>

</html>

DOM

概念：

Document Object Model，文档对象模型，DOM是W3C（万维网联盟）的标准，定义了访问HTML和XML文档的标准，分为3个不同的部分：

1、Core DOM-所有文档类型的标准模型

  • 将标记语言的各个组成部分封装为对应的对象：
    • Document：整个文档对象
    • Element：元素对象
    • Attribute：属性对象
    • Text：文本对象
    • Comment：注释对象
html 复制代码 
<html>
    <head>
        <title>DOM</title>
    </head>
    <body>
        <h1>
            DOM对象标题
        </h1>
        <a href="https://blog.csdn.net/qq_59621600">甲柒CSDN</a>
    </body>
</html>
图示：

2、XML DOM - XML文档的标准模型

3、HTML DOM - HTML文档的标准模型

  • Image：<img>
  • Button：<input type='button'>

HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的

  • Document对象中提供了以下获取Element元素对象的函数：

  1. 根据id属性值获取，返回单个Element对象

    js 复制代码 
    var h1 = document.getElementById('h1');

  2. 根据标签名称获取，返回Element对象数组

    js 复制代码 
    var divs = document.getElementsByTagName('div');

  3. 根据name属性值获取，返回Element对象数组

    js 复制代码 
    var hobbys = document.getElementsByName('hobby');

  4. 根据class属性值获取，返回Element对象数组

    js 复制代码 
    var clss = document.getElementsByClassName('cls');

  5. 查看参考手册，属性、方法

示例代码
html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-BOM-获取元素</title>
</head>

<body>
    <img id="h1" src="img/三只松鼠.png">
    <br><br>
    <div class="cls">甲柒</div><br>
    <div class="cls">CSDN</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获取元素-根据标签获取 - div
    // 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]);
    // }

    // 1.5查询参考手册，属性、方法
    var divS = document.getElementsByClassName('cls');
    var div1 = divS[0];

    div1.innerHTML = "甲柒大佬~~~~"
</script>

</html>

代码运行结果：略

案例：

通过DOM操作，完成如下效果实现

  1. 点亮灯泡
  2. 将所有的div标签的标签体内容后面加上：very good
  3. 使用所有的复选框呈现被选中的状态

示例代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-BOM-</title>
</head>

<body>
    <img id="h1" src="img/off.gif"><br><br>

    <div class="cls">甲柒</div><br>
    <div class="cls">CSDN</div><br>

    <input type="checkbox" name="hobby">唱
    <input type="checkbox" name="hobby">跳
    <input type="checkbox" name="hobby">rap
</body>
<script>
    // 1. 点亮灯泡：src属性值的改变
    var img = document.getElementById('h1');
    img.src = "img/on.gif"

    // 2. 将所有的div标签的标签体内容后面加上：very good
    var divS = document.getElementsByTagName('div');
    for (let i = 0; i < divS.length; i++) {
        const element = divS[i];
        element.innerHTML += "<font color='red'> very good</font>"
    }
    // 3. 使用所有的复选框呈现被选中的状态
    var inS = document.getElementsByName('hobby');
    for (let i = 0; i < inS.length; i++) {
        const element = inS[i];
        element.checked = true;//选中状态
    }
</script>

</html>

代码运行结果

js监听事件

事件：

HTML事件是发生在HTML元素上的"事情"。比如：

  • 按钮被点击
  • 鼠标移到元素上
  • 按下键盘按键

事件监听：

JavaScript可以在事件被侦测到时执行代码

事件绑定

  • 方式一：通过HTML标签中的事件属性进行绑定

    html 复制代码 
    <input type="button" onclick="on()" value="按钮1">
<script>
    function on() {
        alert('我被点击了~~~');
    }
</script>

  • 方式二：通过DOM元素属性绑定

    html 复制代码 
        <input type="button" id="btn" value="按钮2">
    <script>
        document.getElementById('btn').onclick = function () {
            alert('我被点击了！！！');
        }
    </script>

常见事件

事件名称 说明
onclick 鼠标单击事件
onblur 元素失去焦点
onfocus 元素获取焦点
onload 某个页面或图像被完成加载
onsubmit 当表单提交时触发该事件
onkeydown 某个键盘的键被按下
onmouseover 鼠标被移到某元素之上
onmouseout 鼠标从某元素移开

示例代码：

html 复制代码 
<!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 onload="load()">
    <form action="" style="text-align: center;" onsubmit="subfn()">
        <input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">

        <input id="b1" type="submit" value="提交">

        <input id="b2" type="button" value="单机事件" onclick="fn1()">
    </form>
    <br><br><br>

    <table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>分数</th>
            <th>评语</th>
        </tr>
        <tr align="center">
            <th>001</th>
            <th>张三</th>
            <th>90</th>
            <th>很优秀</th>
        </tr>
        <tr align="center">
            <th>002</th>
            <th>甲柒</th>
            <th>99</th>
            <th>优秀</th>
        </tr>
        <tr align="center">
            <th>003</th>
            <th>李四</th>
            <th>59</th>
            <th>不及格</th>
        </tr>
    </table>
</body>
<script>
    // | onclick     | 鼠标单击事件             |
    function fn1() {
        console.log("我被点击了....");
    }

    // | onblur      | 元素失去焦点             |
    function bfn() {
        console.log("失去焦点、、、");
    }

    // | onfocus     | 元素获取焦点             |
    function ffn() {
        console.log("获得焦点！！！");
    }
    // | onload      | 某个页面或图像被完成加载 |
    function load() {
        console.log("页面加载完成~~~");
    }
    // | onsubmit    | 当表单提交时触发该事件   |
    function subfn() {
        console.log("表单被提交///");
    }

    // | onkeydown   | 某个键盘的键被按下       |
    function kfn() {
        console.log("获得焦点。。。");
    }

    // | onmouseover | 鼠标被移到某元素之上     |
    function over() {
        console.log("鼠标移入了。。。");
    }

    // | onmouseout  | 鼠标从某元素移开         |
    function out() {
        console.log("鼠标移出了····");
    }
</script>

</html>

代码运行结果

案例

通过事件监听及DOM操作，完成如下效果实现

  1. 点击"点亮"按钮点亮灯泡，点击"熄灭"按钮熄灭灯泡。
  2. 输入框鼠标聚焦后，展示小写；鼠标离焦后，展示大写。
  3. 点击"全选"按钮使所有的复选框呈现被选中的状态，点击"反选"按钮使所有的复选框呈现取消勾选的状态。

示例代码

html 复制代码 
<!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>
    <img id="light" src="img/off.gif"><br><br>

    <input type="button" value="点亮" onclick="on()">
    <input type="button" value="熄灭" onclick="off()">
    <br><br>

    <input type="text" id="name" value="ITCAST" onfocus="lower()" onblur="upper()">
    <br><br>

    <input type="checkbox" name="hobby">唱
    <input type="checkbox" name="hobby">跳
    <input type="checkbox" name="hobby">rap
    <br>

    <input type="button" value="全选" onclick="checkAll()">
    <input type="button" value="反选" onclick="reverse()">
</body>
<script>
    // 1. 点击"点亮"按钮点亮灯泡，点击"熄灭"按钮熄灭灯泡。---onclick
    function on() {
        // a. 获取img对象
        var img = document.getElementById("light");
        // b. 设置src属性
        img.src = "img/on.gif";
    }
    function off() {
        // a. 获取img对象
        var img = document.getElementById("light");
        // b. 设置src属性
        img.src = "img/off.gif";
    }

    // 2. 输入框鼠标聚焦后，展示小写；鼠标离焦后，展示大写。---onfocus onblur
    function lower() {//小写
        // a. 获取输入框元素对象
        var input = document.getElementById("name");

        // b. 将值转为小写
        input.value = input.value.toLowerCase();
    }
    function upper() {//大写
        // a. 获取输入框元素对象
        var input = document.getElementById("name");

        // b. 将值转为大写
        input.value = input.value.toUpperCase();
    }
    // 3. 点击"全选"按钮使所有的复选框呈现被选中的状态，点击"反选"按钮使所有的复选框呈现取消勾选的状态。---onclick
    function checkAll() {
        // a. 获取所有复选框元素对象
        var hobbyS = document.getElementsByName("hobby");

        // b. 设置选中状态
        for (let i = 0; i < hobbyS.length; i++) {
            const element = hobbyS[i];
            element.checked = true;

        }
    }
    function reverse() {
        // a. 获取所有复选框元素对象
        var hobbyS = document.getElementsByName("hobby");

        // b. 设置未选中状态
        for (let i = 0; i < hobbyS.length; i++) {
            const element = hobbyS[i];
            element.checked = false;

        }
    }
</script>

</html>

代码运行结果

mg对象

var img = document.getElementById("light");

// b. 设置src属性

img.src = "img/off.gif";

}

// 2. 输入框鼠标聚焦后，展示小写；鼠标离焦后，展示大写。---onfocus onblur
function lower() {//小写
    // a. 获取输入框元素对象
    var input = document.getElementById("name");

    // b. 将值转为小写
    input.value = input.value.toLowerCase();
}
function upper() {//大写
    // a. 获取输入框元素对象
    var input = document.getElementById("name");

    // b. 将值转为大写
    input.value = input.value.toUpperCase();
}
// 3. 点击"全选"按钮使所有的复选框呈现被选中的状态，点击"反选"按钮使所有的复选框呈现取消勾选的状态。---onclick
function checkAll() {
    // a. 获取所有复选框元素对象
    var hobbyS = document.getElementsByName("hobby");

    // b. 设置选中状态
    for (let i = 0; i < hobbyS.length; i++) {
        const element = hobbyS[i];
        element.checked = true;

    }
}
function reverse() {
    // a. 获取所有复选框元素对象
    var hobbyS = document.getElementsByName("hobby");

    // b. 设置未选中状态
    for (let i = 0; i < hobbyS.length; i++) {
        const element = hobbyS[i];
        element.checked = false;

    }
}

```

代码运行结果

相关推荐
阿伟来咯~9 分钟前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端14 分钟前
使用vite+react+ts+Ant Design开发后台管理项目（五）
前端·javascript·react.js
学前端的小朱16 分钟前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
许野平23 分钟前
Rust： 利用 chrono 库实现日期和字符串互相转换
开发语言·后端·rust·字符串·转换·日期·chrono
guai_guai_guai26 分钟前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨27 分钟前
在JS中, 0 == [0] 吗
开发语言·javascript
狂奔solar35 分钟前
yelp数据集上识别潜在的热门商家
开发语言·python
blammmp1 小时前
Java：数据结构-枚举
java·开发语言·数据结构
何曾参静谧1 小时前
「C/C++」C/C++ 指针篇 之 指针运算
c语言·开发语言·c++
暗黑起源喵2 小时前
设计模式-工厂设计模式
java·开发语言·设计模式
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解