news 2026/6/10 18:35:17

JAVAweb学习笔记——JS

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
JAVAweb学习笔记——JS

1、JS

(1)核心语法

(a)引入方法

首先是内部脚本:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS学习</title> <script> // 弹窗 alert("hello"); </script> </head> <body> <script> // 弹窗 alert("hello world"); </script> </body> <script> // 弹窗 alert("world"); </script> </html>

会弹出3次!

外部引入:

创建一个后缀为js的文件:

alert("hello world");

以下是全部代码:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS学习</title> </head> <body> <!--<script>--> <!-- // 弹窗--> <!-- alert("hello world");--> <!--</script>--> <script src="js/learn.js"></script> </body> </html>

结果如下:

总结:

(b)变量

(c)数据类型

(d)函数

(e)自定义对象

<script> let user={ name:'张三', age: 18, sex:'男', sing(){ alert(this.name+'会唱歌'); } } user.sing(); </script>

(f)JSON

将js对象转换成json字符串: <script> let person={ name:'张三', age: 18, sex:'男', } alert(JSON.stringify(person)); </script>

同理,如果想获取JSON下某个属性对应的值时,应该先将其转换成js对象,之后获取

(g)DOM

querySelector获取到的是匹配到的第一个对象:

<body> <h1 id="test1">111</h1> <h1>222</h1> <h1>333</h1> <script> let h1=document.querySelector('#test1'); // innerHTML:设置或返回元素的内容 alert(h1.innerHTML); // 将上述id=test1的输入111改为了下面的内容 h1.innerHTML="输入111"; </script> </body>

返回h1此时的内容

返回修改后的内容

使用querySelectorAll时表示选取的是数组,在下面调用的时候要用数组的格式

(h)事件监听

因此第二种方法不推荐,绑定同一事件容易被覆盖

习题:

<script> let d=document.querySelectorAll('tr'); //为每一个tr标签添加鼠标滑入事件 for(let i=0;i<d.length;i++){ d[i].addEventListener('mouseover',function (){ d[i].style.backgroundColor='#f2e2e2'; }); //为每一个tr标签添加鼠标滑出事件 d[i].addEventListener('mouseout',function (){ d[i].style.backgroundColor='#fff'; }); } </script>

结果和上图一样,鼠标到那一行哪一行就变为红色!

从js文件引入另一个js文件:

将引入的文件先要“暴露”

在要用的文件中进行引入

之后在html引入js时,需要将以上声明为模块化js:

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/9 15:52:20

养老院管理|基于springboot + vue养老院管理系统(源码+数据库+文档)

养老院管理 目录 基于springboot vue养老院管理系统 一、前言 二、系统功能演示 三、技术选型 四、其他项目参考 五、代码参考 六、测试参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 基于springboot vue养老院管理系统 一、前言 博主介绍&#xff1a…

作者头像 李华
网站建设 2026/6/10 15:40:38

计算机组成原理要点

计算机组成原理复习要点 课程摘要 本次复习主要围绕计算机组成原理的各个章节展开&#xff0c;包括存储系统、指令系统、中央处理器、输入输出系统等。其中&#xff0c;存储系统部分重点讲解了主存储器、外部存储器以及存储系统的性能指标&#xff1b;指令系统部分强调了指令格…

作者头像 李华
网站建设 2026/6/10 4:06:03

操作系统与数据结构核心知识点解析

操作系统与数据结构核心知识点解析 课程摘要 本文详细解析了操作系统和数据结构的核心知识点&#xff0c;包括操作系统的基本概念、内核与用户模式、中断异常、系统调用、引导过程&#xff0c;以及操作系统的目标和功能。同时&#xff0c;也深入讲解了进程与线程的引入、状态与…

作者头像 李华
网站建设 2026/6/10 0:32:46

Redis篇6——Redis深度剖析:从单机到集群,Redis高可用进化史

在前面的文章中&#xff0c;我们聊了 Redis 的持久化、锁机制以及热 Key 问题。今天&#xff0c;我们跳出具体的命令细节&#xff0c;从宏观架构的角度来看看 Redis 是如何一步步“做大做强”的。在生产环境中&#xff0c;我们几乎不会只部署一台 Redis。为什么&#xff1f;因为…

作者头像 李华
网站建设 2026/6/10 15:36:00

AI 时代,程序员的核心竞争力是什么?

从确定性到概率迷雾 Martin Fowler——《重构》的作者、敏捷宣言的起草人之一&#xff0c;对当前 AI 浪潮发出了警告&#xff1a;这不是工具升级&#xff0c;这是物种突变。我们正在从确定性的工业时代&#xff0c;跌进非确定性的概率迷雾。以前程序员是计算机世界的上帝&#…

作者头像 李华
网站建设 2026/6/10 14:29:02

41、打造出色的 UNIX 系统管理员简历

打造出色的 UNIX 系统管理员简历 在竞争激烈的就业市场中,一份出色的简历是开启理想工作之门的关键。对于 UNIX 系统管理员而言,如何准备一份能吸引潜在雇主目光的简历,是迈向成功职业生涯的重要一步。 简历的基本维护 在当前工作岗位上,要持续更新简历。当参与新项目、…

作者头像 李华