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