JavaScript网页代码大全，哪些代码最实用？-网页设计-锦华智联科技

基础语法与核心概念：构建JS程序的基石。
DOM 操作：让网页“活”起来的关键。
事件处理：响应用户交互。
异步编程：现代JS的必备技能。
实用功能代码片段：可以直接复用的“轮子”。
现代 JavaScript (ES6+)：提升代码质量和效率的新特性。
常用库与框架：站在巨人的肩膀上。
完整项目示例：将所有知识融会贯通。

基础语法与核心概念

变量与数据类型

// 使用 let 和 const 声明变量 (推荐)
let name = "张三"; // 可以修改
const age = 25;    // 常量，不可修改
// 基本数据类型
let stringType = "Hello, World!";
let numberType = 100;
let booleanType = true;
let nullType = null;
let undefinedType = undefined;
// 引用数据类型
let arrayType = [1, 2, 3, "four"];
let objectType = { key: "value", user: { name: "李四" } };
let functionType = () => { console.log("I am a function"); };

函数

// 函数声明
function greet(name) {
  return `你好, ${name}!`;
}
// 箭头函数 (ES6)
const add = (a, b) => a + b;
// 函数调用
console.log(greet("王五")); // 输出: 你好, 王五!
console.log(add(5, 3));     // 输出: 8

条件语句

let score = 85;
if (score >= 90) {
  console.log("优秀");
} else if (score >= 60) {
  console.log("及格");
} else {
  console.log("不及格");
}
// 三元运算符
let message = score >= 60 ? "及格" : "不及格";
console.log(message);

循环

// for 循环
for (let i = 0; i < 5; i++) {
  console.log(`for循环: ${i}`);
}
// for...of 循环 (遍历数组/字符串)
let fruits = ["苹果", "香蕉", "橙子"];
for (const fruit of fruits) {
  console.log(`我喜欢吃: ${fruit}`);
}
// for...in 循环 (遍历对象属性)
let user = { name: "赵六", age: 30 };
for (const key in user) {
  console.log(`${key}: ${user[key]}`);
}

数组方法

let numbers = [1, 2, 3, 4, 5];
// map: 创建一个新数组
let doubled = numbers.map(n => n * 2); // [2, 4, 6, 8, 10]
// filter: 过滤数组
let evens = numbers.filter(n => n % 2 === 0); // [2, 4]
// find: 查找第一个匹配元素
let firstEven = numbers.find(n => n % 2 === 0); // 2
// reduce: 将数组reduce为单个值
let sum = numbers.reduce((acc, current) => acc + current, 0); // 15

DOM 操作

DOM (Document Object Model) 是HTML和XML文档的编程接口。

（图片来源网络，侵删）

获取元素

// 通过ID获取 (最快)
const header = document.getElementById('main-header');
// 通过类名获取 (返回HTMLCollection)
const items = document.getElementsByClassName('list-item');
// 通过标签名获取 (返回HTMLCollection)
const paragraphs = document.getElementsByTagName('p');
// 通过CSS选择器获取 (返回第一个匹配的元素)
const firstButton = document.querySelector('.btn-primary');
// 通过CSS选择器获取 (返回所有匹配的元素，NodeList)
const allButtons = document.querySelectorAll('button');

与样式

const title = document.querySelector('h1');
// 修改文本内容textContent = "新标题";
// 修改HTML内容innerHTML = "<em>斜体的新标题</em>";
// 修改样式style.color = "blue";style.fontSize = "2rem";

修改元素结构

const parent = document.getElementById('parent');
const child = document.createElement('div');
child.textContent = "我是新创建的子元素";
child.className = "new-child";
// 添加子元素到末尾
parent.appendChild(child);
// 在特定位置插入元素
const referenceNode = document.getElementById('reference');
parent.insertBefore(child, referenceNode);
// 删除元素
child.remove();

事件处理

事件是用户或浏览器执行的某个动作。

添加事件监听器

const button = document.querySelector('#myButton');
// 方式一: 直接在HTML属性中写 (不推荐，关注点分离)
// <button onclick="alert('Clicked!')">点击我</button>
// 方式二: 使用 addEventListener (推荐)
button.addEventListener('click', function(event) {
  console.log('按钮被点击了!');
  console.log('事件对象:', event); // event对象包含事件相关信息
});
// 事件冒泡与捕获
// parent.addEventListener('click', () => console.log('Parent - Capturing'), true); // 捕获阶段
parent.addEventListener('click', () => console.log('Parent - Bubbling')); // 冒泡阶段 (默认)

常用事件

click: 鼠标点击
mouseover / mouseout: 鼠标移入 / 移出
keydown / keyup: 键盘按下 / 释放
submit: 表单提交
load: 页面或资源加载完成

异步编程

处理耗时操作（如网络请求），避免阻塞主线程。

回调函数

function fetchData(callback) {
  setTimeout(() => {
    const data = { user: "数据已加载" };
    callback(null, data); // 第一个参数通常是错误对象
  }, 1000);
}
fetchData((error, data) => {
  if (error) {
    console.error("出错了:", error);
  } else {
    console.log("获取数据成功:", data);
  }
});

Promises (更优雅的方式)

