jQuery学习笔记---阻止事件发生及事件发生顺序及表单提交示例应用

最新推荐文章于 2022-11-29 10:45:24 发布

xiaoa~

最新推荐文章于 2022-11-29 10:45:24 发布

阅读量346

点赞数

分类专栏： jQuery学习笔记

本文链接：https://blog.csdn.net/qq_34964399/article/details/79363959

版权

jQuery学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

阻止事件发生2种写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a οnclick="return ClickOn()" href="http://www.baidu.com">dianwo</a>
    <a id="i1" href="http://www.baidu.com">赞</a>

    <script src="jquery-1.12.4.js"></script>
    <script>
    //给a标签添加click事件，而a标签自带href，所以，点击a标签，会执行click中的功能，然后跳转到百度，但是，如果你在功能中
    //return false，则不会跳转，下面是click绑定后阻止事件发生的2中写法
        function ClickOn() {
            alert(123);
            return false;
        }
        $('#i1').click(function(){
            alert(456);
//            return false;
        })
    </script>

</body>
</html>

事件发生顺序

    默认事件先执行：
      checkbox  比如：以下例子，点击按钮，会先输出true。解析：开始checked：false；点击按钮，checked改成true；然后执行click事件，输出true
<input type="checkbox" />
   <script src="jquery-1.12.4.js"></script>
   <script>
       $(':checkbox').on('click',function(){
           console.log($(':checkbox').prop('checked'));
       })
   </script>
      
   自定义先执行
      a标签 
      submit提交 
      ...

表单提交示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .error_color{
            color: red;
            padding-left:10px;
        }
    </style>
</head>
<body>

    <form id="f1" action="http://www.baidu.com" >
        <div><input id='i1' 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(){
//            $.Login('#f1')
//        });
        $(':submit').on('click',function(){
            //删除标记的span标签，用以重新判断
            $('.error_color').remove();
            var flag = true;
            //获取input的值并判断是否为空，如果为空，则标记出来
            $('#f1').find('input[type="text"],input[type="password"]').each(function(){
                var v1 = $(this).val();
                if(v1.length==0){
                    flag = false;
                    var s = document.createElement('span');
                    s.innerText = '必填';
                    s.className = 'error_color';  //DOM添加css样式
                    $(this).after(s);
//                    return false; //如果这里写return false，只是跳出当前的each循环，而这个click事件仍是return true；所以还是会跳转百度。所以需要添加一个flag
                }
            });
            return flag;
        });
    </script>
</body>
</html>

xiaoa~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记---阻止事件发生及事件发生顺序及表单提交示例应用

阻止事件发生2种写法&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;&lt;/head&gt;&lt;body&gt; &a
复制链接

扫一扫

专栏目录