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>