JS入口函数和JQuery入口函数
首先,讲一下它们的区别:
(1)JS的window.onload事件必须要等到所有内容,以及外部图片之类的文件加载完之后,才会去执行。
(2)JQuery入口函数是在所有标签加载完之后,就会去执行。
接着,通过JS的一个覆盖问题引出对JQuery入口函数实现的解释。
JS的入口函数window.onload函数有一个覆盖的问题,当文档中出现2个window.onload函数的时候,后者会覆盖前者,导致功能实现不了。但是JQuery却没有这样的问题,重要是因为JQuery入口函数只是对封装好了的方法的一个调用,只不过传的参数不同而已。
最后,说说JQuery入口函数($(document).ready();)的实现方式。

首先,我们在script标签中我们先创建一个函数变量就叫$,然后,在后面调用。现在并没有任何效果,因为这个调用的只是一个空的对象,没有任何参数。如果我们想在$()后面继续调用,还需要做一些事情。我们看JQuery入口函数中是不是有个ready方法,那我们可以创建一个对象的属性就叫ready,然后将ready指向一个匿名的函数,现在我们就可以通过$().ready()来调用了。

我们可以用一个具体的函数测试一下:


接着,JQuery入口函数可以传一个函数(作为变量传入)进来,即$().ready(function(){}),然后用一个形参(func)变量接收,那么严执行接收的这个方法,只要调用一下(func())就行。

下面再看看JQuery入口函数前面的document参数,即$(document).ready(function(){}),这样和JQuery的入口函数就一模一样了。同样需要用一个变量接收。最后只要在ready函数里面去判断一下这个onload事件有没有(或者说有没有被赋值):
(1)有(被赋值),接收一个旧的函数,重新赋值onload事件,然后先去调用新的函数,接着再调用旧的函数,这样就不会有覆盖的问题,他俩个函数都实现了。
(2)没有,直接赋值个onload事件。

最后,我们来测试一下,由于document没有onload事件,我们可以用window来试一下。


这样就避免了函数覆盖的问题。
JS入口函数和JQuery入口函数的更多相关文章
- Jq_Ajax 操作函数跟JQuery 遍历函数跟JQuery数据操作函数
JQuery文档操作方法 jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 函数 ...
- jquery change() 函数 语法
jquery change() 函数 语法 作用:当元素的值发生改变时,会发生 change 事件.该事件仅适用于文本域(text field),以及 textarea 和 select 元素.cha ...
- jquery blur()函数 语法
jquery blur()函数 语法 作用:当元素失去焦点时发生 blur 事件.blur() 函数触发 blur 事件,或者如果设置了 function 参数,该函数也可规定当发生 blur 事件时 ...
- Jquery核心函数
在Jquery中,所有的DOM对象都将封装成Jquery对象,而且只有Jquery对象才能使用Jquery方法或者属性来执行相应的操作. 所以Jquery提供了一个可以将DOM对象封装成Jquery对 ...
- 5.js与jQuery入口函数执行时机
js与jQuery入口函数执行时机区别: JS入口函数是在所有资源加载完成后,才执行.(包括:页面.外部js文件.外部css文件.图片) jQuery入口函数,是在文档加载完成后就执行.文档加载完成指 ...
- [jQuery]入口函数(一) jquery.min.js 一定要单线程下载,复制粘贴容易入坑
jQuery入口函数 等着DOM结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完毕 $(function () { // 此处是页面DOM加载完成的入口 }); $(document).rea ...
- 01-老马jQuery教程-jQuery入口函数及选择器
前言 这套jQuery教程是老马专门为寒门子弟而录制,希望大家看到后能转发给更多的寒门子弟.视频都是免费,请参考课程地址:https://chuanke.baidu.com/s5508922.html ...
- 1.jQuery入口函数
<!--注意,如果需要对ie67兼容,我们可以使用原生低版本的jquery 比如说jquery-1.12.4.js--> <!DOCTYPE html> <html la ...
- 第69天:jQuery入口函数
一.jQuery入口函数 1.$(document).ready(function(){}); 2.$(function(){}); 二.事件处理程序 1.事件源 Js方式:document.get ...
随机推荐
- UVA - 10780 唯一分解定理
白书P171 对m,n!分解,质因子指数取min #include<iostream> #include<algorithm> #include<cstdio> # ...
- centos7安装SourceCodePro字体
1. 下载SourceCodePro字体,后缀应为.ttf. 2. 将字体文件复制到fonts(/usr/share/fonts)文件夹下: [root@centos fonts]# mv /home ...
- jQuery随笔-自定义属性获取+tooltip
1.Jquery自定义属性获取 1) 通过自定义属性值获取document console.log($('[data-id='+item_id+']',listWrap)); $('[data-id= ...
- linux运维基础知识
linux运维基础知识大全 一,序言 每一个微不足道的知识,也是未来的铺垫.每一份工作的薪资职位,也是曾经努力的结果. 二,服务器 1,运维人员工作职责: 1)保证数据不丢失:2)保证服务器24小时运 ...
- (转)shell--read命令的选项及用法
shell--read命令 原文:https://www.cnblogs.com/lottu/p/3962921.html http://blog.csdn.net/skdkjzz/article/d ...
- (转) sync命令
sync sync命令 sync命令用于强制被改变的内容立刻写入磁盘,更新超块信息. 在Linux/Unix系统中,在文件或数据处理过程中一般先放到内存缓冲区中,等到适当的时候再写入磁盘,以提高系统的 ...
- 推荐文章unity框架与工具
https://www.indienova.com/u/kuaile/blogread/1343
- 【计算机网络】SSL交互和握手过程
SSL消息按如下顺序发送: 1.Client Hello 客户发送服务器信息,包括它所支持的密码组.密码组中有密码算法和钥匙大小: 2.Server Hello 服务器选择客户和服务器都支持的密 ...
- keepalive学习之软件设计
软件架构如下图所示: Keepalived 完全使用标准的ANSI/ISO C写出. 该软件主要围绕一个中央I/O复用分发器而设计,这个I/O复用分发器提供网络实时功能. 主要设计目标着重于从所有的模 ...
- web前端与后台数据访问的对象封装
前言:通常情况下,在不使用angularJS/nodeJS/react等这类完整性的解决方案的js时,前端与后台的异步交互都是使用Ajax技术进行解决 一:作为java web开发工程师可能以下代码是 ...