初始最小 js - Javascript (1)

📌 相关文章

📜 初始最小 js - Javascript (1)

📅 最后修改于: 2023-12-03 15:07:13.367000 🧑 作者: Mango

初始最小 JS - Javascript

Javascript，又称作JS，是一种轻量级、解释性的编程语言。它被广泛应用于Web前端开发，可以帮助网站实现动态交互效果。本文将介绍JS的初始最小使用方法。

最小代码

JS的最小使用方法是使用script标签直接在HTML文件中编写代码。下面是一个最小的JS代码片段：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>最小JS示例</title>
  </head>
  <body>
    <script>
      console.log('Hello World!');
    </script>
  </body>
</html>

上述代码中，我们使用了script标签将JS代码包裹起来，console.log('Hello World!')会在控制台输出"Hello World!"。

选择器

JS的一个重要功能是操作HTML页面。我们通常需要通过选择器（Selector）来选择页面中特定的元素。下面是几个常用的选择器：

document.getElementById(id)：通过id选择元素。
document.getElementsByClassName(class)：通过类名选择元素，返回一个数组。
document.getElementsByTagName(tagName)：通过标签选择元素，返回一个数组。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>使用选择器操作元素</title>
  </head>
  <body>
    <h1 id="title">这是一个标题</h1>
    <p class="content">这是一段内容</p>
    <p class="content">这是另一段内容</p>
    <script>
      var title = document.getElementById('title');
      console.log(title.innerText);
      
      var contents = document.getElementsByClassName('content');
      for(var i = 0; i < contents.length; i++){
        console.log(contents[i].innerText);
      }
    </script>
  </body>
</html>

上述代码中，我们先通过id选择器获取了标题元素，再通过innerText获取了元素的文本内容。接下来，我们使用类名选择器获取了所有class为"content"的元素，使用循环遍历了这些元素，并打印了它们的文本内容。

事件

JS的另一个重要功能是处理事件。我们可以使用addEventListener()方法给元素添加事件函数，当该元素发生指定的事件时，会触发该函数。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>处理事件</title>
  </head>
  <body>
    <button id="btn">点击我！</button>
    <script>
      var btn = document.getElementById('btn');
      btn.addEventListener('click', function() {
        console.log('按钮被点击了！');
      });
    </script>
  </body>
</html>

上述代码中，我们使用id选择器获取了按钮元素，然后使用addEventListener()方法给它添加了一个点击事件函数。当用户点击按钮时，会在控制台输出"按钮被点击了！"。

结论

在本文中，我们介绍了JS的初始最小使用方法，包括最小代码、选择器和事件。这仅仅是JS功能的冰山一角，希望能为初学者提供一些帮助。