Question

我刚开始学习网页开发，有人给了我这个代码供我使用。但是，我想了解它，以便我可以按照我想要的方式进行更改。但是，我完全理解它有些麻烦。我有计算机编程的基础知识。我只是很难理解这段代码在做什么。我在这里做了一些研究https://api.jquery.com/。我理解各种概念，但不能将它们组合在一起。所以这是我到目前为止所理解的：

arr[1]->offset...：确保页面已加载并可以使用。我假设以下代码不会执行，除非页面已完全加载并准备好进行交互。

.ready()：基本上响应点击。

.click()：有点像for循环。

.each()：转到下一个元素。

.next()：隐藏元素（这有点令人困惑，因为它实际上并没有隐藏它，只是让它跳起来）？

.hide()：它揭示了一个隐藏的元素？

以下是代码：

.toggle()

我认为是这样的。但我不确定它是如何适应的。有人可以向我解释一下吗？

另外，为什么上面的代码没有这一行也没有工作：

$(document).ready(function(){ $('.info').click(function(){ $('.info').each(function(){ $(this).next().hide(); }); $(this).next().toggle(); }); });

Answer 1

该行

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

从上面的CDN URL加载jQuery库。此Javascript文件包含您正在使用的所有上述功能的定义以及许多其他有用的功能。您可以在官方文档上阅读更多内容。 https://api.jquery.com/

代码说明

$(document).ready(function () {

这会在ready上注册document个事件。换句话说，当DOM完全加载并且就绪被操作时，将调用回调匿名函数。

    $('.info').click(function () {

就像ready事件处理程序一样，此代码会在click类的所有元素上绑定info事件。

        $('.info').each(function () {
            $(this).next().hide();
        });

这部分代码将遍历所有具有info类的元素，并逐个隐藏每个元素的下一个元素。＆＃39;

        $(this).next().toggle();

这将切换所点击的$(this)元素的下一个元素的可见性。不是，这显示了上一个each循环中的下一个元素，您已隐藏.info类的所有下一个元素。

    }); // End of click
}); // End of ready

您的代码也可以不带循环编写

$(document).ready(function () {
    $('.info').click(function () {

        $('.info').not(this).next().hide();
        // Hide all elements that are nextSibling of the elements having class info other than the clicked one

        $(this).next().show();
        // Show the next element of the clicked element
    });
});

Answer 2

首先，你应该知道js是一种语言，你在这里提到的大多数函数都是jQuery函数。

jQuery是一个用js编写的库，它有很多支持开发的函数和选项。

因此，您包含的脚本行将jQuery库加载到页面中。

至于其他问题：

.ready()：确保页面已加载并可以使用。我假设以下代码不会执行，除非页面已完全加载并准备好进行交互。

正如你所写 - 这是一个处理页面加载的函数，虽然下面的代码将在页面加载完成之前执行，这是因为js是一个非阻塞脚本

所以正确使用.ready()是：

$(document).ready(function(){
    ....//all code you need after page is fully ready goes here
});

.click（）：基本上响应点击。

正确。这会响应DOM event的DOM element。在开发Web时，理解什么是DOM以及如何使用它真的无能为力。

$(element).click(function(){
    ....//all code you need after clicking element goes here
});

.each（）：有点像for循环。

正确。这循环遍历DOM元素，并在每次迭代中获得对当前元素的引用

$(elements).each(function(){
    var element = $(this) //jquery wrapper of current iterated DOM element. this refers to current iterated DOM element
});

.next（）：转到下一个元素。

这是一种“遍历”DOM树，操纵其中元素的方式

.hide（）：隐藏元素（这有点令人困惑，因为它实际上并没有隐藏它，只是让它跳起来）？

这实际上隐藏了元素。这可能是使用css来隐藏元素

.toggle（）：它显示一个隐藏的元素？

这是hide()和show()的快捷方式。它会检查元素是否隐藏，如果是，则使用show()，否则使用hide()。如上所述，这也可能是用css

完成的

Javascript函数，Ready，Click，Each，Next，This和Toggle

2 个答案: