jQuery:事件

时间:2021-08-28
本文章向大家介绍jQuery:事件,主要包括jQuery:事件使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

1 鼠标事件

鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件,常用鼠标事件有:

方法 描述 执行时机
click( ) 触发或将函数绑定到指定元素的click事件 单击鼠标时
mouseover( ) 触发或将函数绑定到指定元素的mouse over事件 鼠标移过时
mouseout( ) 触发或将函数绑定到指定元素的mouse out事件 鼠标移出时
<img src="img/1.jpg" width="300">
<img src="img/1.jpg" width="300">
<img src="img/1.jpg" width="300">

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("img").click( function(){
        //点击一下,换照片
        $(this).attr( "src","img/2.jpg" ); //this就是事件触发的源头
    } );

    $("img").mouseover( function(){ //移动到元素上
        $(this).css( "border","2px solid red" );
    } );

    $("img").mouseout( function(){ //离开元素
        $(this).css( "border","2px solid white" );
    } );

</script>

2 键盘事件

用户每次按下或者释放键盘上的键时都会产生事件,常用键盘事件有:

方法 描述 执行时机
keydown( ) 触发或将函数绑定到指定元素的keydown事件 按下键盘时
keyup( ) 触发或将函数绑定到指定元素的keyup事件 释放按键时
<input>
<h3></h3>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("input").keyup( function(){
    var str = $(this).val(); // 获取框中的值
    $("h3").text( str ); // 将h3元素中的文本内容更改为str
} );
</script>

3 表单事件

当元素获得焦点时,会触发focus事件,失去焦点时,会触发blur事件,详见下表:

方法 描述 执行时机
focus( ) 触发或将函数绑定到指定元素的focus事件 获得焦点
blur( ) 触发或将函数绑定到指定元素的blur事件 失去焦点
<form action="">
    <p>帐号: <input id="a" value="请输入帐号..."> </p>
    <p>电话: <input id="b"> </p>
</form>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    //获得焦点(激活/点击一下)
    $("#a").focus(function(){
        $(this).val("");
    });

    //失去焦点(未激活/未点击)
    $("#a").blur(function(){
        $(this).val("请输入帐号...");
    });
</script>

4 鼠标悬停复合事件

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

<img src="img/3.jpg" width="400">

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("img").hover(
        function(){
            $(this).css("border","5px solid red");
        },
        function(){
            $(this).css("border","5px solid white");
        }
    );
</script>

 

5 连续点击复合事件

toggle()可以模拟鼠标的连续单击事件

<h2>修仙小说</h2>
<ul>
    <li>凡人修仙传</li>
    <li>遮天</li>
    <li>神墓</li>
    <li>残袍</li>
    <li>大主宰</li>
</ul>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("h2").click(function(){
    $("ul").toggle(); // 连续点击,ul的可见和隐藏进行切换
    });
</script>

6 事件的动态绑定

对dom元素绑定事件的另一种写法

  绑定一个事件

$(".del").on('click', function() {
    alert('hello');
})

  绑定多个事件

$(".del").on('click mouseover', function() {
    alert('hello');
})

原文地址:https://www.cnblogs.com/JasperZhao/p/15200366.html