jQuery Events and Animation Fundamentals
- 2021-07-22 09:00:07
- OfStack
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();
});
});