jQery事件与特效

xiaozhangStu

发布于 2023-05-04 19:14:09

2840

发布于 2023-05-04 19:14:09

jQery事件与特效

事件

方法	描述	执行时机
click( )	触发或将函数绑定到指定元素的click事件	单击鼠标时
mouseover( )	触发或将函数绑定到指定元素的mouseover事件	鼠标指针移过时
mouseout( )	触发或将函数绑定到指定元素的mouseout事件	鼠标指针移出时
mouseenter( )	触发或将函数绑定到指定元素的mouseenter事件	鼠标指针进入时
mouseleave( )	触发或将函数绑定到指定元素的mouseleave事件	鼠标指针离开时

举例

$(".nav-ul a").mouseover(function(){
    $(this).css("background-color","#f01e28");
});
$(".nav-ul a").mouseout(function(){
    $(this).css("background-color","#ff2832");
});

方法	描述	执行时机
keydown( )	触发或将函数绑定到指定元素的keydown事件	按下键盘时
keyup( )	触发或将函数绑定到指定元素的keyup事件	释放按键时
keypress( )	触发或将函数绑定到指定元素的keypress事件	产生可打印的字符时

举例

$("[type=password]").keyup(function () {
    $("#events").append("keyup");
      }).keydown(function (e) {
    $("#events").append("keydown");
      }).keypress(function () {
    $("#events").append("keypress");
     });
$(document).keydown(function (event) {
     if (event.keyCode == "13") {
        alert("确认要提交么？");
    }
});

绑定事件

语法

 bind(type,fn);

举例

$(document).ready(function(){
    $(".on").bind("mouseover",function(){
        $(".topDown").show();
    });
});//一个

$(".top-m .on").bind({
    mouseover:function(){
        $(".topDown").show();
    },
    mouseout:function(){
        $(".topDown").hide();
    }
});//多个

移除事件

语法

unbind([type],[fn])

举例

$("#del").click(function(){
        $("#nav li:first").unbind("click", content1)
});

复合事件

语法

hover(enter,leave)//hover()方法相当于mouseover与mouseout事件的组合

toggle(fn1,fn2,...,fnN);//toggle()方法用于模拟鼠标连续click事件
toggleClass(className);
//恭喜你們1.9之後被刪了

举例

$(".top-m .on").hover(function(){
    $(".topDown").show();
          },
         function(){
     $(".topDown").hide();
         }
);
$("input").toggle(
        function(){$("body").css("background","#ff0000");},
         function(){$("body").css("background","#00ff00");},
          function(){$("body").css("background","#0000ff");}
    )
//toggle()方法不带参数，与show( )和hide( )方法作用一样
$("input").click(function(){$("p").toggleClass("red");})

元素显现与隐藏

语法

$(selector).show([speed],[callback])
//speed:可选。表示速度，默认为“0”，可能值：毫秒（如1000）、slow、normal、fast
//callback:可选。show函数执行完之后，要执行的函数
$(selector).hide([speed],[callback])
$(selector).fadeIn([speed],[callback])
$(selector).fadeOut([speed],[callback])
$(selector).slideUp ([speed],[callback])
$(selector).slideDown ([speed],[callback]

举例

....

动画

语法

$(selector). animate({params},speed,callback)

举例

$("#d1").animate({top:300},3000);
        $("#d1").animate({top:300,left:300},3000);
        $("#d1").animate({top:0,left:300},3000);
        $("#d1").animate({top:0,left:0},3000);

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023-02-14，如有侵权请联系 cloudcommunity@tencent.com 删除

函数