jQuery事件之页面框架加载后自动执行
1)概述
HTML执行是按自上而下编译,而<script>一般写在body结束之前。如果在HTML加载的过程中卡住,
比如加载图片等,没有显示出来,就会一直等图片出来,而不向下编译,而前面的HTML标签要使用script,这时候就会不生效。
如何避免这问题,可以使用$(document).ready()事件。即当页面框架加载完毕后,自动执行;而不是当页面所有元素完全加载完毕后,执行。
2)ready(fn)
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。
简单地说,这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法,
可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的 JavaScript函数都需要在那一刻执行。
有一个参数--对jQuery函数的引用--会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字,并因此可以不再担心命名冲突而放心地使用$别名。
请确保在 <body> 元素的onload事件中没有注册函数,否则不会触发+$(document).ready()事件。
可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照(代码中的)先后顺序依次执行。
3)使用方法
描述: 在DOM加载完成时运行的代码,可以这样写: jQuery 代码:
$(document).ready(function(){
// 在这里写你的代码...
});
描述: 使用 $(document).ready() 的简写,同时内部的 jQuery 代码依然使用 $ 作为别名,而不管全局的 $ 为何。 jQuery 代码:
$(function($) {
// 你可以在这里继续使用$作为别名...
});
4)例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.error{
color: red;
}
</style>
</head>
<body> <form id="f1" action="s5.html" method="POST">
<div><input name="n1" tex = "用户名" type="text" /></div>
<div><input name="n2" tex = "密码" type="password" /></div>
<div><input name="n3" tex = "邮箱" type="text" /></div>
<div><input name="n4" tex = "端口" type="text" /></div>
<div><input name="n5" tex = "IP" type="text" /></div> <input type="submit" value="提交" />
<img src="...">
</form>
<script src="jquery-1.12.4.js"></script>
<script> $(function(){
// 当页面所有元素完全加载完毕后,执行,放在$(function)()里面就是当页面框架加载完毕后,自动执行
$(':submit').click(function () {
$('.error').remove();
var flag = true;
$('#f1').find('input[type="text"],input[type="password"]').each(function () {
var v = $(this).val();
var n = $(this).attr('tex');
if(v.length <= 0){
flag = false;
var tag = document.createElement('span');
tag.className = "error";
tag.innerHTML = n + "必填";
$(this).after(tag);
// return false;
}
});
return flag; }); }); // $(':submit').click(function () {
// var v = $(this).prev().val();
// if(v.length > 0){
// return true;
// }else{
// alert('请输入内容');
// return false
// }
// }) </script>
</body>
</html>