【jQuery】关于jQuery中$(function() {});

https://blog.csdn.net/blue225/article/details/51336595

因为一直以来都是在进行后端开发，而对前端开发则接触得极少，其实是从心里面潜意识下也是对这方面有些抵触了，觉得页面调整是个麻烦事，浪费时间而又没啥成就感，所以也不太愿意花时间在这上面了。

最近因为工作的原因，不得不去接触一些前端页面开发的东东，然后发现其实前端开发也没有那么枯燥难耐，像CSS/jQuery还是挺有意思的，简单的几行脚本就可以让页面变得丰富多彩，下面这里就借此将在使用过程中遇到的一些小疑惑总结整理下吧。

【前言】

我们都知道，在开始jQuery前，需要把jQuery库引入进来，具体来说，就是在head 标签之间加入如下语句（详见：点击打开链接）：

[html]view plain copy
<head>  
<script type="text/javascript" src="jquery.js"></script>  
</head>  

【准备】

w3school告诉我们，一般而言，jQuery都会从document ready函数开始（详见：点击打开链接）

$(document).ready(function(){

--- jQuery functions go here ----

});

[html]view plain copy
<html>  
<head>  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">  
$(document).ready(function(){  
  $("button").click(function(){  
  $(this).hide();  
});  
});  
</script>  
</head>  
  
<body>  
<button type="button">Click me</button>  
</body>  
  
</html>  

【关于$(function() {}); 的疑惑】

不幸的时，鄙人发现：在实际项目中，他们写的jQuery脚本却不是这样，取ready函数而代之的$(function() {}); ，这是为什么呢？这跟document ready函数有啥区别呢？

[html]view plain copy
<!DOCTYPE HTML>  
<html>  
    <head>  
        <meta http-equiv="X-UA-Compatible" content="IE=edge">  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
        <meta http-equiv="Pragma" content="No-Cache">  
        <link rel=stylesheet type=text/css href="css/page5.css">  
        <script type="text/javascript" src="js/jquery-1.9.0.js"></script>  
        <script type="text/javascript">  
            $(function() {  
                  
                $('.workspace').hover(function() {  
                    $('.top_banner > .menu').fadeIn('normal');  
                }, function() {  
                    $('.top_banner > .menu').stop().fadeOut('slow');  
                });  
            });  
              
        </script>  
    </head>  
    <body>  
        ....  
    </body>  
</html>  

【解惑】

原来 $(function(){…}); 也可以写作 jQuery(function($) {…}); ，其实就是$(document).ready(funcrtion{...}); 的简写。（详见：点击打开链接）

【jQuery】关于jQuery中$(function() {});

猜你喜欢