在前端开发中，选择器是必不可少的一部分。JQuery 是一个流行的 JavaScript 库，它提供了许多方便易用的选择器，使得 DOM 操作更加容易。本文将介绍如何使用 JQuery 选择器来实现一个简单的球队选择功能。
目标
我们的目标是创建一个包含所有 NBA 球队的列表，并允许用户选择他们喜欢的球队。当用户选择球队时，该球队的名称和图标应该显示在页面上。
HTML 结构
首先，我们需要创建一个 HTML 结构以呈现 NBA 球队列表。这里我们使用无序列表 (<ul>) 来表示所有球队：
-- -------------------- ---- ------- ------- ---------- --- --------------- --- ------------------ -------------- ---------- --- ----------------- --------------- ------------ --- ------------------- -------------- --------- --- -------------------- ------------------ ------------ --- ------------------ -------------- ---------- --- -------------------- -------------------- -------------- --- ----------------- ----------------- -------------- --- ----------------- --------------- ------------ --- ------------------ ---------------- ------------ --- ----------------- ----- ---------------- ----- ------------- --- ------------------ ---------------- ------------ --- ------------------ --------------- ----------- --- -------------- ------- ------------- ------- ------------- --- -------------- ------- ----------- ------- ----------- --- ------------------ ------------------ -------------- --- ---------------- ----------- --------- --- -------------------- ---------------- ---------- --- -------------------- ----------------------- ----------------- --- -------------- ------- ------------- ------- ------------- --- -------------- ---- ----------- ---- ----------- --- ------------------- ---- ----------------- ---- ------------ --- ------------------ -------------- ---------- --- ----------------------- ------------------- ---------- --- ------------------ ------------- --------- --- ------------------- ----- ----------------- ----- ------------ --- --------------------- ----------------- ---------- --- -------------- ------- ---------- ------- ---------- --- ------------------ ---------------- ------------ --- --------------- ---------- --------- --- --------------------- ------------------- ------------ -----
对于每个球队，我们使用自定义数据属性 data-team 来存储其名称。这是一个方便的方式，因为我们稍后可以使用 JQuery 来获取和操作这些值。
CSS 样式
为了让我们的列表看起来更加美观，我们添加一些 CSS 样式：
-- -------------------- ---- ------- ---------- - ----------- ----- -------- -- - -- - ------- -------- -------- ----- -------------- ---- ----------------- -------- -------------- ---- - --------- - ----------------- -------- ------ ------ -
这个样式简单易懂，我们为选中状态增加了背景颜色和文本颜色。
JavaScript 代码
现在让我们来处理 JavaScript 部分。首先，我们需要引入 JQuery 库：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
然后我们可以编写以下代码来实现球队选择功能：
-- -------------------- ---- ------- ---------------------------- - -- --------- --- ------ - ------------- ----- -- ------------- - - ---------------------------------------------------------- -------- --------------------------------------------------------------------------------