您的位置：首页 > Web前端 > JQuery

第33日我疯了集成平台（六）-步履轻盈JQuery(四)

2015-10-27 09:21 567 查看

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("我开动了！");
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

第33日 我疯了集成平台（六）-步履轻盈JQuery(四)

第33日我疯了集成平台（六）-步履轻盈JQuery(四)