Question

我发现了这个功能：

function squarifyMe(element) {
 squareItUp()
  window.onresize = function(element) {
    squareItUp();
  }
  function squareItUp() {
    $(element).height($(element).width());
  }
}

通过此电话：

$(document).ready(function() {
  squarifyMe('.myElement');
});

但不知道如何将其添加到我的网页... 我已经做了很多次，但无法让它发挥作用。

Answer 1

名为 squarifyMe（）的函数使用jQuery。

这意味着您要做的第一件事就是导入jQuery。

最简单的方法是使用托管库。

要使用Google的托管版jQuery，请将其添加到您的html页面：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

或者，你可以下载jQuery并自己包含它。

。。

现在解释第二段代码：

$(document).ready(function() {
    squarifyMe('.myElement');
});

第一行基本上说＆＃34; 在页面准备好后执行以下代码。＆＃34;

您可以通过阅读$(document).ready()的文档来了解更多。

。。

现在解释下一段代码：

 squarifyMe('.myElement');

 function squareItUp() {
     $(element).height($(element).width());
 }

上面的第一行调用函数 squarifyMe（），当文档准备好时，字符串作为参数。

在 squarifyMe（）内部调用函数 squareItUp（）。

它执行以下操作（逐件）：

$('.myElement')

此代码选择文档中具有css类 myElement 的所有元素。

所有这些元素都作为一个集合返回，该集合由后面的链式 jQuery代码操纵。

您可以了解更多关于按类选择DOM元素 here。

为了清楚起见，让我们重写这行代码：

$(element).height($(element).width());

我们会像这样重写它：

var $s = $(element);
$s.height($s.width());

现在$s等于拥有css类myElement的DOM元素集。

在该行的后半部分，我们 GET $s中每个元素的宽度，如下所示：

$s.width()

您可以通过阅读jQuery.width()的documentatino来了解更多。

然后 SET 该元素的高度等于其宽度，如下所示：

$s.height($s.width());

这将使每个具有类myElement的元素成为正方形。

。。

现在解释最后一段代码：

window.onresize = function(element) {
  squareItUp();
}

此代码注册window.onresize的事件处理程序。

换句话说，只要用户调整浏览器窗口大小，就会调用 squareItUp（）。

所以......每次调整浏览器大小时，每个具有类myElement的DOM元素都将成为一个正方形。

您可以通过阅读window.onresize的文档来了解更多。

Answer 2

您需要将整个代码放在脚本标记中并导入jquery库。

确保您想要的元素＆＃34; square＆＃34;有班级＆＃34; myElement＆＃34;。如果它具有id＆＃34; myElement＆＃34;，则需要更改＆＃34; .myElement＆＃34;到＆＃34; #myElement＆＃34;。

哦，你需要调整页面大小才能运行该功能。

Answer 3

试试吧。

squarifyMe.call('.myElement');

如何调用使用jQuery的JavaScript函数？

3 个答案: