zoukankan      html  css  js  c++  java
  • jQuery 绑定事件

    jQuery 绑定事件

    事件1:

    // 鼠标点击出发事件
    $('#id').click()
    
    // * 委托、外部创建新的标签,自动将id标签下的a标签做绑定事件
    $('#id').delegate('a','click',functon (){
    })
    $('#id').undelegate('a','click',functon (){
    })
    
    $('#id').bind('click',functon (){
    })
    
    $('#id').unbind('click',functon (){
    })
    
    $('#id').on('click',functon (){
    })
    
    $('#id').off('click',functon (){
    })
    其他

    事件2:

    :a标签与onclick事件执行 自定义事件优先级高。

    阻止事件发生:

    $('#id').click(function (){
    alert(xxx);
        // 阻止后续事件发生
        return false;
        // 允许后续事件发生
        return true;
    })
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <!--添加提交表单跳转文件-->
    <form action="s5.html" method="POST">
        <input type="text"/>
        <input type="submit" value="提交"/>
    </form>
    
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(':submit').click(function () {
            var v = $(this).prev().val();
            // 判断input内容是否为空
            if (v.length > 0) {
                // 不为空允许后续事件执行
                return true;
            } else {
                alert('请输出内容');
                // 终端后续发生事件
                return false
            }
        });
    </script>
    </body>
    </html>
    示例:简单表单验证处理

    事件3:

    页面加载完毕自动执行:

    // 当页面框架加载完毕之后,自动执行
    $(function(){
    })
    <!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" type="text"/></div>
        <div><input name="n2" type="password"/></div>
        <div><input name="n3" type="text"/></div>
        <div><input name="n4" type="text"/></div>
        <div><input name="n5" type="text"/></div>
    
        <!--提交按钮-->
        <input type="submit" value="提交"/>
    </form>
    
    <script src="jquery-1.12.4.js"></script>
    <script>
        // 当页面框架加载完毕之后,自动执行
        $(function () {
            // 按钮触发事件
            $(':submit').click(function () {
                // 删除.error样式的标签
                $('.error').remove();
                // 设置值
                var flag = true;
                // 取出input下的相应内容,并循环
                $('#f1').find('input[type="text"],input[type="password"]').each(function () {
                    // 取出input内容下面内容
                    var v = $(this).val();
                    // 判断input内容是否为0
                    if (v.length <= 0) {
                        // 如果为0设置false
                        flag = false;
                        // 创建span标签
                        var tag = document.createElement('span');
                        // 添加样式
                        tag.className = 'error';
                        // 添加内容
                        tag.innerHTML = " * 必填";
                        // 添加span标签到指定下个一位置
                        $(this).after(tag);
                        // return false;
                    }
                });
                return flag;
            });
        });
    </script>
    </body>
    </html>
    示例:表单验证、多输入框判断
  • 相关阅读:
    教育是什么?
    关于CTime::Format在Unicode下的输出问题及解决办法
    COleDateTime在Unicode下,Format函数会有问题。
    UNICODE字符集
    处理字符串String类和正则表达式
    关于datatable linq的转换
    js
    HDU 3874 Necklace
    HDU 1520 Anniversary party
    HDU 4314 Save the dwarfs
  • 原文地址:https://www.cnblogs.com/xiangsikai/p/10418556.html
Copyright © 2011-2022 走看看