学习打卡——JavaScript第一天

Tryharder1028 2021-11-23 15:15:20

JavaScript 能够改变 HTML 内容

getElementById() 是多个 JavaScript HTML 方法之一。

查找” id="demo" 的 HTML 元素,并把元素内容(innerHTML)更改为 "Hello JavaScript":

document.getElementById("demo").innerHTML = "Hello JavaScript";

JavaScript 同时接受双引号和单引号

document.getElementById("demo").innerHTML = 'Hello JavaScript';

JavaScript 能够改变 HTML 样式 (CSS)

改变 HTML 元素的样式,是改变 HTML 属性的一种变种:

document.getElementById("demo").style.fontSize = "25px";

JavaScript 能够隐藏 HTML 元素

可通过改变 display 样式来隐藏 HTML 元素:

document.getElementById("demo").style.display="none";

JavaScript 能够显示 HTML 元素

可通过改变 display 样式来显示隐藏的 HTML 元素:

document.getElementById("demo").style.display="block";

<script>标签

在 HTML 中 JavaScript 代码必须位于<script>与</script>标签之间

<script>
document.getElementById("demo").innerHTML = "我的第一段 JavaScript";
</script>

JavaScript函数和事件

JavaScript 函数是一种JavaScript代码块,他可以在调用时被执行

<head> 或 <body> 中的 JavaScript

您能够在 HTML 文档中放置任意数量的脚本。

脚本可被放置与 HTML 页面的 <body> 或 <head> 部分中,或兼而有之。

<head> 中的 JavaScript

在本例中,JavaScript 函数被放置于 HTML 页面的 <head> 部分。

该函数会在按钮被点击时调用:

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>
</head>

<body>

<h1>一张网页</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">试一试</button>

</body>
</html>

<body> 中的 JavaScript

在本例中,JavaScript 函数被放置于 HTML 页面的 <body> 部分。

该函数会在按钮被点击时调用:

<!DOCTYPE html>
<html>
<body> 

<h1>A Web Page</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">试一试</button>

<script>
function myFunction() {
   document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>

</body>
</html>

外部脚本的优势

  • 分离了HTML和代码
  • 使HTML和JavaScript更易于阅读和维护
  • 已缓存的JavaScript文件可加速页面加载
  • 外部引用
  • 可通过完整的URL或相对于当前网页的路径引用外部脚本:

 

...全文
4 7 收藏 回复
写回复
回复
切换为时间正序
请发表友善的回复…
发表回复
相关推荐
发帖
编程新手村
创建于2021-11-01

6.5w+

社区成员

灌水发信息每周送书 灌水发干货每周送惊喜 谁最水过年送大礼 谁最硬核过年送大礼 谁最贡献过年送大礼
帖子事件
创建了帖子
2021-11-23 15:15
社区公告

我们“新手村”社区就是大家的孵化器

你们学习,我来评分

每周最高分送一本书

每月第四周送一份机械键盘

咱们新手村使用一切狂暴手段让优秀的人得到奖励