7、构建 CSS3 记忆匹配游戏全攻略

构建 CSS3 记忆匹配游戏全攻略

1. jQuery 克隆 DOM 元素

在 HTML 结构中，原本可能只有一个卡片元素，但最终呈现出 12 个卡片。这是借助 jQuery 的 clone 函数来克隆卡片元素实现的。克隆目标元素后，再调用 appendTo 函数，将克隆的卡片元素作为子元素添加到 cards 元素中，实现代码如下：

$(".card:first-child").clone().appendTo("#cards");

1.1 jQuery 子元素过滤器选择首个子元素

在选择卡片元素并进行克隆时，使用了如下选择器：

$(".card:first-child")

:first-child 是一个子元素过滤器，用于选择给定父元素的首个子元素。除了 :first-child ，还能使用 :last-child 来选择最后一个子元素。可在 jQuery 文档中查看其他与子元素相关的选择器： http://api.jquery.com/category/selectors/