【前端】JQuery和JS的入口函数比较

2023-02-06 127

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： JQuery和JS的入口函数比较

一、区别

首先要知道JQuery入口函数和JS入口函数的区别：

区别一：在页面中书写个数不同：

（1）JS的入口函数只能出现一次，出现多次会存在后者将前者事件覆盖的问题。

（2）JQuery的入口函数，可以出现任意多次，并不存在事件覆盖问题。

区别二：执行时机不同：

（1）JS的入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的JS文件、外部的CSS文件、图片等。

（2）JQuery的入口函数，是在文档加载完成后就执行。文档加载指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载成功。

Ps：文档加载的顺序为：从上往下，边解析边执行。

二、写法

JQuery的入口函数，有以下几种写法：

写法一：

//文档加载完毕， 图片不加载的时候， 就可以执行这个函数。<scripttype="text/javascript">$(document).ready(function () {
alert("hello");
        })
</script>

写法二：

//文档加载完毕， 图片也加载完毕的时候， 再执行这个函数。<scripttype="text/javascript">$(window).ready(function () {
alert("hello");
        })
</script>

写法三（写法一的简化版）：

//文档加载完毕， 图片不加载的时候， 就可以执行这个函数。<scripttype="text/javascript">$(function () {
alert("hello");
        })
</script>

原生的JS的入口函数指的是：window.onload = function(){}: 如下所示：

//原生js的入口函数。页面上所有内容加载完毕， 才执行。//不仅要等文本加载完毕， 而且要等图片也加载完毕， 才执行函数。<scripttype="text/javascript">window.onload=function () {
alert("hello");
        }
</script>