📅 最后修改于: 2023-12-03 15:01:19.487000 🧑 作者: Mango
在网页开发中，JavaScript （简称JS）是一种广泛使用的脚本语言，它通过与HTML和CSS协作，动态地改变页面的内容、增加交互性等。在HTML页面中如何获取并使用JS呢？本篇文章将给大家讲解一些方法。
最常用的是在HTML文件中通过<script>标签来引入外部的JS文件。下面的代码演示了如何把一个外部的JS文件引入到HTML中：
<!DOCTYPE html>
<html>
<head>
<title>引入外部JS文件</title>
</head>
<body>
hello world!
<script src="js/myscript.js"></script>
</body>
</html>
在上面的代码中，我们使用<script>标签来加载一个名称为myscript.js的JS文件。这里JS文件的路径是相对于当前HTML文件的。
除了从外部文件引入JS代码外，我们还可以在HTML的<script>标签中内嵌JS代码。下面的代码演示了如何在HTML中嵌入JS代码：
<!DOCTYPE html>
<html>
<head>
<title>内嵌JS代码</title>
</head>
<body>
hello world!
<script>
alert("hello world!");
</script>
</body>
</html>
在上面的代码中，我们在<script>标签中直接写了一条JS代码，这里的代码将会在页面加载完成后立即执行。
在HTML中我们可以通过<script>标签定义外部的JS函数，并在页面中调用这些函数。下面的代码演示了如何在HTML中调用一个外部定义的JS函数：
<!DOCTYPE html>
<html>
<head>
<title>调用外部JS函数</title>
<script src="js/myscript.js"></script>
</head>
<body>
hello world!
<button onclick="showMessage()">点击显示消息</button>
</body>
</html>
在上面的代码中，我们在<head>标签中引入了一个名为myscript.js的JS文件，并在<body>标签中添加了一个按钮，点击按钮后会触发名为showMessage()的JS函数，而这个函数就是在myscript.js文件中定义的。
JS框架是一些封装了常用JS功能的函数和工具库，它们可以让我们更加简洁高效地编写JavaScript代码。目前最流行的JS框架包括jQuery、Vue.js、AngularJS等。下面的代码演示了在HTML中使用jQuery框架：
<!DOCTYPE html>
<html>
<head>
<title>使用jQuery框架</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<h1>使用jQuery框架</h1>
<div id="content">
<p>这是一个段落</p>
<ul>
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
<li>第4项</li>
</ul>
</div>
<script>
$(document).ready(function(){
$("#content ul li").css("color","red");
});
</script>
</body>
</html>
在上面的代码中，我们在<head>标签中引入了jQuery框架，并在<body>标签中使用了jQuery的一个方法$(document).ready()，当页面加载完成后这个方法将被调用，这个方法里面的代码将把id为content下的ul列表中所有的li元素的字体颜色设置成红色。
以上就是HTML获取JS代码的一些方法和技巧。当然还有很多其他的方法，需要大家自己不断探索和学习。