zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    AtCoder Beginner Contest 205
    Codeforces Round #725 (Div. 3)
    Educational Codeforces Round 110 (Rated for Div. 2)【A
    Codeforces Round #722 (Div. 2)
    AtCoder Beginner Contest 203(Sponsored by Panasonic)
    AISing Programming Contest 2021(AtCoder Beginner Contest 202)
    PTA 520 钻石争霸赛 2021
    Educational Codeforces Round 109 (Rated for Div. 2)【ABCD】
    AtCoder Beginner Contest 200 E
    Educational Codeforces Round 108 (Rated for Div. 2)【ABCD】
  • 原文地址:https://www.cnblogs.com/lixiang1013/p/7632558.html
Copyright © 2011-2022 走看看