javascript - 探究 jQuery 中 insertAfter 的效果

Question

为了理解.insertAfter的效果，我设计了一个 2 行 2 列的小表格测试。

 <table id="myTable" width="560" border="1" cellspacing="2" cellpadding="2">
        <tr>
          <td title="row 1*1" class="styletest">1*1</td>
          <td title="row 1*2" class="styletest">1*2</td>
        </tr>
        <tr>
          <td title="row 2*1" class="styletest">2*1</td>
          <td title="row 2*2" class="styletest">2*2</td>
        </tr>
     </table>

jQuery代码是：

var $tooltip = $('<div id="tooltip"></div>');
$tooltip.insertAfter('#myTable').hide();//I want to know the code after inserting this element.

function showTooltip(cell) {
    $tooltip.show().text(cell.attr("title"));
}
$('.styletest').hover(function() {
    showTooltip($(this));
 }, function() {
    $tooltip.hide();
 });

测试包括悬停不同的单元格和显示工具提示。演示在jsfiddle。

当我悬停不同的单元格时，我想知道源代码。例如，当我悬停第 1 行第 1 列时，快照喜欢： 当我悬停第 2 行第 2 列时，快照喜欢：

问题：当鼠标悬停在第 1 行第 1 列和第 2 行第 2 列时；

1. 他们有相同的渲染源代码吗？（悬停时使用F12无法获取渲染代码）
2. 为什么工具提示显示在中间的相同位置？

Answer 1

这是相同的元素，你只是改变它的内容和可见性。它不会移动，除了您使用 text()标记设置的内容之外，它也不会改变。

你不需要检查任何东西，源代码就在你的脚本中，你插入的就是你得到的，可以这么说！

Answer 2

您可以检查仅适用hover于 firebug 的元素的样式：

检查具有悬停样式的元素，单击 DOM 节点，使其被选中并以蓝色突出显示。然后转到右侧的样式选项卡并单击小箭头，然后选择:hover现在 Firefox 将保持悬停样式，您可以在底部插入 div。

在你的情况下，要么你有 CSS for 要么有#tooltipdiv 的样式以使文本居中。