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

jQuery在HTML5中的应用

一、HTML5基础

1. HTML5文档结构

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

html 复制代码

<!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. 表单增强（新输入类型）

html 复制代码

<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 检测

javascript 复制代码

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

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

四、jQuery与HTML5编程

jQuery操作HTML5元素示例

html 复制代码

<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）

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

html 复制代码

<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 并绘图

html 复制代码

<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 动态控制

html 复制代码

<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）

html 复制代码

<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

javascript 复制代码

$(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('');
    });
});

html 复制代码

<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语义化）

html 复制代码

<!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）

javascript 复制代码

// 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`	数据持久化、用户状态管理

所有案例均可在现代浏览器中运行，建议配合 Chrome/Firefox 测试。

如需进一步扩展（如加入 Service Worker、Geolocation 定位景点等），可在本框架基础上继续深化。