jQuery Events and Animation Fundamentals

Today we will talk about jquery events and simple animation, they are after all the foundation of advanced gorgeous fundamental! !

1. Events

1. window event

ready Ready

2. Mouse events

Method execution timing

click (fn) Click the mouse

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

mouseover (fn) When the mouse pointer moves

mouseout (fn) When the mouse pointer moves out

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

hover()

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

3. Keyboard events

When keydown () presses the keyboard

When keyup () releases the key

When keypress () produces printable characters

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

4. Form Events

focus () Gets Focus

blur () loses focus

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

Bind Events and Remove Events

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

type mainly includes basic events such as blur, focus, click and mouseout. In addition, it can also be a user-defined event

[data] Additional data object passed to event object as event. data property value, this parameter is not required

fn is used to bind handler functions

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

type mainly includes blur, focus, click, mouseout and other basic events. In addition, you can customize events

Handler for fn to unbind

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

2. Animation

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

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

speed: Optional. Specifies the speed at which elements go from hidden (visible) to visible (invisible)

callback: Optional. The function to execute after the show function is finished

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

2. Change the transparency of the element

$(function(){
 $("input").click(function(){
  $("img").fadeOut(100); // Shallow out 
  //$("img").fadeIn(100);  Fade in 
 });
 })

3. Change the height of the element

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