Detailed explanation of jQuery events and animation basics

Today we will talk about events and simple animations in jquery. After all, their foundation is the foundation of advanced and gorgeousness! !

1. Events

event

ready   ready

2. Mouse Events

Method

Click(fn)

$(document).ready(function(){
 $("dd>img").click(function(){
 $("dt>img").show();
 });

mouseover(fn)     Mouse pointer is moved out

mouseout(fn)       When the mouse pointer is moved out

 $("#nav .navsBox ul li").mouseover(function(){
  $(this).addClass("onbg"); //Add class style to this element.onbg }).mouseout(function(){
  $(this).removeClass("onbg");//Remove class style for this element.onbg });

hover()

 $(".top").hover(function(){
  $(this).addClass('bgreen');
 },function(){
 $(this).removeClass('bgreen');
 }); 

3. Keyboard events

keydown()           When pressing the keyboard

keyup()

keypress()         When a printable character is generated

$(function(){
 $("[type=password]").keyup(function(){
 $("#e").append("keyup");
 }).keydown(function(){
  $("#e").append("keydown");
 }).keypress(function(){
  $("#e").append("keypress");
 });
 
 $(document).keydown(function(event){
  if(=="13"){
  alert("Are you sure you want to submit it???");
  }
 });
});

4. Form Events

focus()                                                              �

Losing focus

$(function(){
  $("input").focus(function(){ 
   $(this).next().css("color","red");
   //alert("1123");
  });
  $("input").blur(function(){
   $(this).next().css("color","");
  });
  });

Binding events and removal events

bind(type,[data],fn)   (binding)

type      Mainly includes basic events such as blur, focus, click, mouseout, etc. In addition, it can also be customized events

[data]   The additional data object passed as the attribute value to the event object, this parameter is not required

Used to bind processing functions

unbind([type],[fn])    (Remove)

type     Mainly includes basic events such as blur, focus, click, mouseout, etc. In addition, you can also customize events

fn                                                                                                                              �

$(function(){
 $("li").bind({
 mouseover:function(){
 $(this).css("background-color","green");
 },mouseout:function(){
 $(this).css("background-color","");
 }
 });
 $("li").unbind();
});

2. Animation

1. Control elements to display and hide $(selector).show([speed],[callback])

  $(selector).hide([speed],[callback])

speed: optional. Specifies the speed at which an element can go from hidden (display) to visible (not visible)

callback : optional. After the show function is executed, the function to be executed

$(function(){
  $("p:visible").hide(100);
 });
 //$("p:hidden").show(100);

2. Change the transparency of elements

$(function(){
 $("input").click(function(){
  $("img").fadeOut(100); // Easy to understand  //$("img").fadeIn(100); fade in });
 })

3. Change the height of the element

$(function(){
 $("h2").click(function(){
 // $(".txt").slideup();
 $(".txt").slideDown();
 });
});

The above is all the content of this article. I hope that the content of this article will help you study or work. I also hope to support me more!