Javascript 或 JQuery 需要重新加载页面，为什么？

Question

为什么 Javascript 或 jQuery 在应用某些效果之前需要重新加载页面？

CSS是实时更新

示例：

这是实时工作的

@media all and (max-width:767px) {
.nav-menu {
 margin:0px!important;
 }
 }

这需要重新加载页面才能看到效果，不要在调整大小时实时更新window

if ($(window).width() > 980) {
do something
};

为什么？

Answer 1

因为后者是JavaScript。目前，它是一个例程，仅在解析脚本标记时触发一次。您可以将它包装在一个函数中并多次触发它。例如，在 window 调整大小事件中。前者是 CSS，浏览器根据 CSS 规则不断更新页面。

window.addEventListener("resize", function(){
     if ($(window).width() > 980) {
         do something
     };
}, false);

或在jQuery:

$(window).on("resize", function(){
     if ($(window).width() > 980) {
         do something
     };
});

现在每次 window 调整大小时都会触发。

Answer 2

这是因为 jQuery/Javascript 是在加载时完成的，而不是在调整 window 大小时完成的。理论上，CSS 也是在加载时完成的，只知道在什么时候显示什么。

如果您想在调整 window 大小时运行 JS/jQuery，您必须添加如下内容：

window.onresize = resize;

function resize()
{
  if ($(window).width() > 980) {
     //do something
  };
}

每次调整 window 的大小时，上面的代码都会运行，因此每次运行时检查 window 是否大于 980。

Answer 3

这将在触发 resize 事件时起作用

  $( window ).resize(function() {
     if ($(window).width() > 980) {
       ... 
        .....
        ....
    }
 });

这会起作用

ref - resize() function in jquery

Answer 4

您必须触发事件才能javascript在不加载页面的情况下检查该条件

window.onresize = function(event) {
    // add your if condition here
};

对于 jquery 只需使用下面的

$(window).resize(function() {
    // add you if condition here
});

Answer 5

$(window).width()

当你调用这样的函数时，它会在执行时给你一个 return 值。如果你想在调整大小、文档点击等时给出一个值，你必须添加一个事件监听器。

$(window).on('resize', function() {

    console.log( $(window).width() )

});

Javascript or JQuery need page reload, Why?