JavaWeb-JavaScript

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>元素的底部，可改善显示速度
<script>alert("Hello JavaScript")
</script>

外部脚本：

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

alert("Hello JavaScript")

代码运行结果

在这里插入图片描述

js基础语法

书写语法

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

输出语句

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

代码运行结果

在这里插入图片描述
在这里插入图片描述

变量

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

代码运行结果

在这里插入图片描述

注意事项

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

代码演示

<!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运算符可以获取数据类型

代码演示

<!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);//objectvar 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
<!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");// }// 字符串转换为booleanif ("") {//falsealert("空字符串为false,其他都是true");}if (null) {//falsealert("null 转化为false");}if (" ") {//truealert("空格字符串转化为true");}// null和undefined转换为boolean都是falseif (null) {//falsealert("null 转化为false");}if (undefined) {//falsealert("undefined转化为false");}// 注意if循环中，判断值为false时不执行代码块内容</script>
</body></html>

流程控制语句

  • if… else if…else…
  • switch
  • for
  • while
  • do…while

js函数

函数

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

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

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

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

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

  • 注意：

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

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

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

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

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

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

js对象

Array

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

  • 定义：方式一

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

  • 定义：方式二

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

  • 访问

    arr[索引] = 值;
//例如
arr[10] = "hello";

  • 注意：

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

  • 示例代码

            //定义数组// var arr = new Array(1, 2, 3, 4);var arr = [1, 2, 3, 4];console.log(arr[0]);//1console.log(arr[1]);//2// 特点：长度可变 类型可变var arr = [1, 2, 3, 4];arr[10] = 50;console.log(arr[10]);//50console.log(arr[9]);//undefinedconsole.log(arr[8]);//undefinedarr[8] = "A";arr[9] = true;console.log(arr[8]);//Aconsole.log(arr[9]);//true

  • 属性

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

代码示例

        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字符串对象创建方式有两种：

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

  • 属性

    属性描述
    length字符串的长度

  • 方法

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

  • 示例代码

    <!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

  • 定义格式

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

  • 调用格式

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

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

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

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

    {"name":"Tom","age":20,"gender":"male"
}

    在这里插入图片描述

  • 定义

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

  • value的数据类型为：

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

  • JSON字符串转换为JS对象

    var jsObject = JSON.parse(userStr);

  • JS对象转化为JSON字符串

    var jsonStr = JSON.stringify(jsObject);

示例代码

<!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();// 定义jsonvar 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.可以省略

    window.alert("Hello Window");alert("Hello Window");

  • 属性

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

  • 方法

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

  • 介绍：地址栏对象

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

    window.location.属性;location.属性;

  • 属性：

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

      location.href = "https://blog.csdn.net/qq_59621600";

示例代码：

<!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);//locationalert(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><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对象

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

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

    var divs = document.getElementsByTagName('div');

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

    var hobbys = document.getElementsByName('hobby');

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

    var clss = document.getElementsByClassName('cls');

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

示例代码
<!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. 使用所有的复选框呈现被选中的状态

在这里插入图片描述

示例代码

<!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 goodvar 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标签中的事件属性进行绑定

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

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

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

常见事件

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

示例代码：

<!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. 点击“全选”按钮使所有的复选框呈现被选中的状态，点击“反选”按钮使所有的复选框呈现取消勾选的状态。

在这里插入图片描述

示例代码

