Question

我已经阅读了很多关于jQuery及其语法的文章。但是我还没有完全理解它的语法，我真的希望对它有更好更深入的了解。

许多文章未能指出简单的语法规则（以及它们所必需的内容）。

截至目前，我遇到了语法理解问题：

我的HTML：

<body>
    <a href="http://www.jquery.com" title="anchor1">jQuery.com</a>
    <a href="http://www.jquery.com" title="anchor2">jQuery.com</a>
    <a href="http://www.jquery.com" title="anchor3">jQuery.com</a>

    <!-- JQUERY -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    <script>
        (function ($) {
            // EXAMPLE 1
            $("a").each(function () {
                console.log(this.title);
            });
        })(jQuery);                      // ... everything works fine.


        (function ($) {
            // EXAMPLE 2
            $("a").each(function () {
                console.log(this.title);
            });
        });           // ... missing (jQuery). Why isn't this working?


        $(function () {  // ... notice the $ at the beginning.
            // EXAMPLE 3
            $("a").each(function () {
                console.log(this.title);
            });
        });           // ... missing (jQuery). Why IS this working?


            // EXAMPLE 4
            $("a").each(function () {
              console.log(this.title);
            });                          // ... everything works fine.
    </script>
</body>

我将澄清我对代码的理解，如果你以非常基本的方式回答我，我将非常感激。请指出我所有的误解！

到目前为止我的理解和问题：
示例1：我创建了一个匿名JavaScript函数。此功能在浏览器读取它的那一刻正确执行。我把它传递给了jQuery-Object（带（$）但我不知道为什么这一点很重要）。从现在开始，我的功能就是说＆＃39; jQuery（它理解它的语法 - 我假设）。在我的JavaScript函数的最后，我再次传递jQuery对象（但为什么这是必要的？）。请赐教。

示例2：我在最后没有（jQuery）的情况下尝试了相同的功能。现在它不起作用。我明白缺少什么。但为什么（jQuery）最终如此重要？

示例3：现在我用$启动了我的Javascript函数，我假设从现在起我的整个函数都是在jQuery对象中的WRAPPED。在这个jQuery-object中，我的函数理解jQuery语法。最后需要NO（jQuery）。

示例4：这里我没有构建JavaScript函数。我只是使用jQuery来选择并返回（＆＃34; a＆＃34;）。此代码在浏览器读取的第二个代码中执行。无需等待文件准备就绪。

我的问题主要是：
在例1中，为什么（$）在开始时和（jQuery）在最后是必要的？什么目的？

我真的很感谢更长的答案，我可以更深入地了解＆＃34;正确阅读jQuery语法＆＃34;并谈论jQuery语法及其需要。感谢。

Answer 1

我创建了一个匿名的JavaScript函数。此功能在浏览器读取时立即执行。

不完全。您可以创建一个函数表达式。

function () { }

然后，您使用()关注它，片刻之后再调用它。

你可以这样做：

var myfunction = function ($) { ... };
myfunction(jQuery);

我将它传递给jQuery-Object（带（$）但我不知道为什么这在那时很重要。）

没有。您正在定义一个函数。它接受一个参数，其值被赋值给一个名为$的局部变量。

从现在起我的函数'讲'jQuery（它理解它的语法 - 我假设）。

语法属于JavaScript，而不是jQuery。

在我的JavaScript函数的最后，我再次传递jQuery对象（但为什么这是必要的？）。请赐教。

您是第一次传递jQuery对象。当你调用它时，它是你传递给函数的参数。 jQuery（jQuery对象）的值被分配给本地$变量。

这用于两个目的：

它允许您使用$变量，而不必担心它会被Prototype JS，Mootools或其他任何认为使用像$这样通用的东西的图书馆所覆盖。作为变量名称。
它允许您拥有不会污染全局范围的局部变量。

我在最后没有（jQuery）的情况下尝试了相同的功能。现在它不起作用。我明白缺少什么。但为什么（jQuery）最终如此重要？

()非常重要，因为没有它们就不会调用该函数。

jQuery非常重要，否则$将在函数中undefined。

现在我用$
启动了我的Javascript函数

在这里，您将函数表达式作为参数调用函数$()。

$是一个可怕的重载函数，它根据您传递的参数类型执行许多不同的操作。

如果你传递一个函数，那么它会将该函数指定为文档ready事件处理程序。

当DOM加载完毕后，将触发该事件并调用该函数。

