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>
View Code

 

posted on 2017-10-06 19:55  shisanjun  阅读(1456)  评论(0)  编辑  收藏  举报

导航