jQuery的$(document).ready()和JavaScript onload事件
对元素的操作和事件的绑定需要等待一个合适的时机,可以看下面的例子:
<!DOCTYPE html>
<metacharset="utf-8">
<html>
<head><title>1-1</title><scripttype="text/javascript">document.getElementById("panel").onclick= function() {alert("元素已经加载完毕 !");}/*执行错误*/</script>
</head>
<body><divid="panel">click me.</div>
</body>
</html>
如果这样,还没有等待元素加载完就绑定事件,浏览器Console中会报错:
<!DOCTYPE html>
<metacharset="utf-8">
<html>
<head><title>1-2</title>
</head>
<body>
<divid="panel">click me.</div>
<scripttype="text/javascript">document.getElementById("panel").onclick= function() {alert("元素已经加载完毕 !");}/*正确执行*/
</script>
</body>
</html>
第二种是放在window.onload中进行事件绑定:
<!DOCTYPE html>
<metacharset="utf-8">
<html><head><title>1-3</title><scripttype="text/javascript">window.onload= function() {document.getElementById("panel").onclick= function() {alert("元素已经加载完毕 !");}}</script>
</head><body>
<divid="panel">click me.</div>
</body></html>
第三种是jQuery的ready()方法传入绑定事件的方法:
<!DOCTYPE html>
<metacharset="utf-8">
<html>
<head><title>Panel</title><scriptsrc="jquery-1.11.2.js"type="text/javascript"></script><scripttype="text/javascript">$(document).ready(function() {document.getElementById("panel").onclick= function() {alert("元素已经加载完毕 !");}})</script>
</head>
<body><divid="panel">click me.</div>
</body>
</html>
jQuery $(document).ready()和window.onload
根据ready()方法的API说明http://api.jquery.com/ready/。
这个方法接收一个function类型的参数ready(handler), 方法的作用是: Specify a function to execute when the DOM is fully loaded.
注意:ready()方法多次调用,传入的handler方法会串联执行(追加).而JavaScript中,window.onload是赋值一个方法,即后面的会覆盖掉前面的.
$(document).ready()的三种简写
$( document ).ready( handler )$().ready( handler ) (thisis not recommended)$( handler )
window对象和document对象
Event对象
onload事件
onload使用解析
<bodyonload="inlineBodyOnloadTimeCounter();">
说明ready()方法和<body οnlοad=“”>是不兼容的.
jQuery的$(document).ready()和JavaScript onload事件相关推荐
- 全面解析jQuery $(document).ready()和JavaScript onload事件
这篇文章主要介绍了全面解析jQuery $(document).ready()和JavaScript onload事件的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下 对元素的操作和事件的绑 ...
- jQuery中$(document).ready()和window.onload的区别
$(document) ready()和window onload在表面上看都是页面加载时我们就去执行一个函数或动作,但是在具体的细节上$(document) ready()和window onlo ...
- jquery 中 $(document).ready() 与window.onload 的区别
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 windo ...
- jQuery中$(document).ready()和window.onload的区别?
document.ready和document.load的区别?(JQ中的$(document).ready()和window.onload的区别?) window.onload,是采用DOM0级事件 ...
- HTML里Dom onload和jQuery document ready这两个事件的区别
使用如下代码进行测试: <html> <script src="jquery_1.7.1.js"> </script> <script&g ...
- jquery $(document).ready() 与window.onload的区别
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 > ...
- jquery $(document).ready()与window.onload的区别
jQuery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 windo ...
- jquery (js中window.onload与jquery中$(document.ready())的区别)
jquery 学习之一(js中window.onload与jquery中$(document.ready())的区别) 耳听为虚,眼见为实.通过下面的实例可查看两者的异同(注意:aa.jpg最好是一张 ...
- js中window.onload 与 jquery中$(document.ready()) 测试
js中window.onload 与 jquery中$(document.ready())区别,验证代码如下(调换js代码和Jquer代码书写顺序测试,运行结果一样,因此与代码书写位置没关系): &l ...
最新文章
- c ef框架-mysql_.net EF框架 MySql實現實例
- sessionlistener方法中获取session中存储的值报空指针异常_从Golang实践中得到的教训...
- Spring Boot注解完成Restful API
- 向日葵远程使用备忘录
- linux Hello World 模块编程
- 小程序基础能力~网络
- python课程的中期报告_寒假中期学习报告
- 07Java Server Pages
- DirectAdmin面板在线解压缩的.tar.gz文件
- 所需即所获:像IDE一样使用 vim
- ddk开发 c语言,使用DDK提供的build进行编译驱动一点总结
- 精简win服务器系统,Windows Server 2016攻略—为云而生的极简平台Nano Server(2)
- 计蒜客 青出于蓝胜于蓝 dfs序+树状
- 2019 年第 32 周 DApp 影响力排行榜 | TokenInsight
- 如何在谷歌地图上标注宾馆饭店矢量点并叠加导出为图片
- iphone11拍照没有咔嚓声
- ruby调用python_ruby与python
- TensorFlow 2.X获取Flops和参数量(parameters)的方法(2022年)
- 数据分析之学术前沿分析 任务1:论文数据统计
- JustSoso笔记
热门文章
- html对图片轮播脚本怎么调用,【jquery前端开发】可调整的幻灯片(图片轮播)
- rust腐竹是什么意思_学习Rust 集合与字符串
- JAVA 开发axis2_基于Apache axis2开发Java Web服务
- 触发起名字使用正则_好名字一定在字音、字形、字意上比较吉利
- golang 切片 接口_如何理解Golang中的接口?
- android开发ui插件下载,TKUISDK-ANDROID
- Outlook 与 Outlook Express 的区别
- 如何实现一个简单的RPC
- 数据库发展研究报告(2021年)
- 2020新时尚之都指数报告