jQuery 隐藏每个可见的 DIV 但不包括 #div1 及其子元素

基础概念

jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。在这个问题中，我们需要使用 jQuery 的选择器和可见性操作方法。

解决方案

要隐藏所有可见的 DIV 元素，但不包括 ID 为 "div1" 的元素及其所有子元素，可以使用以下 jQuery 代码：

$('div:visible').not('#div1, #div1 *').hide();

代码解释

1. $('div:visible') - 选择所有当前可见的 DIV 元素
2. .not('#div1, #div1 *') - 从选择集中排除 ID 为 "div1" 的元素及其所有子元素
3. .hide() - 隐藏剩余的所有匹配元素

替代方案

如果你需要更精确的控制，也可以使用以下方法：

$('div:visible').each(function() {
    if (!$(this).closest('#div1').length && this.id !== 'div1') {
        $(this).hide();
    }
});

注意事项

1. 确保在 DOM 完全加载后执行此代码，可以放在 $(document).ready() 中
2. 如果页面中有大量 DIV 元素，这种操作可能会影响性能
3. 隐藏的元素可以通过 .show() 或 .toggle() 方法重新显示

应用场景

这种选择器组合在以下场景中很有用：

• 创建模态对话框时需要隐藏页面其他内容
• 实现标签页切换功能
• 构建可折叠/展开的界面元素
• 响应式设计中根据屏幕尺寸隐藏部分内容

性能优化

对于大型 DOM 结构，可以考虑更具体的选择器，而不是简单的 'div:visible'，例如：

$('.container div:visible').not('#div1, #div1 *').hide();

这样可以减少 jQuery 需要检查的元素数量。