jquery下div 的resize事件示例代码

在jQuery中，原生的HTML元素（如`

`）并不直接支持`resize`事件，因为`resize`事件通常与窗口（`window`）或框架（`iframe`、`frame`）的尺寸变化相关联。但是，你可以通过一些技巧来模拟`
`元素的`resize`事件。

一种常见的方法是使用`resize`观察器（Resize Observer API），这是一个现代浏览器支持的API，用于异步检测元素内容区域或边框盒大小的变化。不过，由于你要求的是jQuery示例，我们可以结合jQuery和Resize Observer来实现。

以下是一个示例代码，展示了如何使用Resize Observer和jQuery来模拟`

`的`resize`事件：


$(document).ready(function() {
    // 选择你想要监听resize事件的div
    var $div = $('#myDiv');

    // 创建一个Resize Observer实例并传入回调函数
    var resizeObserver = new ResizeObserver(entries => {
        for (let entry of entries) {
            // 当div的尺寸变化时，执行这里的代码
            console.log('Div size changed:', entry.contentRect);
            // 你可以在这里触发一个自定义的resize事件
            $div.trigger('resize');
        }
    });

    // 观察指定的div元素
    resizeObserver.observe($div[0]);

    // 现在你可以为div绑定自定义的resize事件处理函数
    $div.on('resize', function() {
        console.log('Custom resize event triggered for div');
        // 在这里执行你想要的任何操作
    });
});

在这个示例中，我们首先使用jQuery选择器选择了想要监听尺寸变化的`

`元素。然后，我们创建了一个`ResizeObserver`实例，并传入了一个回调函数，该函数会在`
`的尺寸变化时被调用。在回调函数中，我们打印了变化后的尺寸信息，并触发了`
`元素上的一个自定义`resize`事件。

最后，我们使用jQuery的`.on()`方法为`

`元素绑定了自定义`resize`事件的处理函数。这样，每当`
`的尺寸变化时，都会执行这个处理函数中的代码。

请注意，由于`ResizeObserver`是一个现代浏览器API，因此它可能不在所有浏览器中都可用。如果你需要支持旧版浏览器，你可能需要寻找其他解决方案，如使用定时器来定期检查元素尺寸的变化。但是，这种方法通常不如`ResizeObserver`高效和准确。