对元素的操作和事件的绑定需要等待一个合适的时机,可以看下面的例子:
如果这样,还没有等待元素加载完就给 div#panel 绑定了一个事件，
更改一下时机,下面三个程序都是可以成功绑定事件的,点击元素之后会弹出相应的alert(). 由于绑定事件在元素之后，所以可以成功获取 div#panel 的元素，并在 div#panel 上绑定点击事件。 根据ready()方法的API说明http://api.jquery.com/ready/。 这个方法接收一个function类型的参数ready(handler),方法的作用是: Specify a function to execute when the DOM is fully loaded.即当DOM加载完毕的时候,执行这个指定的方法.因为只有document的状态ready之后,对元素的操作才是安全的. $(document).ready() 仅在DOM准备好的时候执行一次,但可以多次绑定 ready 事件。 与ready相比,load事件会等到页面渲染完成执行,即等到所有的资源(比如图片)都完全加载完成的时候才会执行。 $(window).load(function(){…}) 会等整个页面,不仅仅是DOM,还包括图像和iframes都准备好之后,再执行.而ready()是在DOM准备好之后就执行了,即DOM树建立完成的时候.所以通常ready()是一个更好的时机. 如果DOM初始化完成之后再调用ready()方法,传入的新的handler将会立即执行. 注意:ready()方法多次调用,传入的handler方法会串联执行(追加).而JavaScript中,window.onload是赋值一个方法,即后面的会覆盖掉前面的. $( document ).ready(handler)
$().ready(handler)//(this is not recommended)
$(handler) Window对象表示浏览器中打开的窗口: http://www.w3school.com.cn/jsref/dom_obj_window.asp
Document对象表示载入浏览器的HTML文档: http://www.w3school.com.cn/jsref/dom_obj_document.asp
Event 即事件,代表了各种状态:http://www.w3school.com.cn/jsref/dom_obj_event.asp 事件句柄使我们可以在事件发生的时候附加一些操作和处理,比如按钮点击事件发生的时候,进行什么什么操作.上面的参考链接中含有一个属性列表,对应各种事件,可以利用这些属性定义事件的行为.文中关注的onload就是其中一个事件. onload 事件: http://www.w3school.com.cn/jsref/event_onload.asp onload 事件是在加载完成后立即发生.(注意其中的l是小写).把事件绑定放在body里,元素之后:
jQuery $(document).ready()和window.onload
$(document).ready()的三种简写
window对象和document对象
Event对象
onload事件