function fetchDataPromise() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true;
      if (success) {
        resolve({ user: "数据已加载" });
      } else {
        reject(new Error("网络错误"));
      }
    }, 1000);
  });
}
fetchDataPromise()
  .then(data => {
    console.log("获取数据成功:", data);
    return data.user;
  })
  .then(userName => {
    console.log("用户名是:", userName);
  })
  .catch(error => {
    console.error("出错了:", error.message);
  });

Async/Await (基于Promise的语法糖)

async function getData() {
  try {
    console.log("开始获取数据...");
    const data = await fetchDataPromise(); // 等待Promise解决
    console.log("获取数据成功:", data);
    const userName = data.user;
    console.log("用户名是:", userName);
  } catch (error) {
    console.error("出错了:", error.message);
  }
}
getData();

实用功能代码片段

防抖

// 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
function debounce(func, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}
window.addEventListener('resize', debounce(() => {
  console.log("窗口大小已改变，执行耗时操作...");
}, 300));

节流

// 每隔固定时间执行一次函数，不管事件触发多频繁。
function throttle(func, limit) {
  let inThrottle;
  return function(...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}
window.addEventListener('scroll', throttle(() => {
  console.log("滚动事件触发...");
}, 200));

复制到剪贴板

async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log('文本已复制到剪贴板');
  } catch (err) {
    console.error('复制失败:', err);
  }
}
copyToClipboard("Hello, Clipboard!");

现代 JavaScript (ES6+)

解构赋值

// 数组解构
const [a, b] = [1, 2];
console.log(a, b); // 1 2
// 对象解构
const { name, age } = { name: "钱七", age: 40 };
console.log(name, age); // 钱七 40

模板字符串

const user = "孙八";
let message = `你好, ${user}! 今天是 ${new Date().toLocaleDateString()}.`;

类

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} 发出了声音.`);
  }
}
class Dog extends Animal {
  speak() {
    console.log(`${this.name} 汪汪叫!`);
  }
}
const dog = new Dog("旺财");
dog.speak(); // 输出: 旺财 汪汪叫!

模块化

math.js

export const add = (a, b) => a + b;
export const PI = 3.14159;

main.js

（图片来源网络，侵删）

import { add, PI } from './math.js';
console.log(add(2, 3)); // 5
console.log(PI);        // 3.14159

常用库与框架

jQuery: 简化DOM操作和事件处理的库（在旧项目中仍很常见）。
Lodash: 提供了许多实用的函数工具集，如深拷贝、防抖节流等。
Axios: 一个流行的、基于Promise的HTTP客户端，用于发送API请求。
React: 用于构建用户界面的JavaScript库，由Facebook开发。
Vue.js: 渐进式JavaScript框架，易学易用。
Node.js: 让JavaScript运行在服务器端的平台。

完整项目示例：待办事项列表

这是一个将上述知识结合起来的简单网页应用。

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">待办事项列表</title>
  <style>
    body { font-family: sans-serif; max-width: 600px; margin: 2em auto; }
    #todo-list { list-style: none; padding: 0; }
    #todo-list li { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid #ccc; }
    .delete-btn { color: red; cursor: pointer; }
  </style>
</head>
<body>
  <h1>我的待办事项</h1>
  <input type="text" id="new-todo" placeholder="输入新任务...">
  <button id="add-btn">添加</button>
  <ul id="todo-list"></ul>
  <script src="app.js"></script>
</body>
</html>

app.js

// 1. 获取DOM元素
const todoInput = document.getElementById('new-todo');
const addButton = document.getElementById('add-btn');
const todoList = document.getElementById('todo-list');
// 2. 初始化待办事项数组
let todos = [];
// 3. 从localStorage加载数据
function loadTodos() {
  const savedTodos = localStorage.getItem('todos');
  if (savedTodos) {
    todos = JSON.parse(savedTodos);
    renderTodos();
  }
}
// 4. 保存数据到localStorage
function saveTodos() {
  localStorage.setItem('todos', JSON.stringify(todos));
}
// 5. 渲染待办事项列表
function renderTodos() {
  // 清空列表
  todoList.innerHTML = '';
  // 遍历数组并创建列表项
  todos.forEach((todo, index) => {
    const li = document.createElement('li');
    li.innerHTML = `
      <span>${todo.text}</span>
      <span class="delete-btn" data-index="${index}">删除</span>
    `;
    todoList.appendChild(li);
  });
}
// 6. 添加新待办事项
addButton.addEventListener('click', () => {
  const text = todoInput.value.trim();
  if (text) {
    todos.push({ text }); // 添加到数组
    todoInput.value = ''; // 清空输入框
    saveTodos();         // 保存
    renderTodos();       // 重新渲染
  }
});
// 7. 使用事件委托处理删除事件
todoList.addEventListener('click', (event) => {
  if (event.target.classList.contains('delete-btn')) {
    const index = event.target.getAttribute('data-index');
    todos.splice(index, 1); // 从数组中删除
    saveTodos();            // 保存
    renderTodos();          // 重新渲染
  }
});
// 8. 初始化应用
loadTodos();

这份“大全”涵盖了从最基础的语法到实际项目开发的各个方面，真正的“大全”是不断学习和实践的积累，建议您：