$(document).ready()和Window.onload区别
1.执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。
2.编写个数不同
window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个
$(document).ready()可以同时编写多个,并且都可以得到执行
3.简写方法
window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});
4.总结
以浏览器装载文档为例,在页面加载完毕后,浏览器会通过 Javascript 为 DOM 元素添加事件。
在常规的 Javascript 代码中,通常使用 window.onload 方法,
而在 Jquery 中,使用的是 $(document).ready() 方法。
$(document).ready() 方法是事件模块中最重要一个函数,可以极大的提高 Web 应用程序的速度。
1.创建元素节点
创建元素节点并且把节点作为
- 元素的子节点添加到DOM节点树上。
先创建元素点,创建元素节点使用Jquery的工厂函数$()来完成,
格式如下:$(html),该方法会根据传入的html字符串返回一个DOM对象,
并将DOM对象包装成一个JQuery对象后返回。创建一个元素节点JQuery代码如下:
$li1=$(" - ")
代码返回$li1就是一个由DOM对象包装成的JQuery对象。把新建节点添加到DOM树中JQuery代码如下:
$("ul").append($li1);
添加后页面中只能看到 - 元素默认的"·",由于没有为节点添加文本所以只显示默认符号,下面创建文本节点。
2.创建文本节点
使用JQuery的$()同样能够创建文本节点,创建文本节点的JQuery代码如下:
$li2=$(" - 菠萝
- ");
代码返回$li2就是一个由DOM对象包装成JQuery对象,把新建的文本节点添加到DOM树中JQuery代码如下:
$("ul").append($li2);
3.创建属性节点
$li3=$(" - 榴莲
- ");
代码返回$li3也是一个由DOM对象包装成JQuery对象,把新建的属性节点添加到DOM树中JQuery代码如下:
$("ul").append($li3);
节点插入的方法
1.append() 向每个匹配的元素内部追加内容
2.appendTo()将所有匹配的元素追加到指定的元素中。
实际上,使用该方法是颠倒了常规的$(A).append(B)的操作,
即不是将B 追加到A 中,而是将A 追加到B 中。
3.prepend() 向每个匹配的元素内部前置内容
4.prependTo() 将所有匹配的元素前置到指定的元素中。
实际上,使用该方法是颠倒了常规的 $(A).prepend(B)的操作,
即不是将B 前置到 A 中,而是将A 前置到B 中
5.after() 在每个匹配的元素之后插入内容
6.insertAfter() 将所有匹配的元素插入到指定元素的后面。
实际上,使用该方法是颠倒了常规的$(A).after(B)的操作,
即不是将B 插入到A后面,而是将A 插入到B 后面
7.before() 在每个匹配元素之前插入内容
8.insertBefore()将所有匹配的元素插入到指定的元素的前面,
实际上,使用该方法是颠倒了常规的$(A).before(B)的操作,
即不是将B 插入到A前面,而是将A 插入到B 前面