html 中如何写js代码

在HTML中编写JavaScript代码有多种方法，以下是一些常见的方法：

（图片来源网络，侵删）

1、内联JavaScript代码

在HTML文件中，可以使用<script>标签将JavaScript代码嵌入到HTML文档中，这种方法简单易用，但可能导致HTML文件变得混乱。

示例：

<!DOCTYPE html>
<html>
<head>
    <title>内联JavaScript示例</title>
</head>
<body>
    <h1>内联JavaScript示例</h1>
    <button onclick="alert('Hello, World!')">点击我</button>
    <script>
        // 在这里编写JavaScript代码
        document.write("这是内联JavaScript代码");
    </script>
</body>
</html>

2、外部JavaScript文件

将JavaScript代码保存在一个单独的文件中，然后在HTML文件中引用该文件，这种方法可以使HTML文件保持整洁，同时便于管理和重用JavaScript代码。

步骤：

a. 创建一个名为script.js的JavaScript文件，并将以下代码添加到其中：

function sayHello() {
    alert('Hello, World!');
}

b. 在HTML文件中，使用<script>标签引用script.js文件：

<!DOCTYPE html>
<html>
<head>
    <title>外部JavaScript示例</title>
</head>
<body>
    <h1>外部JavaScript示例</h1>
    <button onclick="sayHello()">点击我</button>
    <script src="script.js"></script>
</body>
</html>

3、事件处理程序

在HTML元素中，可以使用onclick、onmouseover等属性为元素添加事件处理程序，当用户与元素交互时，浏览器会自动调用相应的JavaScript函数。

示例：

<!DOCTYPE html>
<html>
<head>
    <title>事件处理程序示例</title>
    <script>
        function showMessage(message) {
            alert(message);
        }
    </script>
</head>
<body>
    <h1>事件处理程序示例</h1>
    <button onclick="showMessage('Hello, World!')">点击我</button>
</body>
</html>

4、DOM操作

JavaScript可以操作HTML文档的DOM（文档对象模型），从而实现对页面元素的增删改查等操作，可以使用getElementById、getElementsByClassName等方法获取页面元素，然后修改其属性或内容。

示例：

<!DOCTYPE html>
<html>
<head>
    <title>DOM操作示例</title>
    <script>
        function changeText() {
            var element = document.getElementById("myElement");
            element.innerHTML = "文本已更改";
        }
    </script>
</head>
<body>
    <h1 id="myElement">原始文本</h1>
    <button onclick="changeText()">点击我</button>
</body>
</html>

5、jQuery库的使用（可选）

jQuery是一个流行的JavaScript库，简化了DOM操作和事件处理，要使用jQuery，首先需要在HTML文件中引入jQuery库，然后可以使用jQuery选择器和方法来操作页面元素。

示例：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery示例</title>
    <!引入jQuery库 >
    <script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
    <script>
        $(document).ready(function() { // 确保文档加载完成后执行脚本 $("button").click(function() { // 为按钮添加点击事件 $("h1").text("文本已更改"); // 修改标题文本 }); }); // 结束匿名函数 $(document).ready() 和 $() 是jQuery特有的语法，用于确保文档加载完成后执行脚本和选择元素，在这个示例中，我们为按钮添加了一个点击事件，当用户点击按钮时，会修改标题文本，注意，这里的代码需要放在一个外部JavaScript文件中，或者使用在线编辑器运行。

原创文章，作者：酷盾叔，如若转载，请注明出处：https://www.kdun.com/ask/372057.html

html 中如何写js代码

发表回复