首页 > 其他分享 >JQuery和JS的入口函数比较

JQuery和JS的入口函数比较

时间:2023-05-24 20:02:18浏览次数:31  
标签:JQuery 函数 入口 JS 文档 加载


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

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

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

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

区别二:执行时机不同:

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

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

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

 

JQuery的入口函数, 有以下几种写法:

写法一:

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

写法二:

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

写法三:(写法一的简化版):

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

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

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

 

标签:JQuery,函数,入口,JS,文档,加载
From: https://blog.51cto.com/u_16128050/6342818

相关文章

  • js中判断数组的几种方法
    vara=[];基于instanceofainstanceofArray;基于constructora.constructor===Array;基于Object.prototype.isPrototypeOf()Array.prototype.isProtypeOf(a);基于getPrototypeOfObject.getPrototypeOf(a)===Array.prototype;基于Object.prototype......
  • JDK自带工具jstat
    打印类加载器信息,其中8297为java项目的进程号,可以使用jps名称打印java所有项目的进程号jstat-class8297 打印编译情况jstat-compiler8297 编译16705,编译失败一个,失败的方法sun/misc/URLClassPathgetLoader统计堆空间的情况,间隔时间2秒,执行5次jstat-gc8297......
  • 【JavaScript用法】JavaScript(JS)的基本语法(JS数据类型,JS变量,JS运算符,JS流程控制语句
    JavaScript(JS)的基本语法目录JavaScript(JS)的基本语法一.与html结合方式二.注释三.数据类型:四.变量五.运算符(和Java有点类似)六.流程控制语句(和JAVA 类似):七.JS特殊语法:一.与html结合方式       1.内部JS:定义<script>,标签体内容就是js代码(可以理解为和html......
  • JQuery框架 -- JQuery怎么使用和各个版本的区别、JQuery对象和JS对象区别、JQuery选择
    目录一、概念:一个JavaScript框架。简化JS开发。二、快速入门三、JQuery对象和JS对象区别与转换四、选择器:筛选具有相似特征的元素(标签)4.1、基本操作学习4.2、选择器分类    1.基本选择器      2.层级选择器      3.属性选择器      4.过滤......
  • request.js学习
    importVuefrom'vue'importaxiosfrom'axios'importstorefrom'@/store'import{Modal,notification}from'ant-design-vue'import{VueAxios}from'../boot/axios'import{X_ACCESS_TOKEN,USER_NAME}f......
  • [JSOI2007]建筑抢修
    [JSOI2007]建筑抢修跟经典题poj1456非常像。首先如果两个都被选入那么截至时间T2小的放前面肯定更优,所以我们先按T2排序。然后逐个遍历建筑,建立一个维修时间为关键字的大根堆,如果前面花费的总时间+维修的时间小于当前的T2,直接加入。否则判断是否小于堆顶,如果小于堆顶则替换,因为......
  • Three.js教程:点、线、网格模型介绍
    推荐:将NSDT场景编辑器加入你的3D工具链其他系列工具:NSDT简石数字孪生点、线、网格模型介绍经过前面几章学习相信你对点模型Points、线模型Line、网格模型Mesh已经有了大致了解,本节课就对点、线、网格模型模型进行简单总结。点模型Points、线模型Line、网格网格模型Mesh都是由......
  • Nest.js + TypeOrm
    TypeORM集成$npminstall--save@nestjs/typeormtypeormmysql2/pg安装过程完成后,我们可以将TypeOrmModule导入到根目录中AppModule。import{Module}from'@nestjs/common';import{TypeOrmModule}from'@nestjs/typeorm';@Module({imports:[TypeOr......
  • 【算法学习前置】了解JS中的数组
    介绍此篇属于前端算法入门系列的第一篇,主要介绍常用的数组方法、字符串方法、遍历方法、高阶函数、正则表达式以及相关数学知识。文章主要包含以下内容:数组常用方法字符串常用方法常用遍历方法&高阶函数常用正则表达式数学知识一、数组常用方法push()在尾部追加,类似......
  • 【算法学习前置】了解js中的字符串
    二、字符串常用方法chat()返回指定索引位置处的字符。类似于数组用中括号获取相应下标位置的数据。conststr='abcdef'console.log(str.chat(2))//'c'console.log(srt[2])//'c'concat()类似数组的concat(),用来返回一个合并拼接两个或两个以上字符串。原字符串不......