码迷,mamicode.com
首页 > Web开发 > 详细

jquery-事件之自动执行

时间:2017-10-06 20:35:01      阅读:287      评论:0      收藏:0      [点我收藏+]

标签:.class   通过   处理   ext   name   结束   esc   页面   速度   

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

 

jquery-事件之自动执行

标签:.class   通过   处理   ext   name   结束   esc   页面   速度   

原文地址:http://www.cnblogs.com/lixiang1013/p/7632558.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!