15、jQuery 效果与样式切换全解析

jQuery 效果与样式切换全解析

1. 添加元素到指定位置

在网页开发中，有时需要将新元素添加到现有元素的特定位置。以下是两种常见的实现方式：
- 作为兄弟元素添加 ：以下代码会将新元素作为现有元素的兄弟元素添加，并将其定位在现有元素内部，距离左上角 10 像素，宽度比现有元素小 20 像素。

jQuery(document).ready(function() {
    var $foo = jQuery('#foo'),
        fooPosition = $foo.position(),
        $tooltip = $('<div id="tooltip">A new element</div>').insertAfter($foo);
    $tooltip.css({
        position : 'absolute',
        top : fooPosition.top + 10,
        left : fooPosition.left + 10,
        width : $foo.width() - 20
    });
});

• 添加到页面其他位置 ：若不想让新元素成为现有元素的兄弟元素，可以通过查看原始元素的偏移量来调整代码。

jQuery(document).ready(function() {