• 技术文章 >web前端 >前端问答

    jquery事件都有哪些

    长期闲置长期闲置2022-06-13 16:53:19原创217

    jquery事件:1、鼠标事件,包括click单击事件、mouseover事件等;2、键盘事件,包括keydown按下按键、keyup释放按键等;3、表单事件,包括focus获得焦点、blur失去焦点等;4、绑定事件,bind绑定事件;5、复合事件,包括hover方法触发事件、toggle()方法触发事件等等。

    本教程操作环境:windows10系统、jquery3.4.1版本、Dell G3电脑。

    jquery事件都有哪些

    jQuery事件是对JavaScript事件的封装,常用事件如:鼠标事件,键盘事件,表单事件,绑定事件,复合事件等等

    1.鼠标事件

    方法如下

    click() :单击事件、触发或将函数绑定到指定元素的click事件

    mouseover(): 触发或将函数绑定到指定元素的mouseover事件

    mouseout() :触发或将函数绑定到指定元素的mouseout的事件

    代码示例:

     $(function () {
                $("input").click(function () {
                    $("li").mouseover(function () {
                        $(this).css("background", "green");
                    }).mouseout(function () {
                        //this.style.background = "";
                        this.style.cssText = "background:";
                    });
                });
            });

    2.键盘事件:

    方法如下:

    keydown(): 按下按键时、触发或将函数绑定到指定元素的keydown事件

    keyup(): 释放按键时、触发或将函数绑定到指定元素的keyup事件

    keypress(): 产生可打印的字符时、触发或将函数绑定到指定元素的keypress事件

    代码示例:

      $(function () {
            $("p input").keyup(function () {
                $("#events").append("keyup");
            }).keydown(function () {
                $("#events").append("keydown");
            }).keypress(function () {
                $("#events").append("keypress");
            });
            $(document).keydown(function (event) {
                if (event.keyCode == "13") {
                    //按enter键
                    alert("确认要提交么?");
                }
            });
        });

    3.表单事件:

    方法如下:

    focus() : 获得焦点、触发或将函数绑定到指定元素的focus事件

    blur() : 失去焦点、触发或将函数绑定到指定元素的blur事件

    代码示例:

    // 查询输入框
      $("input[name='search']").focus(function(){
       $(this).val(""); 
      });
      $("input[name='search']").blur(function(){
       $(this).val("请输入要查询的问题"); 
      });

    2、

     $(function () {
     //给文本框添加边框样式
         $("input").focus(function() {
              $(this).addClass("myclass");
            }).blur(function() {
              $(this).removeClass("myclass");
        });
      });

    4、绑定事件:

    语法解析:

    bind(type,[data],fn),其中data不是必需的

    type:事件类型、主要包括blur、focus、click、mouseout等基础事件,此外也还可以是自定义事件

    fn : 用来绑定的处理函数

    代码示例:

    绑定一个、

    $("input[name=event_1]").bind("click",function() {
     $("p").css("background-color","#F30");
    });

    绑定多个、

    $("input[name=event_1]").bind({
    mouseover: function () {
     $("ul").css("display", "none");
    },
    mouseout: function () {
     $("ul").css("display", "block");
    }
    });

    移除方法:

    unbind([type],[fn]) 与绑定事件刚好相反,如果方法没有参数则表示移除全部的事件

    unbind如果要移除多个只需在两两之间添加一个空格即可

    代码示例:

     $(function () {
                $("li").unbind("click");
                $("li").unbind("mouseover mouseout");
        });

    注意:当unbind()不带参数时,表示移除所绑定的全部事件

    5、复合事件

    hover()方法

    语法:hover(enter,leave);

    该方法相当于mouseover与mouseout事件的组合

    代码示例:

    $("li").hover(function() {
                   $("li").css("background", "gray");
               }, function() {
                   $("li").css("background", "green");
               });

    toggle()方法

    toggle()方法用于模拟鼠标连续click事件

    代码示例:

    $("body").toggle(
    function () { }, //第一次点击触发
    function () { }, //第二次点击触发
    function () { } //第三次点击触发
    ...     //...
    );

    同时toggle()方法还有一个作用:切换元素可见状态

    $('input').toggle( 
      function () {
      $('ul').toggle(); //是显示的则隐藏,是隐藏的则显示
      },
      function () {
       $('ul').toggle(); //是显示的则隐藏,是隐藏的则显示
      }
     );

    视频教程推荐:jQuery视频教程

    以上就是jquery事件都有哪些的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:jquery
    上一篇:jquery roundabout怎么用 下一篇:jquery怎么改css定位属性
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• jquery怎么修改div的属性值• jquery怎么删除多个元素中的class属性• jquery怎么修改单元格值• jquery怎么让id元素不可编辑• jquery怎么移除一个元素
    1/1

    PHP中文网