Home >Web Front-end >JS Tutorial >What are the differences between writing $(function() {}); in JavaScript and not writing it?

What are the differences between writing $(function() {}); in JavaScript and not writing it?

高洛峰Original: 2017-01-04 16:10:491327browse

$(function() {....}) in javascript is a classic usage in jQuery, which is equivalent to $(document).ready(function() {....}), that is, after the page is loaded Before executing a function, if the DOM needs to be manipulated in the function, it will be safer to execute it after the page is loaded, so this writing method is very common when using jQuery. The code in

$(document).ready() is executed after the page content is loaded. If the code is written directly into the script tag, the script tag will be executed when the page is loaded. code. At this time, if the code executed in your tag calls the code or DOM that has not been loaded yet, an error will be reported. Of course, if you put the script tag at the end of the page, then there will be no problem. At this time, it is the same as ready. The effect is the same.

$(document).ready(function(){}) can be abbreviated as $(function(){});

After clicking on the paragraph, this paragraph will be hidden:

<html>
<head>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("p").click(function(){
 $(this).hide();
 });
});
</script>
</head>
<body>
 <p>If you click on me, I will disappear.</p>
</body>
</html>

If you remove $(document).ready(function() {});, the paragraph cannot be hidden:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
 $("p").click(function(){
 $(this).hide();
 });
</script>
</head>
<body>
 <p>If you click on me, I will disappear.</p>
</body>
</html>

But if you put the script at the end of the page, the hiding effect can be restored:

<html>
<head>
</head>
<body>
 <p>If you click on me, I will disappear.</p>
</body>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
 $("p").click(function(){
  $(this).hide();
 });
</script>
</html>

What are the functions and usages of (function(){})() in javascript

It has nothing to do with objects
(function(){})() represents the immediate execution of an anonymous Method
Generally used to isolate from the outside world, create a closure-like environment, create a scope chain to avoid variable conflicts

(function(){
 var a;
..........
})()

This article mainly introduces the writing of $(function() {}); in javascript What are the differences between not writing and not writing? I hope it will be helpful to everyone.

For more related articles about the difference between writing $(function() {}); in JavaScript and not writing it, please pay attention to the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：A brief analysis of the principle of Javascript self-executing anonymous function (function() { })()Next article：A brief analysis of the principle of Javascript self-executing anonymous function (function() { })()

See more

What are the differences between writing $(function() {}); in JavaScript and not writing it?

Related articles