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

简介: 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>


**本文首发于CSDN,为博主原创文章,如果需要转载,请注明出处,谢谢!**


完结!

相关文章
|
19天前
|
JavaScript
变量和函数提升(js的问题)
变量和函数提升(js的问题)
|
19天前
|
JavaScript
常见函数的4种类型(js的问题)
常见函数的4种类型(js的问题)
11 0
|
20天前
|
JavaScript
写一个函数将N组<>(包含开始和结束),进行组合,并输出组合结果 (js)
写一个函数将N组<>(包含开始和结束),进行组合,并输出组合结果 (js)
9 0
|
1月前
|
自然语言处理 JavaScript 网络架构
js开发:请解释什么是ES6的箭头函数,以及它与传统函数的区别。
ES6的箭头函数以`=&gt;`定义,简化了函数写法,具有简洁语法和词法作用域的`this`。它无`arguments`对象,不能用作构造函数,不支持`Generator`,且不改变`this`、`super`、`new.target`绑定。适用于简短表达式,常用于异步编程和高阶函数。
17 5
|
1月前
|
开发框架 前端开发 JavaScript
使用JavaScript、jQuery和Bootstrap构建待办事项应用
使用JavaScript、jQuery和Bootstrap构建待办事项应用
13 0
|
6天前
|
缓存 JavaScript 前端开发
js的入口函数,入口函数的作用
js的入口函数,入口函数的作用
12 4
|
11天前
|
JavaScript 前端开发
JQuery和JS的区别有哪些?
JQuery和JS的区别有哪些?
11 0
|
21天前
|
存储 前端开发 JavaScript
JavaScript如何封装一些常见的函数来提高工作效率
通过封装这些常见函数,你可以在项目中重复使用,提高代码的复用性和工作效率。这些函数包括获取元素、发起Ajax请求、处理本地存储、日期格式化、定时器等功能,可以在不同场景中减少重复的代码编写。
7 0
JavaScript如何封装一些常见的函数来提高工作效率
|
30天前
|
JavaScript
js开发:请解释什么是ES6的Generator函数,以及它的用途。
ES6的Generator函数是暂停恢复的特殊函数,用yield返回多个值,适用于异步编程和流处理,解决了回调地狱问题。
16 6
|
1月前
|
JavaScript
jQuery选择器案例之——index.js
jQuery选择器案例之——index.js
8 0