<!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. 点击“点亮”按钮点亮灯泡，点击“熄灭”按钮熄灭灯泡。---onclickfunction 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 onblurfunction 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. 点击“全选”按钮使所有的复选框呈现被选中的状态，点击“反选”按钮使所有的复选框呈现取消勾选的状态。---onclickfunction 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;}
}
```

代码运行结果

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/140650.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

32 随机链表的复制

32 随机链表的复制

随机链表的复制 题解1 哈希表题解2 回溯哈希哈希思路精简 题解3 优化迭代 给你一个长度为 n 的链表&#xff0c;每个节点包含一个额外增加的随机指针 random &#xff0c;该指针可以指向链表中的任何节点或空节点。 构造这个链表的 深拷贝。 深拷贝应该正好由 n 个 全新 节点…
阅读更多...
OR54 字符串中找出连续最长的数字串

OR54 字符串中找出连续最长的数字串

目录 一、题目 二、解答 &#xff08;一&#xff09;问题一&#xff1a;在记录完一组连续字符串后&#xff0c;没有注意判别紧随其后的非数字字符 &#xff08;二&#xff09;问题二&#xff1a;越界访问 &#xff08;三&#xff09;正确 一、题目 字符串中找出连续最长的…
阅读更多...
设计模式再探——原型模式

设计模式再探——原型模式

目录 一、背景介绍二、思路&方案三、过程1.原型模式简介2.原型模式的类图3.原型模式代码4.原型模式深度剖析5.原型模式与spring 四、总结五、升华 一、背景介绍 最近在做业务实现的时候&#xff0c;为了通过提升机器来降低开发人员的难度和要求&#xff0c;于是在架构设计…
阅读更多...
数据标准化

数据标准化

1、均值方差标准化(Z-Score标准化) 计算过程&#xff1a; 对每个属性/每列分别进行一下操作&#xff0c;将数据按属性/按列减去其均值&#xff0c;并除以其方差&#xff0c;最终使每个属性/每列的所有数据都聚集在均值为0&#xff0c;方差为1附近。 公式&#xff1a;(x-mean(x…
阅读更多...
电子信息工程专业课复习知识点总结：(五）通信原理

电子信息工程专业课复习知识点总结：(五）通信原理

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 第一章通信系统概述——通信系统的构成、各部分性质、性能指标1.通信系统的组成&#xff1f;2.通信系统的分类&#xff1f;3.调制、解调是什么&#xff1f;有什么用…
阅读更多...
【数据结构--排序】堆排序

【数据结构--排序】堆排序

&#x1f490; &#x1f338; &#x1f337; &#x1f340; &#x1f339; &#x1f33b; &#x1f33a; &#x1f341; &#x1f343; &#x1f342; &#x1f33f; &#x1f344;&#x1f35d; &#x1f35b; &#x1f364; &#x1f4c3;个人主页 &#xff1a;阿然成长日记 …
阅读更多...
在北京多有钱能称为富

在北京多有钱能称为富

背景 首先声明&#xff0c;此讨论仅限个人的观点&#xff0c;因为我本身不富嘛&#xff0c;所以想法应该非常局限。 举个栗子 富二代问我朋友&#xff0c;100~1000w之间&#xff0c;推荐一款车&#xff1f; 一开始听到这个问题的时候&#xff0c;有被唬住&#xff0c;觉得预…
阅读更多...
XXE 漏洞及案例实战

XXE 漏洞及案例实战

文章目录 XXE 漏洞1. 基础概念1.1 XML基础概念1.2 XML与HTML的主要差异1.3 xml示例 2. 演示案例2.1 pikachu靶场XML2.1.1 文件读取2.1.2 内网探针或者攻击内网应用&#xff08;触发漏洞地址&#xff09;2.1.4 RCE2.1.5 引入外部实体DTD2.1.6 无回显读取文件 3. XXE 绕过3.1 dat…
阅读更多...
Nitrux 3.0 正式发布并全面上市

Nitrux 3.0 正式发布并全面上市

导读乌里-埃雷拉&#xff08;Uri Herrera&#xff09;近日宣布 Nitrux 3.0 正式发布并全面上市&#xff0c;它是基于 Debian、无 systemd、不可变的 GNU/Linux 发行版的最新安装媒体&#xff0c;利用了 KDE 软件。 Nitrux 3.0 由带有 Liquorix 味道的 Linux 6.4.12 内核提供支持…
阅读更多...
QT-day4

QT-day4

画一个时钟 widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QPaintEvent> #include <QDebug> #include <QPainter> #include <QTimer> #include <QTime>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } Q…
阅读更多...
记一次逆向某医院挂号软件的经历

记一次逆向某医院挂号软件的经历

背景 最近家里娃需要挂专家号的儿保&#xff0c;奈何专家号实在过于抢手&#xff0c;身为程序员的我也没有其他的社会资源渠道可以去弄个号&#xff0c;只能发挥自己的技术力量来解决这个问题了。 出师不利 首先把应用安装到我已经 Root 过的 Pixel 3 上面&#xff0c;点击应…
阅读更多...
关于Pandas数据分析

关于Pandas数据分析

pandas的数据加载与预处理 数据清洗&#xff1a;洗掉脏数据 整理分析&#xff1a;字不如表 数据展现&#xff1a;表不如图 环境搭建 pythonjupyter anaconda Jupyter Notebook Jupyter Notebook可以在网页页面中直接编写代码和运行代码, 代码的运行结果也会直接在代码块下显示…
阅读更多...
【 Ubuntu】systemd服务创建、启用、状态查询、自启等

【 Ubuntu】systemd服务创建、启用、状态查询、自启等

要在 Ubuntu 启动后执行一个守护脚本&#xff0c;您可以使用 Shell 脚本编写一个 systemd 服务单元。systemd 是 Ubuntu 中常用的服务管理工具&#xff0c;可以在系统启动时自动启动和管理服务。 下面是一个示例的守护脚本和 systemd 服务单元的步骤&#xff1a; 创建守护脚本…
阅读更多...
Spring之依赖注入源码解析

Spring之依赖注入源码解析

基于Autowired的依赖注入底层原理 基于Resource注解底层工作流程图&#xff1a; 1 Spring中到底有几种依赖注入的方式&#xff1f; 首先分两种&#xff1a; 手动注入 自动注入 1.1 手动注入 在XML中定义Bean时&#xff0c;就是手动注入&#xff0c;因为是程序员手动给某…
阅读更多...
LeetCode 75-02：字符串的最大公因子

LeetCode 75-02：字符串的最大公因子

前置知识&#xff1a;使用欧几里得算法求出最大公约数 func gcdOfStrings(str1 string, str2 string) string {if str1str2 ! str2str1 {return ""}return str1[:gcd(len(str1), len(str2))] }func gcd(a, b int)int{if b 0{return a}return gcd(b, a%b) }
阅读更多...
车载软件架构 —— AUTOSAR Vector SIP包（二）

车载软件架构 —— AUTOSAR Vector SIP包（二）

车载软件架构 —— AUTOSAR Vector SIP包（二） 我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 没有人关注你。也无需有人关注你。你必须承认自己的价值，你不能站在他人的角度来反对自己。人生在…
阅读更多...
Android Kotlin 基础详解

Android Kotlin 基础详解

1,基础语法 1.1 可变变量与不可变变量 可以多次赋值的变量是可变变量&#xff0c;用关键字var表示&#xff1a; var <标识符> : <类型> <初始化值> 注意&#xff0c;在kotlin中成员变量不会赋默认值&#xff0c;不像java一样&#xff0c;必须手动添加默…
阅读更多...
83、SpringBoot --- 下载和安装 MSYS2、 Redis

83、SpringBoot --- 下载和安装 MSYS2、 Redis

★ 下载和安装MSYS2&#xff08;作用&#xff1a;可在Windows模拟一个Linux的编译环境&#xff09; 得到Redis的编译环境——在Linux平台上&#xff0c;这一步可以省略。&#xff08;1&#xff09;登录MSYS2官网&#xff08;http://repo.msys2.org/distrib/ &#xff09;下载M…
阅读更多...
Java 项目-基于 SpringBoot+Vue的疫情网课管理系统

Java 项目-基于 SpringBoot+Vue的疫情网课管理系统

文章目录 第一章 简介第二章 技术栈第三章 系统分析3.4.2学生用例 第四章 系统设计第五章 系统实现5.1学生功能模块5.2管理员功能模块5.3教师功能模块 六 源码咨询 第一章 简介 疫情网课也都将通过计算机进行整体智能化操作&#xff0c;实现的功能如下。 例如 管理员&#x…
阅读更多...
【力扣-每日一题】LCP 06. 拿硬币

【力扣-每日一题】LCP 06. 拿硬币

class Solution { public:int minCount(vector<int>& coins) {int res0;for(auto i:coins){resi/2;res(i%2)?1:0;}return res;} };
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023