Javascript 或 JQuery 不理解

Question

我是前端编程新手，有时不明白javascript和jquery快捷键的含义。我有一些代码模板要处理，但我不清楚它是如何工作的，如下所示。

你能帮我通过文章来理解js文件中的这些定义吗？

提前致谢。

我有这样的东西。我只想知道它是如何工作的！我不是很清楚。

1

for (var e = document.getElementsByTagName("div"), t = 0; t < e.length; t++) 
    "fish" == e[t].getAttribute("class") && fishArray.push(e[t])

2.

"vertical" == layersMovement ? (balloonDiv.style.left = o + "px", robbyContainerDiv.style.left = n + "px") : "not moving 1" == layersMovement ||
"not moving 2" == layersMovement ? (robbyContainerDiv.style.left = n + pageVerticalPosition - (pageDiv.offsetHeight - containerDiv.offsetHeight - distanceBetweenRobbyAndBalloon) + "px",

balloonDiv.style.left = o + "px") : (balloonDiv.style.left = layerHorizontalArray[layerHorizontalArray.length - 1].offsetLeft + layerHorizontalArray[layerHorizontalArray.length - 1].offsetWidth - .5 * (containerDiv.offsetWidth + balloonDiv.offsetWidth) + "px",
robbyContainerDiv.style.left = "50%")

Answer 1

将其转换为更简洁的代码将有助于您理解：

for (var e = document.getElementsByTagName("div"), t = 0; t < e.length; t++) "fish" == e[t].getAttribute("class") && fishArray.push(e[t])

清理代码：

var e = document.getElementsByTagName("div");

==> 定义 e 以容纳所有 div 个元素

for (var t = 0; t < e.length; t++)

==> 循环 e 中的每个 div 元素。 for 语句的第一部分可用于初始化变量。例如：for (var a = 0, b = 2, c = 3; a < b; a++) 这就是原始代码在 for 语句中定义 e 的原因。

"fish" == e[t].getAttribute("class") && fishArray.push(e[t])

==> a && b 评估a，如果评估结果为真，则执行b。它是 if (a) { b; } 的快捷方式。在此语句中，如果当前 div 的 class 属性等于 'fish'，则将 div 的引用推送到 fishArray 数组。

换句话说，代码可以写得更干净：

var e = document.getElementsByTagName("div");
for (var t = 0; t < e.length; t++) {
    var currentDiv = e[t];
    if ("fish" == currentDiv.getAttribute("class")) {
        fishArray.push(e[t]);
    }
}

第二个密码：

"vertical" == layersMovement ? (balloonDiv.style.left = o + "px", robbyContainerDiv.style.left = n + "px") : "not moving 1" == layersMovement || "not moving 2" == layersMovement ? (robbyContainerDiv.style.left = n + pageVerticalPosition - (pageDiv.offsetHeight - containerDiv.offsetHeight - distanceBetweenRobbyAndBalloon) + "px", balloonDiv.style.left = o + "px") : (balloonDiv.style.left = layerHorizontalArray[layerHorizontalArray.length - 1].offsetLeft + layerHorizontalArray[layerHorizontalArray.length - 1].offsetWidth - .5 * (containerDiv.offsetWidth + balloonDiv.offsetWidth) + "px",
robbyContainerDiv.style.left = "50%")

解释： 第二个代码包含嵌套条件。
以下：a ? b : c 等于：if (a) { b; } else { c; }.
我可以写 a, b, c; 来执行 a，然后是 b，然后是 c（a; b; c;）。
有了这两条规则，拿走那段代码并重写它，这样你就可以理解它了。

顺便说一句，我相信你正在看minified code。

希望对您有所帮助！

Javascript 或 JQuery 不理解

Javascript or JQuery not understanding

html

javascript

jquery

frontend

javascript-objects