简单谈谈jQuery(function(){})与(function(){})(jQuery)

首先，需要了解jQuery中一些常见的DOM事件。比如当页面加载完成时轮流，我们就可以使用jQuery的 ready() 函数。

在jQuery中， jQuery(function(){}) 和 (function(jQuery){})(jQuery) 这两种写法都与 ready() 函数有关系。

jQuery(function(){}) 写法表示当DOM加载完成时，执行函数体内的代码。它也可以表示 $(document).ready() 的简写方式。

示例：

jQuery(function(){
  alert('DOM加载已完成');
});

或

$(document).ready(function(){
  alert('DOM加载已完成');
});

(function(jQuery){})(jQuery) 写法表示创建一个自执行函数，并将jQuery作为参数传入。这种方式可以避免变量污染，只能在函数内部使用 jQuery 变量。

示例：

(function($){
  // code goes here
})(jQuery);

因此，在使用jQuery时，可以使用这两种写法之一，来确保代码不会影响其他全局变量，同时也能保证在DOM加载完成后执行函数。

总结起来，jQuery(function(){}) 和 (function(jQuery){})(jQuery) 两种写法非常相似，但是语法结构有所不同。它们都可以在DOM加载完成后执行函数体内的代码，但是第二种写法更加安全，控制变量的作用域，避免全局变量冲突。

下面是一个完整的示例，演示如何使用 jQuery(function(){}) 和 (function(jQuery){})(jQuery) 来处理应用程序中的一些操作。

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>jQuery Demo</title>
  <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script type="text/javascript">
    // 使用jQuery()函数
    jQuery(function(){
      var textInput = jQuery("#textInput");
      var outputDiv = jQuery("#outputDiv");
      textInput.keyup(function(){
        outputDiv.html(textInput.val());
      });
    });

    // 使用自执行函数
    (function($){
      var textInput = $("#textInput");
      var outputDiv = $("#outputDiv");
      textInput.keyup(function(){
        outputDiv.html(textInput.val());
      });
    })(jQuery);
  </script>
</head>
<body>

  <input type="text" id="textInput"/>

  <div id="outputDiv"></div>

</body>
</html>

在这个示例中，我们使用了 jQuery() 函数和 (function(jQuery){})(jQuery) 函数来初始化应用程序。它们都使用了 $("#textInput") 和 $("#outputDiv") 这些jQuery对象，来监听文本输入框的变化，并将文本显示在输出区域。

上面的代码是完整的HTML代码，可以复制到文件中运行，体验一下这个例子。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：简单谈谈jQuery(function(){})与(function(){})(jQuery) - Python技术站