Question

在 this 示例中，有人会显示jQuery onclick事件。我的节目如下：

$(function() {
    $('.post').on('click', function() {
        SOME STUFF
    });
});

但是第一行和最后一行在做什么？如果我删除这些行，它就不起作用了：

$('.post').on('click', function() {
    SOME STUFF
});

但为什么呢？在链接的示例中是第二个评论者。他以这种方式表现出来（没有第一行/最后一行）。

有人可以解释一下吗？

Answer 1

这是$( document ).ready(...)

的快捷方式

请参阅http://api.jquery.com/ready/

引用文档：

虽然JavaScript在呈现页面时提供了执行代码的load事件，但在完全接收到所有资源（如图像）之前，不会触发此事件。在大多数情况下，只要完全构造DOM层次结构，就可以运行脚本。传递给.ready()的处理程序保证在DOM准备好后执行，因此这通常是附加所有其他事件处理程序并运行其他jQuery代码的最佳位置。 [...]

以下所有三种语法都是等效的：
    * $( document ).ready( handler )
    * $().ready( handler ) (this is not recommended)
    * $( handler )

Answer 2

这是document.ready的缩写。它等待，直到加载整个文档，并且可以找到并绑定到类.post的元素。

如果省略该部分，jQuery函数将找不到该元素，并且您的事件将无效。

Answer 3

第一行和最后一行创建一个匿名函数。在计算机编程中，匿名函数是定义的函数，可能被调用，而不受标识符的约束。

在示例here中，它用于设置加载页面加载的事件侦听器。

$(function() {
    $('.something').on('click', function() {
        alert('hello');
        $(this).addClass('classOne');
    });
});

Answer 4

$(function(){});

是jQuery的简写

$(document).ready(function() {});

确保您的文档在执行任何内容之前已准备好进行操作。它在很多方面类似于浏览器window.onready事件。请参阅jQuery docs.。

如果您不将这些jQuery代码包装在这些函数中的任何一种形式，那么您将尝试在浏览器创建元素之前对其进行操作。您的代码不能保证失败，但您至少可能会出现不一致的行为。

需要额外的功能标签？

4 个答案: