原生JS想要页面加载完成后执行代码,可以使用onload事件:
window.onload = function () {
alert('onload');
};
Code language: JavaScript (javascript)
jQuery中对应的写法:
$(document).ready(function() {
alert("加载完毕!");
});
Code language: JavaScript (javascript)
也可以简写:
$(function() {
alert("加载完毕!");
});
Code language: JavaScript (javascript)
注意:onload事件多次注册时,后面的会覆盖前面的;jQuery的ready支持多次注册,多个ready函数都可以执行。
jQuery的ready和DOM的onload的区别:
onload需要等DOM元素创建完成、图片、CSS等全部资源加载完成才触发;ready在DOM元素创建完成后就触发,页面响应速度更快。jQuery中$(window).load()可以实现和原生onload一样的触发时机。
jQuery除了封装DOM操作外,还提供工具函数,常用的有map和each。 map函数:对数组里每一个元素执行指定函数处理,把处理结果返回,最终生成新数组。 示例:数组所有数值放大十倍
var arrayint = [32,54.654,784,265,89];
var arrayintnew = $.map(arrayint, function(item) { return item * 10; });
Code language: JavaScript (javascript)
这个处理函数类似委托/函数指针,把数据交给回调函数处理。
另外一个常用函数each。 $.each(array,fn):遍历数组每个元素并执行fn函数,没有返回值。简单说就是逐个遍历数组元素做处理,不需要返回新数组。 each可以处理字典对象,map不适合字典类型对象。
示例:拼接学生学号和姓名
var arraydic = { "123": "张飞", "456": "张三", "789": "张无忌" };
$.each(arraydic , function(key, value) { alert(key+"="+value); });
Code language: JavaScript (javascript)
普通数组遍历,key代表元素序号:
var arr = [10, 11, 12];
$.each(arr, function (key, value) { alert(key + "=" + value); });
Code language: JavaScript (javascript)
也可以省略回调参数,使用this获取当前遍历元素:
var arr = [10, 11, 12];
$.each(arr, function() { alert(this); });
Code language: JavaScript (javascript)
Previous: jQuery对象的问题
Next: 了解jQuery的选择器