zoukankan      html  css  js  c++  java
  • jQuery的事件

    jQuery解决单/双击事件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            .box{
                 100px;
                height: 100px;
                background-color: red;
            }
        </style>
        <script type="text/javascript" src="../../jquery-3.3.1.js"></script>
        <script type="text/javascript">
            $(function(){
                var timer = null;
                $('.box').click(function(){
                    clearTimeout(timer);
                    timer = setTimeout(function(){
                        $('body').append('<p>单击事件</p>')
                    },300);
                });
                
                $('.box').dblclick(function(){
                    clearTimeout(timer);
                    $('body').append('<p>双击事件</p>')
                });
            })
        </script>
    </head>
    <body>
        <div class="box"></div>
        <input type="text" name="">
        <textarea></textarea>
    </body>
    </html>

    mousemove: 实时检测鼠标动向

    $('.box').mousemove(function(ev){
                    console.log('move');
                })

    focus:聚焦

    blur:失焦

    $('input').focus(function(ev){
                    console.log('聚焦了');
                })
                $('input').blur(function(ev){
                    console.log('失去焦点');
                })

    change: 表单元素改变时触发的事件,仅限于input,textarea,select.

    $('textarea').change(function(){
                    console.log('改变了');
                })
    $('input').change(function(ev){
                    console.log('选择');
                })

    select:文本元素发生改变时触发事件,此事件仅限于input  type类型为text和textarea表单元素。

    $('input:eq(1)').select(function(ev){
                    console.log('123')
                })

    oninput:实时监控文本框内的信息:

    document.getElementById('user').oninput = function(ev){
                    console.log(ev.target.value)
                }

    submit:表单元素发生改变时触发事件。

      form表单有默认的submit行为,当对input type=submit按钮点击时会触发form的默认action行为,此时可以调用jQuery·的submit方法,通过ev.preventDefault()来阻止默认事件,这样我们就能动态的向服务器发送数据了。

    $('form').submit(function(ev){
                    ev.preventDefault();
                    console.log('haha');
                    $.ajax({
                        url:"http://www.baidu.com",
                        type:'get',
                        success:function(data){
                            console.log(data);
                        }
                    })
                })
  • 相关阅读:
    jsp教程
    域名解析配置
    ulimit调优|设置普通用户的ulimit值
    进程之间的通信方式
    javascript中的发布订阅模式与观察者模式
    浏览器提供的几种存储
    jquery库与其他库(比如prototype)冲突的解决方法
    流量削峰
    微服务架构下的安全认证与鉴权
    windows远程桌面无法拷贝文件的问题与解决方法
  • 原文地址:https://www.cnblogs.com/stfei/p/9141173.html
Copyright © 2011-2022 走看看