【前端基础】HTML + CSS + JavaScript 快速入门（三）：JS 与 jQuery 实战

我的主页：寻星探路
个人专栏：《JAVA（SE）----如此简单！！！》《从青铜到王者，就差这讲数据结构！！！》
《数据库那些事！！！》《JavaEE 初阶启程记：跟我走不踩坑》
《JavaEE 进阶：从架构到落地实战》《测试开发漫谈》
《测开视角・力扣算法通关》《从 0 到 1 刷力扣：算法 + 代码双提升》
《Python 全栈测试开发之路》
没有人天生就会编程，但我生来倔强！！！

寻星探路的个人简介：

【前端基础】HTML + CSS + JavaScript 快速入门（三）：JS 与 jQuery 实战

摘要：这是前端基础系列的终章。我们将正式进入编程的世界，学习 JavaScript 的基础语法（变量、函数、对象），了解 DOM 操作，并使用 jQuery 库简化开发。最后，我们将综合运用 HTML+CSS+JS 实现一个具有交互功能的"表白墙"案例。
前置知识：HTML 结构与 CSS 样式基础。

1. JavaScript 简介

JavaScript (简称 JS) 是世界上最流行的编程语言之一。它是一种运行在客户端（浏览器）上的脚本语言。

HTML: 决定网页的结构（身体）。
CSS: 决定网页的样式（衣服）。
JavaScript: 决定网页的交互行为（动作，如点击、输入、弹窗）。

注意：JavaScript 和 Java 是两种完全不同的语言，只是名字雷同（就像雷锋和雷峰塔）。

2. JS 基础语法

2.1 书写位置

类似于 CSS，JS 也有多种写法：

内联：<button onclick="alert('hello')">点击</button>
内部：写在 <script> 标签中。
外部：<script src="tools.js"></script>

2.2 输入输出

alert("hello"); : 浏览器弹出警告框。
console.log("hello"); : 在控制台打印日志（开发调试常用）。
打开方式：F12 -> Console 面板。

2.3 变量与数据类型

JS 是弱类型语言，定义变量不需要指定具体类型。

定义变量：

javascript 复制代码

var name = "张三"; // 老语法
let age = 18;      // 新语法（推荐）
const PI = 3.14;   // 定义常量

常见数据类型：

number: 数字（整数、小数都是 number）。
string: 字符串（单引号、双引号皆可）。
boolean : 布尔值 (true, false)。
undefined: 变量声明了但未赋值。
null: 空值。

2.4 函数

函数是封装代码块的容器。

javascript 复制代码

// 定义函数
function add(x, y) {
    return x + y;
}

// 调用函数
let sum = add(10, 20);
console.log(sum); // 30

2.5 对象

JS 中的对象类似于 Java 中的 Map 或实体类，使用 {} 表示。

javascript 复制代码

let student = {
    name: "张三",
    age: 20,
    sayHello: function() {
        console.log("我是" + this.name);
    }
};

console.log(student.name); // 获取属性
student.sayHello();        // 调用方法

3. DOM 操作（原生 JS）

DOM (Document Object Model) 文档对象模型。浏览器将 HTML 页面解析成一棵树，JS 通过 DOM API 来操作这棵树。

3.1 获取元素

javascript 复制代码

// querySelector 使用 CSS 选择器语法
let div = document.querySelector('.box'); 
let input = document.querySelector('#myInput');

3.2 事件 (Event)

事件是用户和页面交互的瞬间（如点击、键盘按下）。

javascript 复制代码

let btn = document.querySelector('button');

btn.onclick = function() {
    alert('按钮被点击了！');
    // 修改元素内容
    btn.innerHTML = '已点击';
    // 修改元素样式
    btn.style.backgroundColor = 'red';
}

4. jQuery 快速上手

原生 JS 的 DOM 操作有时比较繁琐，jQuery 是一个 JS 库，它封装了常用的 DOM 操作，口号是 "Write Less, Do More"。

4.1 引入 jQuery

需要先下载或使用 CDN 链接引入。

html 复制代码

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

4.2 基本用法

jQuery 的核心对象是 $。语法：$(selector).action()

javascript 复制代码

// 获取元素
let div = $('.box'); // 获取类名为 box 的元素
let btn = $('#btn'); // 获取 id 为 btn 的元素

// 获取/设置内容
console.log(div.text());   // 获取文本
div.text('新内容');        // 设置文本
div.html('<b>加粗</b>');   // 设置 HTML

// 获取/设置属性
let src = $('img').attr('src');
$('img').attr('src', 'new.jpg');

// 获取/设置输入框的值
let val = $('input').val();
$('input').val('123');

4.3 事件绑定

javascript 复制代码

$('#btn').click(function() {
    console.log("点击了");
    $(this).hide(); // 隐藏当前按钮
});

5. 综合案例：表白墙

我们将结合 HTML, CSS, jQuery 实现一个简单的留言板功能。

5.1 页面布局 (HTML)

html 复制代码

<div class="container">
    <h1>表白墙</h1>
    <p>输入后点击提交, 会将信息显示在表格中</p>
    <div class="row">
        <span>谁: </span>
        <input class="edit" type="text" placeholder="你的名字">
    </div>
    <div class="row">
        <span>对谁: </span>
        <input class="edit" type="text" placeholder="对方名字">
    </div>
    <div class="row">
        <span>说什么: </span>
        <input class="edit" type="text" placeholder="表白内容">
    </div>
    <div class="row">
        <input type="button" value="提交" class="submit">
    </div>
    <div class="message-board"></div>
</div>

5.2 样式设计 (CSS)

css 复制代码

/* 通用样式重置 */
* { margin: 0; padding: 0; box-sizing: border-box; }

.container {
    width: 400px;
    margin: 50px auto; /* 居中 */
    text-align: center;
}

h1 { padding: 20px 0; }
p { font-size: 12px; color: #666; margin-bottom: 20px; }

.row {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

span { width: 80px; }

.edit {
    width: 200px;
    height: 30px;
}

.submit {
    width: 280px;
    height: 35px;
    color: white;
    background-color: orange;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.submit:active { background-color: #ff6600; } /* 点击变色 */

5.3 交互逻辑 (jQuery)

逻辑：点击提交 -> 获取输入框的值 -> 构造新的 div -> 追加到留言区 -> 清空输入框。

javascript 复制代码

$(function() {
    // 给提交按钮注册点击事件
    $(".submit").click(function() {
        // 1. 获取输入框内容
        // .eq(index) 选择第几个元素
        let from = $('.edit:eq(0)').val();
        let to = $('.edit:eq(1)').val();
        let msg = $('.edit:eq(2)').val();

        // 简单校验
        if (from == "" || to == "" || msg == "") {
            alert("请输入完整信息！");
            return;
        }

        // 2. 构造新的 HTML 结构
        let htmlStr = `
            <div style="margin-top:10px; border:1px solid #ccc; padding:10px;">
                ${from} 对 ${to} 说: ${msg}
            </div>
        `;

        // 3. 追加到留言板
        $('.container').append(htmlStr);

        // 4. 清空输入框
        $('.edit').val('');
    });
});

6. 总结

到此为止，我们已经完成了前端"三剑客"的入门学习：

HTML 搭建了页面的骨架。
CSS 赋予了页面美观的外表和布局。
JavaScript/jQuery 注入了灵魂，让页面可以响应用户的操作。

虽然现代前端开发通常使用 Vue 或 React 等框架，但这些基础知识是万丈高楼的地基，务必熟练掌握！