jQuery优势
1、轻量级
2、强大的选择器
3、出色的DOM操作
4、可靠的事件处理机制
5、完善的Ajax
6、不污染顶级变量
7、出色的浏览器兼容性,支持IE6.0+、Firefox3.6+、Safari5.0+、Opera、Chrome
8、链式操作方式
9、隐式迭代
10、行为层与结构层的分离
11、丰富的插件支持
12、完善的文档
13、开源
jQuery代码的编写
在jQuery库中,$就是就jQuery的一个简写形式,$("#foo")和jQuery("#foo")是等价的
规范:
1、对于同一个对象不超过3个操作的,可以直接写在一行
2、对于同一个对象的较多操作,建议每行写一个操作
3、对于多个对象的少量操作,可以每个对象写一行,涉及子元素的,可以考虑缩进
建议:jQuery对象使用$开头,例:var $variable = jQuery对象,var variable= DOM对象
现在进入正题,来说说 页面加载完成的两种事件:
window.onload 与 $(document).ready() 的不同
window.onload | $(document).ready() | |
执行时机 | 必须等网页中所有的内容加载完毕后(包括图片)才能执行 | 网页中所有DOM结构绘制完毕后就执行,可能DOM元素关联的东西并没有加载完 |
编写个数 | 不能同时编写多个,即一个页面只能加载一个window.onload, 如果有多个,则会被最新的覆盖。 以下代码无法正确执行: window.onload = function(){ alert("ZZ"); }; window.onload = function(){ alert("W"); }; 结果只能输出 "W" | 能同时编写多个。以下代码正确执行: $(document).ready(function(){ alert("ZZ"); }); $(document).ready(function(){ alert("W"); }); 结果两次都会输出: 先输出"ZZ",再输出"W" |
简化写法 | 无 | $(document).ready(function(){ //····· }); 可以简写为: $(function(){ //····· }); |
注:一般情况一个页面响应加载的顺序是:域名解析 --> 加载html --> 加载js和css --> 加载图片等其他信息。
那么window.onload 应该在 “加载图片等其他信息” 之后才可以操作DOM;
那么window.onload 应该在 “加载图片等其他信息” 之后才可以操作DOM;
而$(document).ready() 在
“加载js和css”和“加载图片等其他信息”之间,就可以操作Dom。