【前端基础】HTML + CSS + JavaScript 快速入门（三）：JS 与 jQuery 实战
【前端基础】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 是弱类型语言，定义变量不需要指定具体类型。
定义变量：
var name ="张三";// 老语法let age =18;// 新语法（推荐）constPI=3.14;// 定义常量常见数据类型：
- number: 数字（整数、小数都是 number）。
- string: 字符串（单引号、双引号皆可）。
- boolean: 布尔值 (
true,false)。 - undefined: 变量声明了但未赋值。
- null: 空值。
2.4 函数
函数是封装代码块的容器。
// 定义函数functionadd(x, y){return x + y;}// 调用函数let sum =add(10,20); console.log(sum);// 302.5 对象
JS 中的对象类似于 Java 中的 Map 或实体类，使用 {} 表示。
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 获取元素
// querySelector 使用 CSS 选择器语法let div = document.querySelector('.box');let input = document.querySelector('#myInput');3.2 事件 (Event)
事件是用户和页面交互的瞬间（如点击、键盘按下）。
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 链接引入。
<scriptsrc="https://code.jquery.com/jquery-3.6.0.min.js"></script>4.2 基本用法
jQuery 的核心对象是 $。语法：$(selector).action()
// 获取元素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 事件绑定
$('#btn').click(function(){ console.log("点击了");$(this).hide();// 隐藏当前按钮});5. 综合案例：表白墙
我们将结合 HTML, CSS, jQuery 实现一个简单的留言板功能。
5.1 页面布局 (HTML)
<divclass="container"><h1>表白墙</h1><p>输入后点击提交, 会将信息显示在表格中</p><divclass="row"><span>谁: </span><inputclass="edit"type="text"placeholder="你的名字"></div><divclass="row"><span>对谁: </span><inputclass="edit"type="text"placeholder="对方名字"></div><divclass="row"><span>说什么: </span><inputclass="edit"type="text"placeholder="表白内容"></div><divclass="row"><inputtype="button"value="提交"class="submit"></div><divclass="message-board"></div></div>5.2 样式设计 (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 -> 追加到留言区 -> 清空输入框。
$(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> ${from} 对 ${to} 说: ${msg} </div> `;// 3. 追加到留言板$('.container').append(htmlStr);// 4. 清空输入框$('.edit').val('');});});
6. 总结
到此为止，我们已经完成了前端“三剑客”的入门学习：
- HTML 搭建了页面的骨架。
- CSS 赋予了页面美观的外表和布局。
- JavaScript/jQuery 注入了灵魂，让页面可以响应用户的操作。
虽然现代前端开发通常使用 Vue 或 React 等框架，但这些基础知识是万丈高楼的地基，务必熟练掌握！
