简述jQuery框架里,在DOM加载完成是运行的代码 ?
在 jQuery 框架中,要确保在 DOM 加载完成后运行代码,通常使用 $(document).ready()
方法。这个方法确保了在执行脚本之前,页面的 HTML 完全加载和解析完成,使得所有的 DOM 元素都可用和可操作。
使用 $(document).ready()
$(document).ready()
方法接收一个函数作为参数,该函数将在 DOM 完全加载和解析完成后执行。
语法:
$(document).ready(function() {
// 在这里写你的代码
});
或者,使用更简洁的语法:
$(function() {
// 在这里写你的代码
});
这两种写法是等价的,都能确保代码在 DOM 加载完成后执行。
示例
假设你想在页面加载完成后隐藏一个元素,你可以这样写:
$(document).ready(function() {
$('#myElement').hide();
});
或者简写为:
$(function() {
$('#myElement').hide();
});
为什么这很重要
在页面的 DOM 元素可以被 JavaScript 访问和修改之前运行脚本可能导致错误。使用 $(document).ready()
方法,你可以避免这些问题,因为它确保你的代码只在所有 DOM 元素都准备好后才运行。
jQuery 3.0 之后的用法
在 jQuery 3.0 及之后的版本中,推荐直接使用 $()
构造函数来实现文档就绪的功能,因为这时 $()
已经默认等同于 $(document).ready()
:
$(function() {
// 当 DOM 完全加载后执行的代码
});
总之,使用 $(document).ready()
或其简化形式是在 DOM 加载完成后安全运行代码的最佳实践,确保了页面元素在脚本尝试访问或修改它们之前已经加载和解析完毕。