jQuery Mobile 简介学习笔记
简介
jQuery Mobile 是一款基于 jQuery 核心库的 HTML5 专注移动端开发框架。它提供了许多 UI 组件以及方便移动端交互的 API，可以快速搭建具备响应式设计的移动端网站和 APP。
环境搭建
使用 jQuery Mobile 首先需要引入 jQuery 核心库和 jQuery Mobile 库。
htmlCopy Code<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
以上代码会引入 jQuery 核心库、jQuery Mobile 样式文件以及 jQuery Mobile 库，其中 jQuery Mobile 库包含了核心组件库和事件库。
常用组件
页面组件
jQuery Mobile 定义了一些用于构建页面的组件，如页面头和页脚组件等。
htmlCopy Code<div data-role="header">
<h1>这是一个页面头</h1>
</div>
<div data-role="footer">
<h1>这是一个页面脚</h1>
</div>
表单组件
表单组件是构建 Web 表单的重要组成部分。jQuery Mobile 提供了丰富的表单组件，如输入框、选择器、滑块等。
htmlCopy Code<label for="name">姓名：</label>
<input type="text" id="name" placeholder="请输入姓名">
<label for="gender">性别：</label>
<select name="gender" id="gender">
<option value="male">男</option>
<option value="female">女</option>
</select>
<label for="slider">滑块：</label>
<input type="range" name="slider" id="slider" value="50" min="0" max="100">
列表组件
列表组件是网站和 APP 中常用的展示数据的方式之一。jQuery Mobile 提供了多种列表组件，如无序列表、有序列表、分割列表、图标列表等。
htmlCopy Code<ul data-role="listview">
<li><a href="#">列表项 1</a></li>
<li><a href="#">列表项 2</a></li>
<li><a href="#">列表项 3</a></li>
</ul>
<ol data-role="listview">
<li><a href="#">列表项 1</a></li>
<li><a href="#">列表项 2</a></li>
<li><a href="#">列表项 3</a></li>
</ol>
实例
以下代码演示了如何使用 jQuery Mobile 构建一个简单的购物车网页。
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>购物车</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li><a href="#">商品 1</a></li>
<li><a href="#">商品 2</a></li>
<li><a href="#">商品 3</a></li>
</ul>
</div>
<div data-role="footer">
<h4>© 2023 购物车</h4>
</div>
</div>
</body>
</html>
以上代码实现了一个简单的购物车网页，包括页面头、商品列表和页面脚。当用户点击商品时可以跳转到商品详情页，从而实现更多的交互效果。