首页 🎨烦文琐事

Day02


jQuery事件

jQuery事件语法

$("p").click(function(){
    //触发后的代码
});

常见jQuery事件方法

$(document).ready()

$(document).ready();

防止文档在完全加载之前运行jQuery代码

click()

$("#p1").click(function(){
    $(this).hide();
});

当按钮单击p1元素时会调用一个函数

mouseup()

$("#p1").mouseup(function(){
    alert("id='p1'");
});

当按钮单击p1元素后松开时会调用一个函数

dbclick()

$("#p1").dblclick(function(){
    $(this).hide();
});

当按钮双击p1元素时会调用一个函数

mouseenter()

$("#p1").mouseenter(function(){
    alert("id='p1'");
});

当鼠标移动到p1元素时调用一个函数

mousedown()

$("#p1").mousedown(function(){
    alert("id='p1'");
});

当鼠标移动到p1元素后离开时调用一个函数

hover()

$("#p1").hover(
    function(){
        alert("鼠标移到了p1");
    },
    function(){
        alert("鼠标离开了p1");
    }
);

当鼠标移动到p1元素时调用第一个函数,当离开p1元素后调用第二个函数

focus()

$("input").focus(function(){
    $(this).css("background-color","#cccccc")
});

元素获得焦点(选中元素)时,触发函数(通常用于文本框中)(运用场景:用户单击文本框改变边框颜色等)

blur()

$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});

元素失去焦点时,触发函数


jQuery效果

隐藏/显示

hide()

$("#hide").click(function(){
    $("p").hide();
});

点击id="hide"元素的按钮隐藏元素

show()

$("#show").click(function(){
    $(this).show();
});

点击带id="show"元素的按钮显示元素

toggle()

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

来回切换hide()和show()

语法

$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);

参数是选填的:
speed参数为隐藏/显示的速度,可以取值:"slow","fast",毫秒(不带单位)
clallback参数为隐藏/显示完成后执行的函数名

实例:

$(".hidebtn").click(function(){
    $("div").hide(1000,function(){
        alert("Hide() 方法已完成!");
    });
});

淡入淡出

fadeIn()

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

淡入隐藏的元素,实例见https://www.runoob.com/try/try.php?filename=tryjquery_fadein

fadeOut()

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

淡出可见元素,实例见https://www.runoob.com/try/try.php?filename=tryjquery_fadeout

fadeToggle()

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

来回切换fadeIn()和fadeOut(),实例见https://www.runoob.com/try/try.php?filename=tryjquery_fadetoggle

fadeTo()

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

将元素淡入淡出到选择的不透明度https://www.runoob.com/try/try.php?filename=tryjquery_fadeto

fading语法

$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);

参数是选填的:
speed参数为隐藏/显示的速度,可以取值:"slow","fast",毫秒(不带单位)
opacity参数为不透明度(0~1)
clallback参数为隐藏/显示完成后执行的函数名




文章评论