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

最新推荐文章于 2024-08-02 10:17:09 发布

Gary强z

最新推荐文章于 2024-08-02 10:17:09 发布

阅读量2.1w

点赞数 2

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/blue225/article/details/51336595

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

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

【前言】

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

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

【准备】

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

$(document).ready(function(){

--- jQuery functions go here ----

});

<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函数有啥区别呢？

<!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{...}); 的简写。（详见：点击打开链接）