关键知识点速览DOM 操作与选择器利用$(#id)或$(.class)快速抓取页面元素比原生 JavaScriptdocument.getElementById简洁得多。事件绑定通过$(#btn).click(function() { ... })轻松处理点击、提交等交互事件。AJAX 异步交互通过$.ajax()或$.post()向 Servlet 发送请求实现页面不刷新的情况下查询数据库、提交表单或更新数据。实训项目中的典型协作流程前端JSP/HTML jQuery用户点击按钮jQuery 收集表单数据并通过 AJAX 异步发送给后台。后台Servlet Tomcat接收请求并调用 Java 业务代码。数据库MySQL Navicat使用 SQL 进行数据增删改查。数据返回Servlet 将结果打包成 JSON 格式返回jQuery 解析并在前端渲染显示。jQuery 的核心思想就是“先找到元素再对其做动作”。核心公式$(selector).action();$jQuery 的标志符号本质是一个全局函数。selector寻找 HTML 元素的选择器语法和 CSS 选择器完全一致。action()要对选中的元素执行的操作或事件。三大基础语法块1. 入口函数页面加载完毕后执行为了防止 JS 代码在 HTML 元素还没加载出来时就运行导致报错代码通常写在入口函数里$(document).ready(function() { // 你的 jQuery 代码写在这里 }); // 简写形式最常用 $(function() { // 你的 jQuery 代码写在这里 });2. 核心选择器怎么找元素ID 选择器$(#myId)—— 匹配div idmyIdClass 选择器$(.myClass)—— 匹配div classmyClass标签选择器$(p)—— 匹配所有p标签组合选择器$(div, p)或$(#btn.active)3. 常用动作与事件找完之后干什么文本与内容操作$(#title).text(新标题);修改纯文本$(#box).html(b加粗内容/b);修改包含 HTML 标签的内容CSS 样式操作$(#box).css(color, red);修改单个样式$(#box).addClass(active);添加 CSS 类名事件绑定JavaScript$(#btn).click(function() { alert(按钮被点击了); });学习 jQuery 只需要搞定 4 个核心环节引入文件 - 选对元素 - 绑定事件 - 改变内容/样式。第一步如何在 HTML 里引入 jQuery在使用 jQuery 前必须先通过script标签把它引入到网页中。通常有两种方式本地引入适合实训环境无网也能用HTMLscript srcjs/jquery.min.js/scriptCDN 在线引入适合平时快速练习HTMLscript srchttps://code.jquery.com/jquery-3.6.0.min.js/script jQuery
关键知识点速览DOM 操作与选择器利用$(#id)或$(.class)快速抓取页面元素比原生 JavaScriptdocument.getElementById简洁得多。事件绑定通过$(#btn).click(function() { ... })轻松处理点击、提交等交互事件。AJAX 异步交互通过$.ajax()或$.post()向 Servlet 发送请求实现页面不刷新的情况下查询数据库、提交表单或更新数据。实训项目中的典型协作流程前端JSP/HTML jQuery用户点击按钮jQuery 收集表单数据并通过 AJAX 异步发送给后台。后台Servlet Tomcat接收请求并调用 Java 业务代码。数据库MySQL Navicat使用 SQL 进行数据增删改查。数据返回Servlet 将结果打包成 JSON 格式返回jQuery 解析并在前端渲染显示。jQuery 的核心思想就是“先找到元素再对其做动作”。核心公式$(selector).action();$jQuery 的标志符号本质是一个全局函数。selector寻找 HTML 元素的选择器语法和 CSS 选择器完全一致。action()要对选中的元素执行的操作或事件。三大基础语法块1. 入口函数页面加载完毕后执行为了防止 JS 代码在 HTML 元素还没加载出来时就运行导致报错代码通常写在入口函数里$(document).ready(function() { // 你的 jQuery 代码写在这里 }); // 简写形式最常用 $(function() { // 你的 jQuery 代码写在这里 });2. 核心选择器怎么找元素ID 选择器$(#myId)—— 匹配div idmyIdClass 选择器$(.myClass)—— 匹配div classmyClass标签选择器$(p)—— 匹配所有p标签组合选择器$(div, p)或$(#btn.active)3. 常用动作与事件找完之后干什么文本与内容操作$(#title).text(新标题);修改纯文本$(#box).html(b加粗内容/b);修改包含 HTML 标签的内容CSS 样式操作$(#box).css(color, red);修改单个样式$(#box).addClass(active);添加 CSS 类名事件绑定JavaScript$(#btn).click(function() { alert(按钮被点击了); });学习 jQuery 只需要搞定 4 个核心环节引入文件 - 选对元素 - 绑定事件 - 改变内容/样式。第一步如何在 HTML 里引入 jQuery在使用 jQuery 前必须先通过script标签把它引入到网页中。通常有两种方式本地引入适合实训环境无网也能用HTMLscript srcjs/jquery.min.js/scriptCDN 在线引入适合平时快速练习HTMLscript srchttps://code.jquery.com/jquery-3.6.0.min.js/script