JQ——事件（表单、文档/窗口）

转载

mb5fe328e8a0a04 2020-01-27 20:43:00

文章标签 html javascript jquery 表单用户名 文章分类 代码人生

1、表单事件

(1)submit：表单提交

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表单事件</title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
               $("form").submit(function(){
                  alert("提交事件被触发了！");
               });
            });
        </script>
    </head>
    <body>
        <form>
        用户名：<input type="text" name="userName" value="zhai"><br>
        密码：<input type="password" name="password" value="123456"><br>
        <input type="submit" value="提交">
        </form> 
    </body>
</html>

JQ——事件（表单、文档/窗口）_jquery

（2）change：元素改变的时调用该事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表单事件</title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
               $("input").change(function(){
                alert("文本已被修改");
              });
            });
        </script>
    </head>
    <body>
        <form>
        用户名：<input type="text" name="userName" value="zhai"><br>
        密码：<input type="password" name="password" value="123456"><br>
        <input type="submit" value="提交">
        </form> 
    </body>
</html>

JQ——事件（表单、文档/窗口）_表单_02

将用户名从“zhai”改变为“zhai123”点击按键“Enter”后，出现对话框。

（3）foucus()：通过鼠标点击元素获取新的焦点后触发

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表单事件</title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
              $("input").focus(function(){
              $("span").css("display","inline").fadeOut(3000);
            });
        });
        </script>
    </head>
    <body>
        <input>
            <span>请输入您的用户名！</span>
        </input>
    </body>
</html>

JQ——事件（表单、文档/窗口）_用户名_03

用鼠标点击输入框后出现汉字。

（4）blur()：元素失去了焦点时触发

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表单事件</title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
              $("input").blur(function(){
              alert("输入框失去了焦点！");
            });
        });
        </script>
    </head>
    <body>
        <input type="text">
            <span>请输入您的用户名！</span>
        </input>
    </body>
</html>

JQ——事件（表单、文档/窗口）_用户名_04

先将鼠标定位到输入框内，再将鼠标定位到输入框外的时候触发blur事件。

2、文档/窗口事件：

（1）load()事件：指定的元素（及子元素）已加载时

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>文档/窗口事件</title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
              $("img").load(function(){
              alert("图片已经加载完毕！");
            });
        });
        </script>
    </head>
    <body>
    
            <img src="../img/1.jpg" width="300" height="200">
        
    </body>
</html>

JQ——事件（表单、文档/窗口）_表单_05

（2）resize()事件：当调整浏览器窗口大小的时候触发

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>文档/窗口事件</title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            x=0;
            $(function(){
             $(window).resize(function(){
                $("span").text(x+=1);
              });
            });
        </script>
    </head>
    <body>
          <p>调整了<span>0</span> 次大小。</p>
    </body>
</html>