这里我没有构建JavaScript函数。我只是使用jQuery来选择并返回（“a”）。此代码在浏览器读取的第二个代码中执行。无需等待文件准备就绪。

是

Answer 2

首先，没有“jQuery语法”。 jQuery是一个用JavaScript编写的库，因此语法是JavaScript。

示例1：我创建了一个匿名JavaScript函数。此功能在浏览器读取它的那一刻正确执行。我传递了jQuery-Object（带（$）但我不知道为什么这在那一点很重要）。从现在开始我的函数'讲'jQuery（它理解它的语法 - 我假设）。在我的JavaScript函数的最后，我再次传递jQuery对象（但为什么这是必要的？）。请赐教。

您似乎知道函数和参数的工作原理。所以看看你的代码：

(function ($) {
        // EXAMPLE 1
        $("a").each(function () {
            console.log(this.title);
        });
    })(jQuery);

定义一个带有一个参数的匿名函数：一个名为$的变量，您在语句$("a")中使用它。然后调用匿名函数并将其传递给jQuery对象，因此在函数内部$ === jQuery。

示例2：我在最后没有（jQuery）的情况下尝试了相同的功能。现在它不起作用。我明白缺少什么。但为什么（jQuery）最终如此重要？

最后没有()，你甚至都没有调用你的功能。您只需定义它然后丢失它，因为您没有将其分配给变量。
如果只放置()，它将无效，因为函数参数$未定义并覆盖全局$（window.$）。

但是，如果您将该函数声明为function()，我认为它会起作用，因为$会引用window.$。

示例3：现在我用$启动了我的Javascript函数，我假设从现在起我的整个函数都是在jQuery对象中的WRAPPED。在这个jQuery-object中，我的函数理解jQuery语法。最后需要NO（jQuery）。

现在你将$称为一个带有一个参数的函数：你的匿名函数。

示例4：这里我没有构建JavaScript函数。我只是使用jQuery来选择并返回（“a”）。此代码在浏览器读取的第二个代码中执行。无需等待文件准备就绪。

是的，你构建了一个函数，并将它作为参数传递给each()返回的对象的$("a")函数。

我的问题主要是：
在例1中，为什么（$）在开始时和（jQuery）在最后是必要的？目的是什么？

函数参数的目的是什么？

但你似乎并不理解：$只是一个变量（或者你想要的函数，但在JS函数中是变量）。

Answer 3

你的问题的解决方案归结为理解JavaScript中的闭包......而不是jQuery - jQuery只是使用闭包。

使用闭包，您可以对其中的内容进行范围调整，并将参数传递给该闭包，以便在其中使用。

对于您的示例2，如果您将jQuery传递给闭包，它将正常工作。像：

(function ($) 
{
  $("a").each(function () {
    console.log(this.title);
  });
})(jQuery); // arguments passed in here

因为你最后没有传入jQuery，所以参数$是未定义的，因此在$('a')的情况下无法调用。以我改变的方式编写时，jQuery被赋值给$参数，该参数可用于闭包内的代码。

同样对于你的例子3，你没有传入jQuery，你的闭包中也没有变量$，所以它不起作用。请注意，您可以将其更改为（仅供说明之用）：

(function (thisIsJquery) 
{
  thisIsJquery("a").each(function () {
    console.log(this.title);
  });
})(jQuery);

现在jQuery被分配给参数thisIsJquery，并且它在闭包中可用。

至于你的例子4，$被定义在它所定义的闭包内（而不是其中的另一个闭包），所以它很容易使用。

闭包是隐藏实现的绝佳方式，并提供了一种在JavaScript中创建private的方法。

进一步阅读：

http://www.w3schools.com/js/js_function_closures.asp

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

Answer 4

我只关注那些不起作用的东西。以下代码段：

(function ($) {               
   $("a").each(function () {
     console.log(this.title);
   });
}) // not calling function

首先，你没有调用这个函数。所以，里面的任何东西都不会运行。所以，您可能认为最后添加()可能会解决它。

但这不是全部！

因为$在代码段之外引用jQuery。但是，由于您将命名参数包含为$且未向其传递任何内容，因此代码段内的$会将外部的undefined隐藏起来。由于它没有分配任何值，因此它是undefined is not a function。所以你最终会得到

($)

为了证明这一点，添加$将起作用，因为现在，命名参数$指的是指向jQuery的{{1}}。

jQuery中的匿名函数语法

4 个答案:

但这不是全部！