Home >Web Front-end >Front-end Q&A >What are the jquery events?

What are the jquery events?

WBOY
WBOYOriginal
2022-06-13 16:53:195456browse

jquery events: 1. Mouse events, including click events, mouseover events, etc.; 2. Keyboard events, including keydown pressing keys, keyup releasing keys, etc.; 3. Form events, including focus gaining focus, blur loses focus, etc.; 4. Binding events, bind binding events; 5. Composite events, including events triggered by the hover method, events triggered by the toggle() method, etc.

What are the jquery events?

The operating environment of this tutorial: windows10 system, jquery3.4.1 version, Dell G3 computer.

What are the jquery events?

jQuery events are encapsulation of JavaScript events. Commonly used events include: mouse events, keyboard events, form events, binding events, compound events, etc.

1. Mouse event

The method is as follows

click(): click event, trigger or bind a function to the click event of the specified element

mouseover(): Trigger or bind the function to the mouseover event of the specified element

mouseout(): Trigger or bind the function to the mouseout event of the specified element

Code example :

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

2. Keyboard events:

The method is as follows:

keydown(): When the key is pressed, trigger or bind the function to The keydown event of the specified element

keyup(): Triggered when the key is released, or bind the function to the keyup event of the specified element

keypress(): Triggered when printable characters are generated, or Bind the function to the keypress event of the specified element

Code example:

  $(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. Form event:

The method is as follows:

focus(): Get focus, trigger or bind a function to the focus event of the specified element

blur(): Lose focus, trigger or bind a function to the blur event of the specified element

Code example:

// 查询输入框
  $("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, Binding event:

Syntax analysis:

bind( type,[data],fn), where data is not required

type: event type, mainly including basic events such as blur, focus, click, mouseout, etc. In addition, it can also be a custom event

fn: Processing function used for binding

Code examples:

bind one,

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

bind multiple,

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

move Exception method:

unbind([type],[fn]) is just the opposite of binding events. If the method has no parameters, it means removing all events.

unbind If you want to remove multiple Just add a space between the two

Code example:

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

Note: When unbind() takes no parameters, it means to remove all bound events

5. Compound event

hover() method

Syntax: hover(enter,leave);

This method is equivalent to the combination of mouseover and mouseout events

Code example:

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

toggle() method

toggle() method is used for simulation Continuous mouse click event

Code example:

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

At the same time, the toggle() method also has another function: switching the visible state of the element

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

Video tutorial recommendation:jQuery video Tutorial

The above is the detailed content of What are the jquery events?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn