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 ...
随机推荐
- 118th LeetCode Weekly Contest Powerful Integers
Given two non-negative integers x and y, an integer is powerful if it is equal to x^i + y^j for some ...
- JS禁用浏览器退格键实现思路及代码
[From] http://www.jb51.net/article/42562.htm 上周提交了一个项目(内部使用的),一同事提出个BUG,说要禁用退格键(backspace或者叫后退键),因为这 ...
- centos 7 禅道bug管理软件部署
2018-10-26 部署前置条件 关闭防火墙或者添加防火墙规则,使禅道端口可以通过防火墙 关闭防火墙与selinux 临时关闭防火墙 systemctl stop firewalld 永久防火墙开机 ...
- app测试中,ios和android的区别
App测试中ios和Android的区别: 1. Android长按home键呼出应用列表和切换应用,然后右滑则终止应用: 2. 多分辨率测试,Android端20多种,ios较少: 3. 手机操作系 ...
- (Frontend Newbie)JavaScript基础之函数
函数可以说是任何一门编程语言的核心概念.要能熟练掌握JavaScript,对于函数及其相关概念的学习是非常重要的一步.本篇从函数的基本知识.执行环境与作用域.闭包.this关键字等方面简单介绍Java ...
- ListView与ArrayAdapter的搭配使用
在android中,ListView是一种很重要的控件,一般的使用中,常建立一个所需类型的ArrayList,再通过ArrayAdapter把ListView绑定到ArrayList上,通过Array ...
- [linux] uptime 命令中关于平均负载的解释
1.当前时间 00:13:25 2.系统已运行的时间 9小时19分 3.当前在线用户 2 user 4.平均负载:0.17, 0.12, 0.07 最近1分钟.5分钟.15分钟系统的负载 为了更好地理 ...
- android studio 框架搭建:加入注解框架Annotations
参考github上的demo,新建一个project后,会有一个位于app文件夹下的局部build.gradle文件和一个位于根目录project下的全局build.gradle文件,我们要修改的是局 ...
- [html/js]点击标题出现下拉列表
效果 初始 点击后 参考代码 <!DOCTYPE html> <html> <head> <title>Layer group example</ ...
- 《Python编程从入门到实践》_第九章_类
创建一个简单的类 根据Dog类创建的每个实列都将存储名字和年龄.我们赋予了每条小狗蹲下(sit())和打滚(roll_over())的能力: class Dog(): ""&quo ...