当前位置：首页 > news >正文

jQuery 入门学习教程，从入门到精通， jQuery在HTML5中的应用(16）

news 2025/11/9 9:55:45

jQuery在HTML5中的应用

一、HTML5基础

1. HTML5文档结构

HTML5简化了DOCTYPE声明，引入语义化标签。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>HTML5基础</title>
</head>
<body><!-- 使用语义化标签 --><header>网站头部</header><nav>导航栏</nav><main><section>文章区块</section><aside>侧边栏</aside></main><footer>页脚</footer>
</body>
</html>

说明：<header>、<nav>、<section>、<aside>、<footer> 等为HTML5新增语义元素，有助于SEO和无障碍访问。

二、HTML5的新特性

1. 表单增强（新输入类型）

<form><input type="email" placeholder="请输入邮箱"> <!-- 邮箱验证 --><input type="url" placeholder="请输入网址">   <!-- URL格式验证 --><input type="number" min="1" max="100">      <!-- 数字范围限制 --><input type="date">                          <!-- 日期选择器 --><input type="color">                         <!-- 颜色选择器 -->
</form>

说明：这些新类型在支持的浏览器中会自动提供UI控件和基本验证。

三、浏览器对HTML5的支持检测

使用 Modernizr 或原生 JavaScript 检测

// 检测是否支持 Canvas
if (typeof document.createElement('canvas').getContext === 'function') {console.log('浏览器支持 Canvas');
} else {alert('您的浏览器不支持 HTML5 Canvas，请升级！');
}

说明：也可使用 Modernizr.canvas（需引入 Modernizr 库）进行统一检测。

四、jQuery与HTML5编程

jQuery操作HTML5元素示例

<input type="range" id="slider" min="0" max="100" value="50">
<p>当前值：<span id="value">50</span></p><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {$('#slider').on('input', function() {// 实时监听 range 滑块变化$('#value').text($(this).val());});
});
</script>

说明：input 事件比 change 更适合实时响应滑块变化。

五、显示文件上传的进度条（基于 HTML5 File API + jQuery）

案例：带进度条的文件上传

<input type="file" id="fileInput">
<progress id="progressBar" value="0" max="100" style="width:100%; display:none;"></progress><script>
$(document).ready(function() {$('#fileInput').on('change', function(e) {const file = e.target.files[0];if (!file) return;const formData = new FormData();formData.append('file', file);$.ajax({url: '/upload', // 后端接口type: 'POST',data: formData,processData: false,contentType: false,xhr: function() {const xhr = new window.XMLHttpRequest();xhr.upload.addEventListener("progress", function(evt) {if (evt.lengthComputable) {const percentComplete = evt.loaded / evt.total * 100;$('#progressBar').show().val(percentComplete);}}, false);return xhr;},success: function(res) {alert('上传成功！');}});});
});
</script>

说明：

FormData 用于构建表单数据。
xhr.upload.addEventListener("progress", ...) 监听上传进度。
<progress> 是HTML5原生进度条元素。

六、Canvas绘图

使用 jQuery 初始化 Canvas 并绘图

<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000;"></canvas><script>
$(document).ready(function() {const canvas = $('#myCanvas')[0]; // 获取原生 DOM 对象const ctx = canvas.getContext('2d');// 绘制矩形ctx.fillStyle = 'lightblue';ctx.fillRect(50, 50, 100, 80);// 绘制文字ctx.font = '20px Arial';ctx.fillText('Hello Canvas!', 200, 100);
});
</script>

说明：jQuery 不能直接操作 Canvas 上下文，需通过 [0] 获取原生元素。

七、jQuery + HTML5 实现图片旋转效果

利用 CSS3 transform + jQuery 动态控制

<img id="rotateImg" src="example.jpg" alt="可旋转图片" style="width:200px; transition: transform 0.3s;">
<button id="rotateBtn">旋转90°</button><script>
let angle = 0;
$('#rotateBtn').click(function() {angle += 90;$('#rotateImg').css('transform', `rotate(${angle}deg)`);
});
</script>

说明：虽然不直接使用 Canvas，但结合 HTML5 的 CSS3 支持实现动态效果。

八、基于HTML5播放声音的jQuery插件 audioPlay

自定义简易音频播放插件（模拟 audioPlay）

<audio id="myAudio" src="sound.mp3"></audio>
<button id="playBtn">播放</button>
<button id="pauseBtn">暂停</button><script>
$.fn.audioPlay = function(options) {const settings = $.extend({ volume: 1.0 }, options);return this.each(function() {const audio = this;audio.volume = settings.volume;$(this).data('audio', audio);});
};// 初始化
$('#myAudio').audioPlay({ volume: 0.8 });$('#playBtn').click(() => $('#myAudio')[0].play());
$('#pauseBtn').click(() => $('#myAudio')[0].pause());
</script>

说明：利用 HTML5 <audio> 元素的原生 API，通过 jQuery 封装插件增强复用性。

九、Web Storage 编程（localStorage / sessionStorage）

使用 jQuery 操作 localStorage

$(document).ready(function() {// 保存数据$('#saveBtn').click(function() {const name = $('#userName').val();localStorage.setItem('username', name);alert('已保存到本地存储！');});// 读取数据$('#loadBtn').click(function() {const name = localStorage.getItem('username');if (name) {$('#greeting').text(`欢迎回来，${name}！`);} else {$('#greeting').text('请先保存用户名');}});// 清除数据$('#clearBtn').click(function() {localStorage.removeItem('username');$('#greeting').text('');});
});

<input type="text" id="userName" placeholder="输入姓名">
<button id="saveBtn">保存</button>
<button id="loadBtn">加载</button>
<button id="clearBtn">清除</button>
<p id="greeting"></p>

说明：

localStorage 持久化存储（关闭浏览器仍存在）。
sessionStorage 仅在当前会话有效。

十、综合实例：旅游信息网前台页面设计

1. 网站主体结构（HTML5语义化）

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>悦游旅行网</title><link rel="stylesheet" href="style.css">
</head>
<body><header><h1>悦游旅行网</h1><nav><ul><li><a href="#home">首页</a></li><li><a href="#footprint">留下足迹</a></li></ul></nav></header><main><section id="home"><h2>热门目的地推荐</h2><article><h3>云南大理</h3><p>风花雪月，苍山洱海...</p></article></section><section id="footprint"><h2>留下您的足迹</h2><form id="footprintForm"><input type="text" id="visitorName" placeholder="您的姓名" required><textarea id="message" placeholder="留言内容" required></textarea><button type="submit">提交</button></form><div id="messages"></div></section></main><footer>&copy; 2025 悦游旅行网</footer><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="app.js"></script>
</body>
</html>

2. 留下足迹页面功能（结合 Web Storage）

// app.js
$(document).ready(function() {// 页面加载时读取历史留言loadMessages();$('#footprintForm').submit(function(e) {e.preventDefault();const name = $('#visitorName').val().trim();const msg = $('#message').val().trim();if (name && msg) {const entry = { name, msg, time: new Date().toLocaleString() };saveMessage(entry);appendMessage(entry);$('#footprintForm')[0].reset();}});function saveMessage(entry) {let messages = JSON.parse(localStorage.getItem('messages') || '[]');messages.push(entry);localStorage.setItem('messages', JSON.stringify(messages));}function loadMessages() {const messages = JSON.parse(localStorage.getItem('messages') || '[]');messages.forEach(appendMessage);}function appendMessage(entry) {const html = `<div class="message-item"><strong>${entry.name}</strong> - ${entry.time}<br>${entry.msg}</div>`;$('#messages').prepend(html);}
});

功能亮点：

使用 <section>、<article>、<header>、<footer> 等语义标签。
表单提交后将留言存入 localStorage。
页面刷新后仍能显示历史留言。
无后端依赖，纯前端实现“留言墙”。

总结

本章涵盖的核心技术栈：

技术点	关键API/元素	jQuery辅助作用
HTML5语义化	`<header>`, `<section>` 等	DOM操作、事件绑定
表单增强	`type="email/date/range"`	表单验证、动态交互
文件上传进度	`FormData`, `XMLHttpRequest.upload`	Ajax封装、进度更新
Canvas绘图	`canvas.getContext('2d')`	初始化、事件触发
音频播放	`<audio>`	插件封装、控制逻辑
Web Storage	`localStorage`	数据持久化、用户状态管理