jQuery 是如何判断HTML页面加载完毕的?它的原理是啥?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery 是如何判断HTML页面加载完毕的?它的原理是啥?相关的知识,希望对你有一定的参考价值。

jquery是一个轻量级的JS框架,这点相信大部分人都听过,而jquery之所以有这样一个称呼,就是因为它悄悄披了一件外衣,将自己给隐藏了起来。

//以下截取自jquery源码片段(function( window, undefined )   /*    源码内容    */)( window );

上面这一小段代码来自于1.9.0当中jquery的源码,它是一个无污染的JS插件的标准写法,专业名词叫闭包。可以把它简单的看做是一个函数,与普通函数不同的是,这个函数没有名字,而且会立即执行,就像下面这样,会直接弹出字符串。

(function( window, undefined )
alert("Hello World!");
)( window );

可以看出来这样写的直接效果,就相当于我们直接弹出一个字符串。但是不同的是,我们将里面的变量变成了局域变量,这不仅可以提高运行速度,更重要的是我们在引用jquery的JS文件时,不会因为jquery当中的变量太多,而与其它的JS框架的变量命名产生冲突。对于这一点,我们拿以下这一小段代码来说明。

var temp = "Hello World!";
(function( window, undefined )       var temp = "ByeBye World!";
)( window );
alert(temp);

这段代码的运行结果是Hello而不是ByeBye,也就是说闭包中的变量声明没有污染到外面的全局变量,倘若我们去掉闭包,则最终的结果会是ByeBye,就像下面这样。

var temp = "Hello World!";//    (function( window, undefined )
var temp = "ByeBye World!";//    )( window );
alert(temp);

由此就可以看出来,jquery的外衣就是这一层闭包,它是很重要的一个内容,是编写JS框架必须知道的知识,它可以帮助我们隐藏我们的临时变量,降低污染。

参考技术A jquery在

当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件。
$(document).ready()是向window.load事件注册事件的替代方法
即利用window.load事件.你读一下jquery的源代码就可以看到.
window.addEventListener( "load", jQuery.ready, false );
注:我读的是jquery1.6版本的源码.
参考技术B 这个问题我之前刚看过。
他用的不是window.onload
$(document).ready是在页面加载完毕时执行回调
而window.onload是在页面全部加载完成时,包括一些资源比如图片。
所以window.onload比$(document).ready更延后一些。

window.onload自然不必说,是浏览器自身支持的。
但是$(document).ready我看了一下源代码。
他根据的是document.documentElement对象去判断的。
他每次调用document.documentElement.scrollLeft方法
如果此方法产生了异常,就说明scrollLeft无法执行,此时页面还未加载完成,
所以他就用try块包含这条语句,然后catch住,用setTimeout方法,重新执行一遍。
直到scrollLeft可以执行时,就说明页面加载完成了,此时再去回调。
很有意思。

第五章jQuery

DOM文档加载的步骤

  1. 解析HTML结构。
  2. 加载外部脚本和样式表文件。
  3. 解析并执行脚本代码。
  4. DOM树构建完成。
  5. 加载图片等外部文件。
  6. 页面加载完毕。

执行时间不同

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。

$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。

编写个数不同

window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个

$(document).ready()可以同时编写多个,并且都可以得到执行

简化写法不同

window.onload没有简化写法

$(document).ready(function(){})可以简写成$(function(){});

 

基础选择器

    1.id选择器

         console.log($(‘#brother‘));

$(‘#brother‘).css(‘color‘,‘red‘);

//2.标签选择器

         //设置一个值
// $(‘a‘).css(‘color‘,‘yellow‘)
// 设置多个值 设置多个值得时候使用对象存储 key:value
$(‘a‘).css({‘color‘:‘yellow‘,‘font-size‘:‘24px‘});

//3.类选择器

$(‘.li3‘).css(‘background‘,‘green‘);

//4.通配符选择器 * 使用不是很频繁

console.log($(‘*‘));
//清空整个界面的dom元素
$(‘*‘).html(‘‘);

//1.后代选择器  div p

$(‘#box p‘).css(‘color‘,‘red‘);


//2.子代选择器 div > p

$(‘#box>p‘).css(‘color‘,‘yellow‘)


//3.毗邻选择器 匹配素所有紧接着选中元素的兄弟 +
$(‘#father+p‘).css(‘font-size‘,‘30px‘);



//4.兄弟选择器 ~
$(‘#father~p‘).css(‘background‘,‘blueviolet‘);


console.log($(‘li‘));

//5.获取第一个元素
$(‘li:first‘).css(‘font-size‘,‘50px‘);

//6.获取最后一个元素


$(‘li:last‘).css(‘font-size‘,‘50px‘);


$(‘li:eq(3)‘).css(‘font-size‘,‘50px‘);

基本过滤选择器:
//获取第一个 :first ,获取最后一个 :last

//奇数
$(‘li:odd‘).css(‘color‘,‘red‘);
//偶数
$(‘li:even‘).css(‘color‘,‘yellow‘);

//选中索引值为1的元素 *
$(‘li:eq(1)‘).css(‘font-size‘,‘100px‘);

//大于索引值1
$(‘li:gt(1)‘).css(‘font-size‘,‘50px‘);

//小于索引值1
$(‘li:lt(1)‘).css(‘font-size‘,‘12px‘);

属性选择器:
标签名[属性名] 查找所有含有id属性的该标签名的元素
$(‘li[id]‘).css(‘color‘,‘red‘);

//匹配给定的属性是what值得元素
$(‘li[class=what]‘).css(‘font-size‘,‘30px‘);
//[attr!=value] 匹配所有不含有指定的属性,或者属性不等于特定值的元素
$(‘li[class!=what]‘).css(‘font-size‘,‘50px‘);

// 匹配给定的属性是以某些值开始的元素
$(‘input[name^=username]‘).css(‘background‘,‘gray‘);
//匹配给定的属性是以某些值结尾的元素
$(‘input[name$=222]‘).css(‘background‘,‘greenyellow‘);

//匹配给定的属性是以包含某些值的元素
$(‘button[class*=btn]‘).css(‘background‘,‘red‘)


















































































以上是关于jQuery 是如何判断HTML页面加载完毕的?它的原理是啥?的主要内容,如果未能解决你的问题,请参考以下文章

如何判断网页是不是加载完毕

想用JAVA做个固定访问某网站的小程序,我想知道如何判断页面已经加载完毕或刷新完了。

js怎么判断div下的内容全部加载完毕

jquery easyui datagrid在进行初始化页面加载的时候,如何数据没有加载完毕,动态加载数据.

jquery是怎么实现:页面加载完毕,而图片未加载完成时,触发的事件?

jquery是怎么实现:页面加载完毕,而图片未加载完成时,触发的事件?