Javascript 了解jQuery函数的调用/对初学者的反馈'；s小型响应式布局脚本

不久前，我拼凑了一个小脚本，可以根据窗口大小在页面上移动/调整水平和垂直居中的div，以实现一种响应性设计，该设计通过jQuery实现，jQuery是CSS媒体查询的替代方案。我正在掸去剧本上的灰尘，把它当作我可以投入项目组合的东西，最终在工作面试或其他场合展示出来

我试图了解jQuery函数调用是如何工作的。据我所知，我的函数应该以两种方式调用（加载页面时和调整浏览器窗口大小时）。在我看来，我的函数在下面的脚本中以三种不同的方式被调用，但可能有一些我误解了（因为删除我在下面标记的三个元素中的任何一个似乎会破坏脚本）：

$（document）.ready（function（）{//页面加载时的第一个函数调用？
函数divresize（）{
var contentwidth=$（'#innerbox'）.width（）；
var contentheight=$（'#innerbox'）.height（）；
如果（（内容高度）<'700'）{
$（'.background'）.css（'height'，contentheight*1.15）
$（'.background'）.css（'margin-top'，-contentheight*.09）
$（'.thumbrow1'）.css（'top'，contentheight*.1925）
$（'.thumbrow1'）.css（'margin-top'，0）
$（'.thumbrow1'）.css（'height'，contentheight*.24449）
$（'.thumbrow2'）.css（'top'，contentheight*.2325）
$（'.thumbrow2'）.css（'margin-top'，0）
$（'.thumbrow2'）.css（'height'，contentheight*.24449）
$（'.nav'）.css（'top'，contentheight*.293）
$（'.nav'）.css（'margin-top'，0）
$（'.nav'）.css（'height'，contentheight*.03224）
}
如果（（contentheight）>='700'）{
$（'.background'）.css（'height'，contentheight）
$（'.background'）.css（'margin-top'，-contentheight*.005）
$（'.thumbrow1'）.css（'top'，contentheight*.2423）
$（'.thumbrow1'）.css（'margin-top'，0）
$（'.thumbrow1'）.css（'height'，contentheight*.2126）
$（'.thumbrow2'）.css（'top'，contentheight*.2773）
$（'.thumbrow2'）.css（'margin-top'，0）
$（'.thumbrow2'）.css（'height'，contentheight*.2126）
$（'.nav'）.css（'top'，contentheight*.3258975）
$（'.nav'）.css（'margin-top'，0）
$（'.nav'）.css（'height'，contentheight*.0280374）
}
}
divresize（）；//是否在页面加载时调用了另一个函数？
$（窗口）。绑定（“调整大小”，函数（）{
divresize（）；//第三个函数调用？关于窗口大小调整
});
});

这里是否有重复/草率的代码可以清理？还是我误解了这是怎么回事

---

我愿意接受关于如何改进脚本的任何其他一般性反馈。我通过读取容器div（#innerbox）设置为100%高度和宽度的像素高度和宽度，并在此基础上调整所有内容来获得窗口高度和宽度；也许有更好的办法。现在，脚本只根据窗口高度进行调整，但也应该根据宽度进行调整。

我在JavaScript代码片段中添加了注释，以澄清代码的每个部分。我希望这有助于你的理解

$（文档）.ready（函数（）{
//这是一个jQuery函数，一旦DOM（html文档）被激活，它就会启动
//已完全加载/呈现。这确保所有div都位于
//在调用其上的任何代码之前，请先调用该页。
函数divresize（）{
//这里定义了divresize函数。
//编译器知道divresize是可用的并且可以调用。
//但是，它尚未执行。
var contentwidth=$（'#innerbox'）.width（）；
var contentheight=$（'#innerbox'）.height（）；
如果（（内容高度）<'700'）{
$（'.background'）.css（'height'，contentheight*1.15）
$（'.background'）.css（'margin-top'，-contentheight*.09）
$（'.thumbrow1'）.css（'top'，contentheight*.1925）
$（'.thumbrow1'）.css（'margin-top'，0）
$（'.thumbrow1'）.css（'height'，contentheight*.24449）
$（'.thumbrow2'）.css（'top'，contentheight*.2325）
$（'.thumbrow2'）.css（'margin-top'，0）
$（'.thumbrow2'）.css（'height'，contentheight*.24449）
$（'.nav'）.css（'top'，contentheight*.293）
$（'.nav'）.css（'margin-top'，0）
$（'.nav'）.css（'height'，contentheight*.03224）
}
如果（（contentheight）>='700'）{
$（'.background'）.css（'height'，contentheight）
$（'.background'）.css（'margin-top'，-contentheight*.005）
$（'.thumbrow1'）.css（'top'，contentheight*.2423）
$（'.thumbrow1'）.css（'margin-top'，0）
$（'.thumbrow1'）.css（'height'，contentheight*.2126）
$（'.thumbrow2'）.css（'top'，contentheight*.2773）
$（'.thumbrow2'）.css（'margin-top'，0）
$（'.thumbrow2'）.css（'height'，contentheight*.2126）
$（'.nav'）.css（'top'，contentheight*.3258975）
$（'.nav'）.css（'margin-top'，0）
$（'.nav'）.css（'height'，contentheight*.0280374）
}
}
divresize（）；
//这里调用divresize函数并执行其中的任何代码。
//在下面，您可以向窗口添加“监视”功能。
//调整窗口大小时触发。调整窗口大小时会触发其中的任何代码。
//当您在其中放置resize函数时，它将执行divresize（）中的代码
$（窗口）。绑定（“调整大小”，函数（）{
divresize（）；//第三个函数调用？关于窗口大小调整
});
});
以下是一些可以改进脚本的补充内容

