讲给后台程序员看的前端系列教程(55)——jQuery入口函数


C语言自学完备手册(33篇)

Android多分辨率适配框架

JavaWeb核心技术系列教程

HTML5前端开发实战系列教程

MySQL数据库实操教程(35篇图文版)

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境,踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)


版权声明

  • 本文原创作者:谷哥的小弟
  • 作者博客地址:http://blog.csdn.net/lfdfhl

入口函数

在之前我们讲解JavaScript事件处理时学习了JavaScript页面事件例如window.onload表示当页面载入完毕后触发。示例如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>JavaScript onload</title>
		<script type="text/javascript">
			window.onload=function(){
				alert("当页面加载完毕时执行该函数")
			}
		</script>
	</head>
	<body>
		<h2 id="author" style="color: red;">本文作者:谷哥的小弟</h2>
        <h2 id="blog" style="color: red;">博客地址:http://blog.csdn.net/lfdfhl</h2>
	</body>
</html>

在jQuery中亦提供了类似的函数,我们常将其称为入口函数。在此,我们先来学习入口函数的常用写法。

入口函数常用写法

方式一

语法如下:

$(document).ready(function() {
	
});

示例如下:

$(document).ready(function() {
	alert("page load finish");
});

方式二

语法如下:

$().ready(function() {

});

示例如下:

$().ready(function() {
	alert("page load finish");
});

方式三

语法如下:

$(function() {
	
});

示例如下:

$(function() {
	alert("page load finish");
});

在实际开发中,为简便代码书写常用该方式。

入口函数与window.load的区别

jQuery入口函数与JavaScript原生window.onload功能相似,但是亦有差异;小结如下:

  • 加载模式不同
    JavaScript原生window.onload需等到界面全部(例如:文本,图片等)加载完毕才会执行。jQuery入口函数在基础界面(不含图片等资源)加载完毕即会被执行。

  • 加载次数不同
    在同一个页面中JavaScript原生window.onload只能调用一次。也就是说:虽然可以在页面中编写多个window.onload,但是仅仅最后一次有效,之前的onload将会被覆盖。不同的是,在同一个页面中可多次编写并有效执行jQuery入口函数。

发布了1022 篇原创文章 · 获赞 1986 · 访问量 238万+

猜你喜欢

转载自blog.csdn.net/lfdfhl/article/details/102657475