JavaScript 案例分享

以下是一些关于 JavaScript 的实用案例，希望对您的开发有所帮助。

1. 动态创建 DOM 元素

使用 JavaScript 可以轻松地动态创建 DOM 元素，以下是一个简单的例子：

// 创建一个 div 元素
var div = document.createElement('div');

// 设置 div 的文本内容
div.textContent = '这是一个动态创建的 div 元素。';

// 将 div 添加到 body 中
document.body.appendChild(div);

2. AJAX 获取数据

使用 JavaScript 的 XMLHttpRequest 对象可以发送 AJAX 请求，以下是一个获取 JSON 数据的例子：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    var data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};
xhr.send();

3. 事件监听

JavaScript 中的事件监听器可以帮助我们响应用户的操作，以下是一个点击按钮显示文本的例子：

var button = document.getElementById('myButton');
button.addEventListener('click', function() {
  var text = document.getElementById('myText');
  text.textContent = '按钮被点击了！';
});

4. 图片懒加载

懒加载可以减少页面加载时间，以下是一个简单的图片懒加载实现：

var images = document.querySelectorAll('img.lazy');

function loadImage(image) {
  image.src = image.getAttribute('data-src');
  image.onload = function() {
    image.removeAttribute('data-src');
  };
}

window.addEventListener('scroll', function() {
  images.forEach(function(image) {
    if (image.getBoundingClientRect().top < window.innerHeight) {
      loadImage(image);
    }
  });
});

loadImage(images[0]); // 首次加载第一张图片

5. 扩展阅读

更多关于 JavaScript 的知识，您可以访问我们的 JavaScript 教程。

JavaScript