jQuery事件详解之$(document).ready()

JavaScript018

jQuery事件详解之$(document).ready(),第1张

在页面加载结束后,浏览器会通过js为dom元素添加事件。原生的js中使用 window.onload 方法在JQ中使用$(document).ready()。这个方法在dom载入就绪时对其进行操纵并调用执行它所绑定的函数。

那么它和window.onload有何不同呢?

window.onload是在网页中所有元素 加上所有资源 ++完全加++载到浏览器后才执行。

而$(document).ready()中绑定的事件是在 dom完全就绪 时就可以被调用,此时对于jQuery来说都是可以被访问的(关联的资源可能并没有被加载完毕)。

举个例子来说,在$(document).ready()中定义了图片的宽高,但由于此时图片还没有被加载完毕,此时的宽高不会生效。要解决这个问题可以使用jQuery中的 load ()方法。

load()方法会在元素的onload事件中绑定一个处理函数,如果该处理函数绑定给window对象,则会在所有资源加载完毕后触发,如果load绑定在元素上则会在该元素加载完毕后触发。

既然window.onload比较完备为什么还要用jQuery中的$(document).ready()呢?

window.onload事件 每次只能保存对一个函数的引用 ,他会覆盖掉之前的函数,所以不能再现有行为上添加新的行为。如果引用了多个js文件,每个都需要window.onload方法就导致编码复杂。

使用$(document).ready()方法能够很好地解决这种问题,每次调用$document.ready()方法都会在现有行为上追加新的行为,这些行为会根据注册顺序依次执行。

根据ready()方法的API说明

这个方法接收一个function类型的参数ready(handler), 方法的作用是: Specify a function to execute when the DOM is fully loaded.

即当DOM加载完毕的时候,执行这个指定的方法.

因为只有document的状态ready之后,对page的操作才是安全的.

$(document).ready()仅在DOM准备好的时候执行一次.

与之相比,load事件会等到页面渲染完成执行,即等到所有的资源(比如图片)都完全加载完成的时候.

$(window).load(function(){…})会等整个页面,不仅仅是DOM,还包括图像和iframes都准备好之后,再执行.

而ready()是在DOM准备好之后就执行了,即DOM树建立完成的时候.所以通常ready()是一个更好的时机.

如果DOM初始化完成之后再调用ready()方法,传入的新的handler将会立即执行

注意:ready()方法多次调用,传入的handler方法会串联执行(追加).

而JavaScript中,window.onload是赋值一个方法,即后面的会覆盖掉前面的.

三种具体用法:

1、$()可以是$(expresion),即css选择器、Xpath或html元素,也就是通过上述表达式来匹配目标元素。

比如:$("a")构造的这个对象,是用CSS选择器构建了一个jQuery对象——它选择了所有的<a/>这个标签。如: $("a").click(function(){...})

就是在点击页面上的任何一个链接时的触发事件。确切地说,就是jQuery用<a/>这个标签构建了一个对象$("a"),函数 click()是这个jQuery对象的一个(事件)方法。 

2、$()可以是$(element),即一个特定的DOM元素。如常用的DOM对象有document、location、form等。如这样一行代码: $(document).find("div>p").html())

$()中的document是一个DOM元素,即在全文寻找带<p>的<div>元素,并显示<p>中的内容。

3、$()可以是$(function),即一个函数,它是$(document).ready()的一个速记方式。如常见的形式是这样的:

$(document).ready(function(){

alert("Hello world!")

})

扩展资料

js中this的用法

说到this,就不得不提到function,正是由于调用function的对象不同,才导致了this的指向不同。所以以前老是去记忆每种调用function的情况所对应的this,因为情况有限而且很少,所以这当然是可行的——对于聪明人来说。那么首先我们需要明确的一个事情是:function也是对象。

同时我们还需要明确的一个事情是:function执行时是在某个特定的上下文中执行的。比如你要console.log(a),没有a就无法支持函数的执行,所以某种意义上讲,a就是上下文的一部分。函数执行时它也需要一些额外的信息来支撑它的运行。

既然function是对象的话,就会有方法。而function中最核心的方法是call方法,这也是理解this最关键的方法。