jquery入口文件

最新推荐文章于 2023-10-10 21:38:01 发布

汤去三面

最新推荐文章于 2023-10-10 21:38:01 发布

阅读量515

点赞数

分类专栏： JavaScript

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

原生js入口函数

window.onload = function () {
    //代码
}
 
 1
2
3
 
 1
2
3

原生js函数入口函数是在文档加载完毕，而且图片资源加载完毕才开始执行

jquery入口函数

//第一种
$(document).ready(function () {
    //代码
})

//第二种
$(function () {
    //代码
});

//第三种
$(window).ready(function () {
    //代码
})
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14

jQuery的入口函数会在文档完毕，图片不加载就开始执行，如果操作图片资源，jquery会等待图片加载完毕执行

js和jquery入口函数的不同

区别一：个数及事件覆盖问题

Js入口函数只能出现一次，出现多次会存在事件覆盖的问题。
jQuery的入口函数，可以出现任意多次，并不会存在事件覆盖问题。

区别二：执行时机不同

Js入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。
jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。

例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>艾它社区</title>
<script type="text/javascript" src="lib/jquery/jquery.js"></script>
<script type="text/javascript" src="js/core.js"></script>
<script type="text/javascript" src="js/func.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/cids.js"></script>
</head>
<body>
<button id="btn1">点击我</button>
<div>我会变红的哦</div>

<button id="btn2">告警</button>
<button id="btn3">Notice</button>
</body>
</html>

$(function () {
function tellMsg() {
alert("Hello, Cids.");
};

$("#btn2").click(function() {
tellMsg();
});
});

$(window).ready(function () {
function tellMsg() {
alert("Hello, Notice.");
};

$("#btn3").click(function() {
tellMsg();
});
})

汤去三面

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery入口文件

原生js入口函数window.onload = function () { //代码}123123原生js函数入口函数是在文档加载完毕，而且图片资源加载完毕才开始执行jquery入口函数//第一种$(document).ready(function () { //代码})//第二种$(function () { //代码});/
复制链接

扫一扫

专栏目录