第三十三天我为集成平台狂（六）-步履轻盈的JQuery(四)

最新推荐文章于 2024-10-02 05:39:15 发布

醉捞明月

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量1.1k

点赞数 2

文章标签： jquery javascript js extjs

本文链接：https://blog.csdn.net/zwszws/article/details/35568923

版权

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.οnlοad=MyAutoRun; //仅需要加这一句
           </script>
	</head>
	<body >
      </body>
</html>

2、使用JS定时器来间断性的执行函数

把上面的window.οnlοad=MyAutoRun;改为setTimeout("MyAutoRun()",1000); 这样就可以了。

3、修改网页的Body

修改网页的Body为：

　　或者改为：

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.οnlοad= function(){
       window.alert("我开动了!！");
  };

两者区别：一是ready，表示文档结构DOM已经加载完成（不包含图片等非文字媒体文件），二是onload，指示页面包含图片等文件在内的所有元素都加载完成。(可以说：ready 在onload 前加载！)

一旦文档所有的DOM元素加载完毕后，就执行ready方法，该方法的参数是一个函数，使用匿名函数作为参数是最好的选择。

还可以简写成

$(function(){
     window.alert("我开动了！");
	});

也可以写成：

jQuery(function(){
     window.alert("我开动了！");
	});

醉捞明月

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

第三十三天 我为集成平台狂（六）-步履轻盈的JQuery(四)

第三十三天我为集成平台狂（六）-步履轻盈的JQuery(四)