jQuery 里的事件机制-加载DOM

大家好,我是前端课程主讲李老师,jquery入门讲解好久没更新了,最近在忙前端开发工程师班新开班的事情,所以没怎么写,今天来给大家讲讲jquery的一个事件机制。

javascript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的。jQuery不仅提供了更加优雅的事件处理语法,而且极大地增强了事件处理能力。

jQuery 里的事件机制-加载DOM_第1张图片

加载 DOM

前面章节我们已经对比了window.onload()和$(document).ready()两种方法的区别。两种都是入口函数,只不过前者是js中的而后者是jQ中的。并且领着之间还是有区别的:

1、执行时机:

window.onload()方法是等到页面中所有元素加载完毕之后,才执行,即javascript此时才可以访问网页中的任何元素。而jQuery使用$(document).ready()方法,可以在DOM载入就绪时就对其进行操纵并调用执行它所绑定的函数。也就是说在jQ中,不需要等待所有图片加载完再执行。

但是就会有个问题,当获取图片宽高的时候,可能获取不到。不过jQ中单独提出了一个页面加载的方法——load()方法,如果这个处理函数绑定给window对象则会在所有内容加载完毕之后触发。

jQuery 里的事件机制-加载DOM_第2张图片

上面的代码,等同于js中的:

jQuery 里的事件机制-加载DOM_第3张图片

2、多次使用:

在javascript中入口函数只能写一次,如果写多个,下面会将上面的覆盖掉:

jQuery 里的事件机制-加载DOM_第4张图片

在jQuery中,入口函数可以写多次,不会出现覆盖的情况:

jQuery 里的事件机制-加载DOM_第5张图片

3、简写方式:

javascript中没有简写方式,但是在jQ中有简写方式:

jQuery 里的事件机制-加载DOM_第6张图片

今天内容就那么多,大家多做练习

还没关注的转发关注一下吧!下节内容我们继续讲jquery实践机制的内容!我们下节课见!

如果想学习更多前端开发教程,欢迎关注公众号【前端研究所】,每天更新更多新内容哦!

你可能感兴趣的:(jQuery 里的事件机制-加载DOM)