使用jQuery的
.css（）
方法，您可以传入css属性的对象，而不是多次调用同一方法和选择器

您可以使用
（函数名（par1，par2）{//do-code}（myVal1，myVal2）立即调用函数
$(document).ready(function() {  //FIRST FUNCTION CALL ON PAGE LOAD?

    function divresize() {
        var contentwidth = $('#innerbox').width();
        var contentheight = $('#innerbox').height();
        if ((contentheight) < '700'){
            $('.background').css('height',contentheight * 1.15)
            $('.background').css('margin-top',-contentheight * .09)
            $('.thumbrow1').css('top',contentheight * .1925)
            $('.thumbrow1').css('margin-top',0)
            $('.thumbrow1').css('height',contentheight * .24449)
            $('.thumbrow2').css('top',contentheight * .2325)
            $('.thumbrow2').css('margin-top',0)
            $('.thumbrow2').css('height',contentheight * .24449)
            $('.nav').css('top',contentheight * .293)
            $('.nav').css('margin-top',0)
            $('.nav').css('height',contentheight * .03224)
            }
        if ((contentheight) >= '700'){ 
            $('.background').css('height',contentheight)
            $('.background').css('margin-top',-contentheight * .005)
            $('.thumbrow1').css('top',contentheight * .2423)
            $('.thumbrow1').css('margin-top',0)
            $('.thumbrow1').css('height',contentheight * .2126)
            $('.thumbrow2').css('top',contentheight * .2773)
            $('.thumbrow2').css('margin-top',0)
            $('.thumbrow2').css('height',contentheight * .2126)
            $('.nav').css('top',contentheight * .3258975)
            $('.nav').css('margin-top',0)
            $('.nav').css('height',contentheight * .0280374)
            }
    }

    divresize();  //ANOTHER FUNCTION CALL ON PAGE LOAD?

    $(window).bind("resize", function(){
        divresize(); //THIRD FUNCTION CALL? ON WINDOW RESIZE
    });

});

$(document).ready(function() {
  var elWidth = $("#innerbox").width();
  var elHeight = $("#innerbox").height();

  (function divresize(width, height) {
    var contentwidth = width;
    var contentheight = height;
    if (contentheight < "700") {
      $(".background").css({
        "height": contentheight * 1.15,
        "margin-top": -contentheight * 0.09,
      });
      $(".thumbrow1").css({
        "top": contentheight * 0.1925,
        "margin-top": 0,
        "height": contentheight * 0.24449,
      });
      $(".thumbrow2").css({
        "top": contentheight * 0.2325,
        "margin-top": 0,
        "height": contentheight * 0.24449,
      });
      $(".nav").css({
        "top": contentheight * 0.293,
        "margin-top": 0,
        "height": contentheight * 0.03224,
      });
    }
    if (contentheight >= "700") {
      $(".background").css({
        "height": contentheight,
        "margin-top": -contentheight * 0.005,
      });
      $(".thumbrow1").css({
        "top": contentheight * 0.2423,
        "margin-top": 0,
        "height": contentheight * 0.2126,
      });
      $(".thumbrow2").css({
        "top": contentheight * 0.2773,
        "margin-top": 0,
        "height": contentheight * 0.2126,
      });
      $(".nav").css({
        "top": contentheight * 0.3258975,
        "margin-top": 0,
        "height": contentheight * 0.0280374,
      });
    }
  })(elWidth, elHeight); // IMMEDIATE INVOKED FUNCTION CALL USING "()"

  $(window).bind("resize", function() {
    divresize(elWidth, elHeight); //SECOND FUNCTION CALL ON RESIZE
  });
});