6一个月28日本,天阴下雨。
“ 微雨过,小荷翻,榴花开欲燃。玉盆纤手弄清泉,琼珠碎却圆。”
古老的JavaScript,且乱且复杂。封装成库,青春焕发,这样人们就能够品尝到原汁原味的JQuery。地道的Dojo,或是正宗的ExtJS大餐...。来自全球各地JS框架的交汇,口味和风格也日益趋同。然而,总有新的创造和惊喜,那是我们乐此不疲的原因 。
日本人開始吃饭的时候,总要说一句"我开动了!"。那么,JQuery是怎么自己开动的?困扰非常多刚開始学习的人, “孩子没娘,说来话长”,还要从Javascript说起...
一、JavaScript函数自己主动运行主要有下面方式:
1、window.onload
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>我开动了</title> <script src="js/jquery-1.8.3.js"></script> <script src="js/index.js"></script> <script type="text/javascript"> function MyAutoRun() { window.alert("我开动了!"); } window.onload=MyAutoRun; //仅须要加这一句 </script> </head> <body > </body> </html>
2、使用JS定时器来间断性的运行函数
把上面的window.onload=MyAutoRun;改为setTimeout("MyAutoRun()",1000); 这样就能够了。
3、改动网页的Body
改动网页的Body为:
<body onload="MyAutoRun();">
或者改为:
<body onload="javascript:MyAutoRun();">
4、调用匿名函数-这个是亮点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>我开动了</title> <script src="js/jquery-1.8.3.js"></script> <script src="js/index.js"></script> <script type="text/javascript"> (function(){ window.alert("我开动了!"); })(); </script> </head> <body > </body> </html>
匿名函数的格式为:
(function(){
//代码
})();
匿名函数在定义之后马上运行,甚至不用赋一个变量。出如今函数声明之后的一对括号马上对函数进行了调用,即使括号内无不论什么值,但也能够赋值。
Javascript自调用匿名函数是其神来之笔。改写 匿名函数例如以下:
(function(arg){ alert(arg+"自调用的"); })("我开动了!");
实际上,是加进去了一个參数。
也能够使用简单形式的封装调用:
var MyAutoRun = function() { return "我开动了!";} () ; alert(MyAutoRun);使用Function对象试一试,
var MyAutoRun = new Function("str","return str"); alert(MyAutoRun("我开动了!二、JQuery自己主动运行"));
1、index.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>我开动了</title> <script src="js/jquery-1.8.3.js"></script> <script src="js/index.js"></script> <script type="text/javascript"> </script> </head> <body > </body> </html>2、index.js
$(document).ready(function(){ window.alert("我开动了。"); });
上述代码中,
$(document).ready(function(){ //do something })
类似于Javascript中的OnLoad事件
window.onload= function(){ window.alert("我开动了!!"); };
两者差别:一是ready,表示文档结构DOM已经载入完毕(不包括图片等非文字媒体文件),二是onload,指示页面包括图片等文件在内的全部元素都载入完毕。(能够说:ready 在onload 前载入。)
一旦文档全部的DOM元素载入完成后。就运行ready方法,该方法的參数是一个函数,使用匿名函数作为參数是最好的选择。
还能够简写成
$(function(){ window.alert("我开动了!"); });也能够写成:
jQuery(function(){ window.alert("我开动了!"); });
版权声明:本文博主原创文章,博客,未经同意不得转载。