如何在jquery中运行一个函数

Posted 2023-02-19

【中文标题】如何在jquery中运行一个函数

【英文标题】：How to run a function in jquery

【发布时间】：2010-11-14 13:52:36

【问题描述】：

我是一个编程新手，我不知道如何在 JQuery 中存储一个函数并在多个地方运行。

我有：

$(function () 
  $("div.class").click(function()
    //Doo something

  );

  $("div.secondclass").click(function()
    //Doo something
  );

);

现在这2个“//Doo somethings”是一样的，我不想再写同样的代码了。

如果我说：

$(function () 

  function doosomething ()
  
    //Doo something
  

  $("div.class").click(doosomething);

  $("div.secondclass").click(doosomething);

);

这将在页面加载时运行该功能，而不是仅在点击时运行。

我该如何正确地做到这一点？

谢谢！

【参考方案1】：

以下应该可以很好地工作。

$(function() 

  // Way 1
  function doosomething()
  
    //Doo something
  

  // Way 2, equivalent to Way 1
  var doosomething = function() 
    // Doo something
  

  $("div.class").click(doosomething);

  $("div.secondclass").click(doosomething);

);

基本上，您在使用它的同一范围内声明您的函数（javascript 使用Closures 来确定范围）。

现在，由于 JavaScript 中的函数的行为与任何其他对象一样，您可以使用 .click(doosomething); 简单地将 doosomething 指定为在点击时调用的函数

在您使用doosomething()（没有() 的doosomething 指的是该函数但不调用它）或另一个函数调用（在这种情况下，click处理程序）。

【讨论】：

谢谢你的方法2，我得试试。但是该函数确实是在页面加载时运行的，因为在 jquery 中 $(function() 是文档加载的简写。所以至少方法 1 不起作用。

我对jQuery很陌生，所以你能解释一下第一行$(function() 吗？请问这条线的目的是什么？ tyvm

$ 是 'jQuery' 的简写。所以每次你在某个地方看到'$'，你必须认为这是jQuery函数，$(function());将使其不指定特定事件：代码将在文档准备好时执行。 $(函数()); === jQuery(文档).ready(函数());或 $(document).ready(function());

【参考方案2】：

我会这样做：

(function($) 
jQuery.fn.doSomething = function() 
   return this.each(function() 
      var $this = $(this);

      $this.click(function(event) 
         event.preventDefault();
         // Your function goes here
      );
   );
;
)(jQuery);

然后在准备好文档后，您可以执行以下操作：

$(document).ready(function() 
   $('#div1').doSomething();
   $('#div2').doSomething();
);

【讨论】：

在“文档就绪”之外创建一个函数真的有什么好处吗？

@Nuktu 是的，用于插件开发。

如果你在函数参数中使用了$，那么为什么还要调用jQuery而不是再次使用$呢？

它通过 jQuery，因此即使您有其他分配给 $ 的库，此版本也可以工作。形参及其在函数内的使用具有局部作用域，因此不会像传递的对象名称那样冲突。

为什么你的括号里有 $ 而不是之前

【参考方案3】：

function doosomething ()

  //Doo something



$(function () 


  $("div.class").click(doosomething);

  $("div.secondclass").click(doosomething);

);

【参考方案4】：

或者（我会说最好），你可以这样做：

$(function () 
  $("div.class, div.secondclass").click(function()
    //Doo something
  );
);

【讨论】：

当 f.e div.secondclass 尚不存在时很好......不！

【参考方案5】：

您也可以这样做 - 因为您希望在任何地方都使用一个函数，您可以通过直接调用 JqueryObject.function() 来实现。例如，如果您想创建自己的函数来操作元素上的任何 CSS：

jQuery.fn.doSomething = function () 
   this.css("position","absolute");
   return this;

以及如何称呼它：

$("#someRandomDiv").doSomething();

【参考方案6】：

这是最容易混淆的解决方案吗？我不相信 jQuery 的想法是创建这样的代码。还有我们不想冒泡事件的假设，这可能是错误的。

将doosomething() 简单地移动到$(function() 之外会使其具有全局范围并保持代码简单/可读。

【讨论】：

但是如果只用在JQuery函数中，最好不要污染全局作用域，保留在它所属的地方。

【参考方案7】：

我在现代 JavaScript 中的简单方法：

$(
  $("div.class").click(() => doosomething);
  $("div.secondclass").click(() => doosomething);
);