因为一直以来都是在进行后端开发,而对前端开发则接触得极少,其实是从心里面潜意识下也是对这方面有些抵触了,觉得页面调整是个麻烦事,浪费时间而又没啥成就感,所以也不太愿意花时间在这上面了。
最近因为工作的原因,不得不去接触一些前端页面开发的东东,然后发现其实前端开发也没有那么枯燥难耐,像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{...}); 的简写。(详见:点击打开链接)