如何最好地使用 jQuery：使用 HTML 或 CSS 进行格式化

Posted 2023-05-08

技术标签:

【中文标题】如何最好地使用 jQuery：使用 HTML 或 CSS 进行格式化【英文标题】：How best to use jQuery: with HTML or CSS for formatting 【发布时间】：2010-09-16 15:57:20 【问题描述】：

作为学习 jQuery 的一部分，我决定用 javascript 做一个简单的井字游戏，目前，我使用 html 表格来设置间距并在表格中使用图形图像。

图像要么是小圆圈，要么是大 X 或 O。当用户点击一个圆圈时，它会变为 X 或 O，然后检查游戏是否已获胜。

我知道这很糟糕，但这是一次很好的教育经历。

图片大小相同（圆圈有很多空白），以确保表格大小不会改变。

我的问题有两个。

1/ 我是否应该使用 CSS 而不是表格来进行格式化？如何最好地完成（HTML 表格很容易）？

2/ 有没有比使用图像更好的方法，这样我就不必事先创建 JPG？我尝试使用文本标签 ()，但不断变化的颜色和下划线让我烦恼？

您可能会说，我对 HTML 很满意，但对 CSS 不太满意。

【问题讨论】：

【参考方案1】：

继续使用表格进行布局 - 井字游戏是一个网格，因此使用网格来包含游戏区域是有意义的。 CSS 可用于颜色、字体、边框等。

您可以使用 CSS 来覆盖锚点的颜色和下划线样式，但 IMO 只使用图像更容易。 PNG 会比 JPEG 更好，因为您可以使 PNG 图像透明而没有伪影。

【讨论】：

是的，我正在使用 Hypersnap 从 MsWord 捕获大字体，因此我可以将它们保存为 PNG - 最后我听说，并非所有浏览器都支持透明 PNG，但那是不久前的事了 - 我想它已经改变了. IE7 支持半透明 PNG，但 IE6 本身不支持。您可以使用脚本修复 IE6 的 PNG 支持。试试 Dean Edward 的“IE7”：code.google.com/p/ie7-js TABLE 元素 not 表示“网格” - 它用于数据表，即带有标题和这些标题的多行数据的东西。 @blackwell: 因为没有元素，所以是最接近的。 @blackwell - HTML 表格的行和列需要定义这些行和列中的值之间的关系。井字游戏绝对可以做到这一点，所以这里的桌子完全可以接受。如果您将其标记为 9 个 div，您肯定会失去语义丰富性。

【参考方案2】：

澄清一点。您写道：“我应该使用 CSS 而不是表格……” CSS 可以应用于所有 HTML 元素。甚至是桌子。

在 jQuery 中使用 CSS 类可以使您的 javascript 代码更简单、更易读。

例如：您定义了两个 CSS 类：“OH”和“EX”。（文本或背景图像可以正常工作。）然后当单击单元格时，添加适当的类。

var ex_or_oh = 'EX'; // 'OH'
$('td.box').click(function() 
  var t = $(this);
  if (t.hasClass('OH') || t.hasClass('EX'))  return;  // spot taken
  t.addClass(ex_or_oh);
  (ex_or_oh == 'EX') ? ex_or_oh = 'OH' : ex_or_oh = 'EX';
);

HTML 会是这样的：

<table><tr>
  <td class="box"></td>
  <td class="box"></td>
  <td class="box"></td></tr>
  ...
</table>

【讨论】：

【参考方案3】：

只是为了好玩，这里有一个基本的 CSS 实现：

<!-- your html -->
<div id="board">
  <div class="square" id="topLeft">&nbsp;</div>
  <div class="square" id="topCenter">&nbsp;</div>
  <div class="square" id="topRight">&nbsp;</div>
<!-- 6 more .square divs! -->
</div>

这是你的 CSS

#board 
  width: 606px;
  height: 606px;
  border: 1px solid #000000;


.square 
  float: left;
  width: 200px;
  height: 200px;
  border: 1px dotted #CCCCCC;

板的额外像素占边框（1px x 2 个边 x 3 个框每行 = 6）

您可以使用以下 CSS 更改文本装饰：

a:hover, a:active, a:visited 
  text-decoration: none;
  font-color: blue;

无论如何，我认为它作为表格也没有任何问题（表格毕竟是用于表格数据的）。我发现有用的 CSS 参考网站是 w3schools

【讨论】：

【参考方案4】：

如果你想以任何有意义的方式使用 jQuery，你需要学习 CSS - CSS 选择器是使用库时表达事物的主要方式之一。 jQuery 的真正优势之一是它支持关注点分离的容易程度——在 HTML 中进行语义标记，在 CSS 中定义外观，然后使用 jQuery 对行为增强进行分层。

关于细节：

有许多语义上有意义的方式来标记井字游戏（表格不是其中之一——行的标题是什么？）。无论您使用哪种方法，请确保您了解盒子模型以及您需要解决的实现中特定于浏览器的错误。

如果您学习 CSS，您可以将 O 和 X 用作文本，然后设置它们的样式以使它们看起来像您想要的那样...

【讨论】：

【参考方案5】：

您可以使用以下表格：

.board 
    border-collapse: collapse;

.board td 
    width: 40px;
    height: 40px;
    border: 1px solid #666;
    font-size: 40px;
    line-height: 40px;
    font-family: 'courier new' serif;
    font-weight: bold;
    background-color: #ddf;
    text-align: center;

与