本教程详细阐述了如何使用 jquery 实现基于屏幕尺寸的动态 dom 元素定位，解决代码仅在窗口调整大小后生效的问题。通过将核心逻辑封装为函数并在页面加载时及窗口尺寸变化时调用，确保元素在不同屏幕宽度下都能正确初始化和响应式调整。文章还提供了优化后的代码示例和相关最佳实践。
在现代网页开发中，响应式设计是不可或缺的一部分。有时，我们不仅需要通过 CSS 媒体查询来调整元素的样式，还需要根据屏幕尺寸动态地改变 DOM 元素的结构或位置。然而，在使用 JavaScript（尤其是 jQuery）处理这类需求时，开发者常遇到的一个问题是，其编写的逻辑只在浏览器窗口被手动调整大小时才生效，而在页面初次加载时却不执行。这通常是因为相关代码被错误地放置在了 resize 事件监听器中。
问题根源分析
原始代码示例中，所有逻辑都被包裹在 jQuery(window).on(‘resize’, function(){…}) 内部。这意味着，只有当 window 对象触发 resize 事件时（即用户拖动浏览器窗口边界改变其大小时），内部的代码才会执行。在页面初次加载完成时，resize 事件并不会自动触发，因此元素的位置不会被调整，直到用户手动操作。
解决方案：结合初始加载与事件监听
要解决这个问题，关键在于确保动态调整逻辑在页面加载时执行一次，并且在窗口大小改变时也能持续响应。最优雅的解决方案是将核心逻辑封装成一个独立的函数，然后在两个不同的时机调用它：
页面加载完成时： 确保元素在页面初次渲染时就处于正确的位置。窗口大小改变时： 响应用户的操作，实时调整元素位置。
实现步骤与优化代码
以下是实现这一目标的优化代码示例，它不仅解决了上述问题，还通过使用三元运算符简化了条件判断：
$(function() { // 定义一个函数，封装所有动态调整的逻辑 function adjustElementPosition() { // 获取当前窗口宽度 const windowWidth = $(window).width(); // 根据窗口宽度动态选择目标元素，并执行insertBefore操作 $( ".checkout.woocommerce-checkout .woocommerce-shipping-fields__wrapper" ) .insertBefore( windowWidth <= 1024 ? ".checkout.woocommerce-checkout .flux-step.flux-step--2 .flux-checkout__shipping-table" : ".checkout.woocommerce-checkout .flux-checkout__content-right #order_review" ); } // 1. 在DOM加载完成后立即调用一次函数，处理初始页面状态 adjustElementPosition(); // 2. 监听窗口的resize事件，并在每次事件触发时调用函数 $(window).on('resize', adjustElementPosition);});
代码解析：
$(function() { … });: 这是 $(document).ready(function() { … }); 的简写形式，确保在 DOM 完全加载和解析后才执行内部代码，避免操作尚未存在的元素。function adjustElementPosition() { … }: 我们将所有根据屏幕尺寸调整元素位置的逻辑封装在一个名为 adjustElementPosition 的函数中。这样做提高了代码的模块化和可读性。const windowWidth = $(window).width();: 获取当前浏览器视口宽度。三元运算符 condition ? valueIfTrue : valueIfFalse: 这是一个简洁的条件表达式。它根据 windowWidth 如果窗口宽度小于等于 1024px，则目标是 .checkout.woocommerce-checkout .flux-step.flux-step–2 .flux-checkout__shipping-table。否则（窗口宽度大于 1024px），目标是 .checkout.woocommerce-checkout .flux-checkout__content-right #order_review。adjustElementPosition();: 在 $(function() { … }); 内部，我们首先调用一次 adjustElementPosition 函数。这确保了在页面加载完成时，元素的位置就能根据当前屏幕尺寸正确初始化。$(window).on(‘resize’, adjustElementPosition);: 接着，我们为 window 对象绑定 resize 事件监听器，当窗口大小发生变化时，再次调用 adjustElementPosition 函数，从而实现响应式调整。
注意事项与最佳实践
性能优化（Debouncing resize 事件）: resize 事件在用户拖动窗口时会频繁触发，可能导致函数被调用数百次，从而影响性能。为了避免这种情况，建议对 resize 事件进行“去抖”（Debouncing）处理。去抖技术可以确保在事件停止触发一段时间后才执行回调函数。
$(function() { function adjustElementPosition() { // ... (同上) } adjustElementPosition(); // 初始调用 let resizeTimer; $(window).on('resize', function() { clearTimeout(resizeTimer); resizeTimer = setTimeout(adjustElementPosition, 200); // 200毫秒内不再触发resize事件后执行 });});
上述代码中，我们引入了一个 resizeTimer。每次 resize 事件触发时，都会清除之前的定时器并设置一个新的定时器。如果 resize 事件在 200 毫秒内再次触发，旧的定时器会被清除，新的定时器会重新计时。只有当 resize 事件停止触发超过 200 毫秒时，adjustElementPosition 函数才会被真正执行一次。
CSS 媒体查询的优先考虑: 对于纯粹的样式调整（如隐藏/显示元素、改变颜色、字体大小等），CSS 媒体查询通常是更优的选择，因为它性能更高、更易于维护。只有当需要进行复杂的 DOM 结构操作（如本例中的 insertBefore）时，才考虑使用 JavaScript。
选择器精确性: 确保你的 jQuery 选择器足够精确，以避免意外地修改其他元素。本例中的选择器使用了多个类名和 ID，具有较高的特异性。
可维护性: 将复杂的逻辑封装在独立的函数中，并使用有意义的函数名，可以大大提高代码的可读性和可维护性。
总结
通过将动态 DOM 调整逻辑封装到函数中，并在页面加载时以及窗口 resize 事件发生时调用该函数，我们能够构建出既能在页面初次渲染时正确布局，又能响应用户操作的健壮的响应式网页。结合去抖技术可以进一步优化性能，而合理地选择使用 JavaScript 或 CSS 媒体查询则能确保项目的最佳实践。
以上就是jQuery 动态元素定位与屏幕尺寸响应式布局指南的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1528525.html
微信扫一扫 
支付宝扫一扫 
