Of Stack

jQuery makes interactive effects of web pages quickly and efficiently

  • 2021-07-24 09:17:48
  • OfStack

Events in jQuery

1. Basic events

The underlying events include

a: window Event

window event in javaScript and window onload = fn (); onclick and jQuery commonly used events are document ready events, corresponding to the method ready ()

$(document).ready(fn(){});

b: Mouse Events

Common mouse events are:

click (fn); Occurs when a single mouse is used, and fn represents a bound function

keydown (fn); When the mouse pointer moves, fn represents the binding function

blur (fn) Function executed when the mouse pointer moves out and loses focus

For example, the most common light rod event 


$(function () {
   // Gets all of the li Element 
   $("li").mouseover(function () {
    $(this).css("background", "pink");
   });
   // Register event 
   $("li").mouseout(function () {
    $(this).css("background", "");
   });
 });
<ul>
  <li>1 Examples </li>
  <li>2 Examples </li>
  <li>3 Examples </li>
 </ul>

c: Keyboard Events

Keyboard event refers to the event that occurs every time the user presses or releases a key when the keyboard is focused on the Web browser. The commonly used keyboards are keydown (), keyup () and keypress () 


// Keyboard event 
  $("input").keyup(function(event) {
   var s =event.keyCode;
   alert(s);
// Printing keyboard keycode Value 
}); <h2> Keyboard event </h2><br>  --<br>  <body>
 <input /><span id="first"> Pay attention to words </span>  <br>  --

d: Form Events

Form event is one of the most stable events and supports the most stable event. In addition to click events generated by user selecting radio boxes and check boxes, focus events are triggered when elements gain focus and blur events are triggered when elements lose focus 


// Form event 
   $("input").focus(function () {
    $("#first").addClass("a");
   })
   $("input").blur(function () {
    $("#first").removeClass("a");
   });
  });
---
 <h2> Keyboard event </h2>
 <input /><span id="first"> Pay attention to words </span>

e: Binding Events

To bind an event is to bind one or more events for the matched element colleague, using the bind () method

Syntax: bind (type, [data],, fn)

Corresponding unbind () release event

For example: Bind the light bar effect to an unordered list 


$("li").bind({
    "mousemove": function () {
     $(this).css("background", "blue");
    },  // Mouse over   Get the focus 
    "mouseout": function () {
     $(this).css("background", "");
    }, // The mouse moves out and loses focus 
    click: function () {
     alert(this.innerHTML);
    }
   }).unbind("mouseout mousemove");
      // Release event 
  });
--<body>
 <ul>
  <li>1 Examples </li>
  <li>2 Examples </li>
  <li>3 Examples </li>
 </ul>
 </body>

2. Compound events

The hover () and toggle () methods, which are similar to the ready () methods, are jQuery custom methods.

a: The hover () method is used to simulate mouse pointer hover events 


<script src="js/jQuery1.11.1.js" type="text/javascript"></script>
<script>
 $(function () {
  $("#menu").hover(function () {     // Mouse hover event   Change element css Style 
   $("#myacc").css("display", "block");
  }, function () {
   $("#myacc").css("display", "none");
  });
 });
</script>

Usually used in the drop-down of the website navigation bar, the hiding effect is equivalent to the mouseover and mouseout events of mouse events

b: The toggle () method removes this event for jquery above 1.9.

The toggle () method is equivalent to a continuous mouse click event that executes the fn 


$(function () {
   $("#one").toggle(
    function () {
     $("#two").show(); // Control element display 
    }, function () {
     $("#two").hide(); // Control element hiding 
    }
    );
  });
 // Generate similar to   Clicking the navigation bar has the effect of clicking again to close -

3.

a: Display and Hide of Control Elements

In jQuery, you can use "show () hide ()" to control the display and hiding of elements

Attribute: "speed" [callback]

The default values for speed are slow (0.6 s) normal (0.4 s) fast (0.2 s)

The former controls the speed at which the element is displayed or hidden, while the latter is the custom function of callback after the element executes the method 


----
$(function () {
   $("body").click(function () {
    $("img").show("slow");   // Click Form  1 Picture with slow The way appears 
   });
  });
----
-- Omit part of the code 
<img src="1.jpg">

b: A similar approach is to control the fade-in and fade-out of elements corresponding to fadein () and fadeout (), respectively

The corresponding syntax is $(selector). fadein ([speed], [callback])--controls elements by fading out

$(selector). fadeout ([speed], [callback])--Control element fade out

c: Method for changing element height

slideDown(),slideUp(),

Grammatical similarity

Related articles: