jquery实现简单的网页-网页设计-锦华智联科技

这个例子将涵盖 jQuery 的核心功能：

DOM 选择：选取页面元素。
事件处理：响应用户的点击操作。
样式操作：动态地修改 CSS 类和样式。
内容操作：动态地修改文本内容。

最终效果预览

浅色模式 (默认)
- 一个清晰的白色背景,深色文字。
- 一个“切换到深色模式”的按钮。
深色模式
- 一个护眼的深色背景,浅色文字。
- 一个“切换到浅色模式”的按钮。

第一步：准备工作

创建项目文件 在你的电脑上创建一个文件夹，jquery-demo，在里面创建三个文件：
- index.html (网页结构)
- style.css (网页样式)
- script.js (jQuery 代码)
引入 jQuery 最简单的方式是通过 CDN (Content Delivery Network) 在 HTML 文件中引入 jQuery，这样你就不需要下载任何文件。

打开 index.html，在 <head> 标签内添加以下代码：
```
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
```
注意：我们通常把 <script> 标签放在 </body> 标签结束之前，这样可以确保在脚本执行时，页面的所有 HTML 元素都已经加载完毕。

第二步：编写 HTML 结构 (`index.html`)

这个文件定义了我们网页的内容和结构。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">jQuery 简单网页示例</title>
    <!-- 引入我们自己的 CSS 文件 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>我的博客</h1>
            <!-- 这是我们的切换按钮 -->
            <button id="theme-toggle-btn">切换到深色模式</button>
        </header>
        <main>
            <article>
                <h2>欢迎来到我的博客</h2>
                <p>这是一个使用 jQuery 实现的简单网页，你可以点击右上角的按钮来切换页面的主题（深色/浅色模式）。</p>
                <p>jQuery 的强大之处在于它能让你用更少的代码完成更多的操作，我们只需要几行代码就能实现这个主题切换功能，而无需编写复杂的 JavaScript 原生代码。</p>
                <p>希望你喜欢这个小小的示例！</p>
            </article>
        </main>
        <footer>
            <p>&copy; 2025 我的博客. 保留所有权利.</p>
        </footer>
    </div>
    <!-- 引入 jQuery 库 -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <!-- 引入我们自己的 JavaScript 文件，放在 jQuery 之后 -->
    <script src="script.js"></script>
</body>
</html>

关键点:

我们给切换按钮设置了一个 id="theme-toggle-btn"，这样 jQuery 就能轻松地找到它。
我们用一个 div class="container" 包裹了所有内容，方便我们后续对整体布局进行样式控制。

第三步：编写 CSS 样式 (`style.css`)

这个文件负责网页的外观,我们将为浅色和深色模式分别定义样式。

/* --- 基础样式 (适用于两种模式) --- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    transition: background-color 0.3s ease, color 0.3s ease; /* 添加平滑过渡效果 */
}
.container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
button {
    padding: 8px 15px;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    color: #333;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
button:hover {
    background-color: #e0e0e0;
}
footer {
    text-align: center;
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid #eee;
    font-size: 0.9em;
    color: #777;
}
/* --- 浅色模式 (默认) --- */
body {
    background-color: #f4f4f4;
    color: #333;
}
.container {
    background-color: #fff;
}
button {
    border-color: #ccc;
}
/* --- 深色模式 --- */
body.dark-mode {
    background-color: #222;
    color: #f0f0f0;
}
body.dark-mode .container {
    background-color: #333;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
body.dark-mode header {
    border-bottom-color: #444;
}
body.dark-mode button {
    background-color: #444;
    color: #f0f0f0;
    border-color: #555;
}
body.dark-mode button:hover {
    background-color: #555;
}
body.dark-mode footer {
    border-top-color: #444;
    color: #aaa;
}

关键点:

我们使用 body.dark-mode 作为父选择器，只有当 <body> 标签拥有 dark-mode 这个类时，其下的样式才会生效。
transition 属性让背景色和文字颜色的变化有一个平滑的动画效果，提升用户体验。

第四步：编写 jQuery 逻辑 (`script.js`)

这是实现交互功能的核心部分,当用户点击按钮时，jQuery 会执行这里的代码。

// 等待整个 HTML 文档加载完毕后再执行 jQuery 代码
$(document).ready(function() {
    // 1. 选择切换按钮，并监听它的点击事件
    $('#theme-toggle-btn').on('click', function() {
        // 2. 检查 body 是否已经有 'dark-mode' 类
        if ($('body').hasClass('dark-mode')) {
            // 如果有，说明当前是深色模式，我们需要切换回浅色模式
            $('body').removeClass('dark-mode'); // 移除 'dark-mode' 类
            $(this).text('切换到深色模式');    // 更改按钮文本
        } else {
            // 如果没有，说明当前是浅色模式，我们需要切换到深色模式
            $('body').addClass('dark-mode');    // 添加 'dark-mode' 类
            $(this).text('切换到浅色模式');    // 更改按钮文本
        }
    });
});

代码逐行解释:

$(document).ready(function() { ... });

这是 jQuery 中最常用的写法之一，它的作用是确保所有的 HTML 元素都已经被浏览器加载和解析完毕后，再执行大括号里的代码，这可以防止在元素还未准备好时就尝试操作它们而导致的错误。
$('#theme-toggle-btn').on('click', function() { ... });
- $('#theme-toggle-btn')：这是 jQuery 的核心——选择器。是 jQuery 的别名，表示选择 id 为 theme-toggle-btn 的元素，这相当于 JavaScript 原生的 document.getElementById('theme-toggle-btn')。
- .on('click', function() { ... })：这是一个事件监听器，它告诉 jQuery：“嘿，当用户被我选中的那个按钮（#theme-toggle-btn）点击时，就执行这个 function() 里的代码。”
if ($('body').hasClass('dark-mode')) { ... } else { ... }
- $('body')：选择 <body> 元素。
- .hasClass('dark-mode')：检查这个 <body> 元素是否拥有一个名为 dark-mode 的 CSS 类，如果拥有，它返回 true；否则返回 false。
- 这是一个条件判断,用来判断当前是深色模式还是浅色模式。
$('body').removeClass('dark-mode');
- 如果条件为真（当前是深色模式），就从 <body> 元素上移除 dark-mode 类，根据我们写的 CSS，移除后页面就会变回浅色模式。
$(this).text('切换到深色模式');
- $(this)：在事件处理函数中，this 指向触发该事件的元素，它就是被点击的那个按钮 #theme-toggle-btn。
- .text('...')：修改该元素的文本内容。
$('body').addClass('dark-mode');
- 如果条件为假（当前是浅色模式），就给 <body> 元素添加 dark-mode 类，根据 CSS，页面会立即变成深色模式。
$(this).text('切换到浅色模式');

更新按钮的文本,提示用户下一次点击会做什么。

第五步：运行和测试

确保你的 jquery-demo 文件夹里有这三个文件。
用浏览器（如 Chrome, Firefox, Edge）打开 index.html 文件。
你会看到浅色模式的页面。
点击右上角的“切换到深色模式”按钮，观察页面是否平滑地切换到深色模式，并且按钮文字也改变了。
再次点击按钮,确认是否能切换回浅色模式。

恭喜！你已经成功使用 jQuery 实现了一个具有交互功能的简单网页！这个例子很好地展示了 jQuery 如何简化 DOM 操作和事件处理。

jquery实现简单的网页

最终效果预览

第一步：准备工作

第二步：编写 HTML 结构 (index.html)

第三步：编写 CSS 样式 (style.css)

第四步：编写 jQuery 逻辑 (script.js)

第五步：运行和测试

第二步：编写 HTML 结构 (`index.html`)

第三步：编写 CSS 样式 (`style.css`)

第四步：编写 jQuery 逻辑 (`script.js`)