news 2026/2/10 8:37:10

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/2/3 4:09:51

27、文档格式化与打印:Unix/Linux 实用指南

文档格式化与打印:Unix/Linux 实用指南 文档格式化系统 在处理小型简单的文本任务时,简单的文本格式化工具表现出色。但对于大型任务,Unix 系统提供了更强大的工具,这也是它在技术和科学用户中广受欢迎的原因之一。实际上,文档处理对 Unix 的发展起到了重要作用。 早期…

作者头像 李华
网站建设 2026/2/6 17:18:41

36、深入探索Shell编程:位置参数、循环与字符串处理

深入探索Shell编程:位置参数、循环与字符串处理 1. 位置参数的奥秘 位置参数在Shell脚本中扮演着重要角色,它允许我们在脚本执行时传递参数。例如,当我们传递 word words with spaces 作为参数时,不同的引用方式会产生不同的结果: | 引用方式 | 结果 | | ---- | ---…

作者头像 李华
网站建设 2026/2/9 5:49:06

NX UG 12.0 安装教程:安全获取 + 避坑指南,零基础也能搞定

从事机械设计、模具开发的从业者&#xff0c;对 NX UG 12.0 这款软件一定不陌生&#xff0c;它凭借强大的建模、装配和仿真功能&#xff0c;成为工业设计领域的实用工具。 想要顺利上手这款软件&#xff0c;安全获取安装包和掌握正确安装步骤很关键。安装时建议选择英文路径&a…

作者头像 李华
网站建设 2026/2/7 0:12:58

RN Navigation vs Vue Router:从架构底层到工程实践的深度对比

[toc] 前言&#xff1a;这不是“谁更好”&#xff0c;而是“谁解决的问题不同” 很多团队在同时做 Web 和 RN 项目时&#xff0c;都会下意识问一句&#xff1a;Vue Router 这套东西&#xff0c;在 RN 里能不能也照着来&#xff1f;如果你只是做 Demo&#xff0c;答案是「看起来…

作者头像 李华