jQuery中的常用事件

Posted 2022-12-10 爽走不解释

这里介绍一些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事件

代码示例：

1、
// 查询输入框
  $("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(); //是显示的则隐藏，是隐藏的则显示
  
 );