[学习笔记] 动态网页开发基础之jQuery中的事件与动画

# 学习 # · 2020-08-17

一、jQuery中的事件

1、事件分类:基础事件(鼠标事件、键盘事件、window事件、表单事件)和复合事件(鼠标光标悬停、鼠标连续点击)。

2、基础事件:

(1)基本语法:

事件名 = "函数名()";
DOM 对象.事件名 = 函数;

(2)载入事件:

$(document).ready(function(){
    //jQuery代码
});

(3)鼠标事件:

$('p').click(function(){});        //点击鼠标左键时触发
$('p').dbclick(function(){});    //迅速连续的两次点击鼠标时触发
$('p').mousedown(function(){});    //按下鼠标时触发
$('p').mouseup(function(){});    //松开鼠标时触发
$('p').mouseover(function(){});    //鼠标从一个元素移入另一个元素时触发,在其备选元素的子元素上来回进入时也会触发
$('p').mouseout(function(){});    //鼠标移出元素时触发,在其备选元素的子元素上来回进入时也会触发
$('p').mouseenter(function(){});    //鼠标移入元素时触发,在其备选元素的子元素上来回进入时不会触发
$('p').mouseleave(function(){});    //鼠标移出元素时触发,在其备选元素的子元素上来回进入时不会触发

(4)键盘事件:

$('input').keydown(function(){});    //键盘按下时触发
$('input').keyup(function(){});    //键盘释放按键时触发
$('input').keypress(function(){});    //键盘产生可打印的字符时触发

(5)浏览器事件:

//对浏览器窗口调整大小进行计数
$(window).resize(function() {
    $('span').text(x+=1);
});

3、绑定事件:

//基本语法
//type:事件类型;data:可选参数;fn:处理函数
$(selector).bind(type,[data],fn);

//实例(绑定一个和绑定多个)
$('on').bind("mouseover",function(){});

$('on').bind(
    mouseover:function(){},
    mouseout:function()
);

4、解除绑定事件:

//基本语法
$(selector).unbind(type,fn);

//实例
$('on').unbind("mouseover",function(){});

5、复合事件:

(1)hover():

//基本语法
//inFunction:规定 mouseenter 事件发生时运行的函数。
//outFunction:可选规定 mouseleave 事件发生时运行的函数。
$(selector).hover(inFunction,outFunction);

//实例
$('selector').hover(handlerIn, handlerOut);

(2)toggle():

//基本语法
//每当被选元素被点击时要运行的函数。
$('selector').toggle(function);

//实例
$("p").toggle(
    function(){$("p").css({"color":"red"});},
    function(){$("p").css({"color":"blue"});};
});

jQuery中的动画

1、控制元素显示:

//基本语法
//speed:可选规定显示效果的速度。
//easing:可选规定在动画的不同点上元素的速度。默认值为 "swing"开头结尾慢中间快。"linear" - 匀速移动。
//callback:可选show() 方法执行完之后,要执行的函数。
$(selector).show(speed,easing,callback);

//实例
$("button").click(function(){
    $("p").show();
});

2、控制元素隐藏:

//基本语法
$(selector).hide(speed,easing,callback);

//实例
$("button").click(function(){
    $("p").hide();
});

3、控制元素淡入:

//基本语法
$(selector).fadeIn(speed,easing,callback);

//实例
$("button").click(function(){
    $("p").fadeIn();
});

4、控制元素淡出:

//基本语法
$(selector).fadeOut(speed,easing,callback);

//实例
$("button").click(function(){
    $("p").fadeOut();
});

5、改变元素高度:

//基本语法
$(selector).slideUp(speed,easing,callback);
$(selector).slideDown(speed,easing,callback);

//实例:
$("button").click(function(){
    $("p").slideUp();
});

$("button").click(function(){
    $("p").slideDown();
});

6、自定义动画:

//基本语法
//styles:规定产生动画效果的一个或多个 CSS 属性/值。
$(selector).animate({styles},speed,easing,callback);

//实例
$("button").click(function(){
    $("#box").animate({height:"300px"});
});
如无特殊说明,本博所有文章均为博主原创。

如若转载,请注明出处:一木林多 - https://www.l5v.cn/archives/76/

评论