jquery-事件之自动执行
Posted 狼来的日子里！
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery-事件之自动执行相关的知识，希望对你有一定的参考价值。
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>
以上是关于jquery-事件之自动执行的主要内容，如果未能解决你的问题，请参考以下文章