jQuery 事件

最新推荐文章于 2022-09-20 20:52:15 发布
VIP文章 最新推荐文章于 2022-09-20 20:52:15 发布
阅读量304 收藏 1
点赞数 1
分类专栏： jQuery 前端 文章标签： jquery javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/UserPython/article/details/105905429
版权

jQuery中文开发文档

鼠标事件

  • click()：单击事件，鼠标按下再弹起，触发绑定的函数

  • dblclick()：双击事件，鼠标连续双击触发事件

  • mousedown()/mouseup()：鼠标按下或松开事件

  • mouseover()/mouseout()：鼠标移入或移出事件，移动到元素后代也会触发

  • mouseenter()/mouseleave()：鼠标移入或移出事件，移动到元素后代不会触发

  • mousemove()：鼠标在元素范围内移动事件（不断触发）

  • hover(fn1, fn2)：同时绑定 mouseenter和 mouseleave事件，分别当鼠标指针进入和离开元素时被执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery选择器_属性选择器</title>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        *{
    margin: 0; padding: 0;}
        #box{
    
            width: 200px; height: 200px; border: 2px solid black;
            margin: 50px auto;
        }
        #box p{
    
            width: 100px; height: 100px; background: blue;
            margin: 50px auto;
        }
    </style>
    <script>
        $(function(){
    
           $(function(){
    
            //    鼠标单击事件   
            //    $("#box").click(function(){
    
            //        $("#box p").css("background", "red");
            //    })

            //    鼠标双击事件
            //    $("#box").dblclick(function(){
    
            //        $("#box p").css("background", "red");
            //    })

            //    鼠标按下事件
            //    $("#box").mousedown(function(){
    
            //        $("#box p").css("background", "red");
            //    })

            //    鼠标松开事件
            //    $("#box").mouseup(function(){
    
            //        $("#box p").css("background", "red");
            //    })

            //    鼠标移入事件
            //    var count = 0
            //    $("#box").mouseover(function(){
    
            //        count++;
            //        console.log("鼠标移入" + count);
            //    })

            //    鼠标移出事件
            //    var count = 0
            //    $("#box").mouseout(function(){
    
            //        count++;
            //        console.log("鼠标移出" + count);
            //    })

            //    鼠标移入事件
            //    var count = 0
            //    $("#box").mouseenter(function(){
    
            //        count++;
            //        console.log("鼠标移入" + count);
            //    })

            //    鼠标移出事件
            //    var count = 0
            //    $("#box").mouseleave(function(){
    
            //        count++;
            //        console.log("鼠标移出" + count);
            //    })

            //    鼠标在元素范围内移动事件（不断触发）
            //    var count = 0
            //    $("#box").mousemove(function(){
    
            //         count++;
            //         console.log("不断触发" + count);
            //    })

            //    同时绑定 mouseenter和 mouseleave事件
               $("#box").hover(function(){
    
	                 $(this).css("background", "yellow");
	           }, function(){
    
	                 $(this).css("background", "orange");
	           })
           })
        })
    </script>
</head>
<body>
    <div id="box">
        <p></p>
    </div>
</body>
</html>

键盘事件

  • keydown()：按键按下

  • keyup()：按键弹起

  • keypress()：按键被按下到松开“整个过程”中触发的事件
    keypress事件只在按下键盘的任一“字符键”（如A ~ Z、数字键）时触发，单独按下“功能键”（如F1~F12, Ctrl、Alt、shift等’）不会触发；而keydown无论是按下“字符键”还是“功能键”都会触发

  • event.which：指示按了哪个键或按钮

三者顺序：keydown–>keypress–>keyup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理</title>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
    
            // 键盘事件主要用于输入时
            // 1、keydown：按键按下
            // $("input").keydown(function(){
    
            //     $("input").css("background", "#ccc");
            // });

            // 2、keyup：按键弹起
            // $("input").keyup(function(){
    
            //     $("input").css("background", "#fff");
            // });

            // 3、事件监听，绑定不同事件，执行不同方法
            // $("input").on({
    
            //     keydown:function(){
    
            //         $("input").css("background", "#ccc");
            //     },
            //     keyup:function(){
    
            //         $("input").css("background", "#fff");
            //     }
            // })

            // 4、指定按键触发事件
            // keydown按键按下时，有keyCode按键编码属性
            $("input").keydown(function(event){
    
                console.log(event.keyCode);
                if(event.keyCode == 13){
    
                    $("input").css("background", "#ccc");
                }
            });
        })
    </script>
</head>
<body>
    姓名：<input type="text" >
</body>
</html>

触摸事件

触摸事件主要用于移动端；触摸事件应使用事件监听的方法

  • touchstart：当手指触摸元素时，相当于PC端鼠标按下

  • touchend：当手指离开元素时，相当于PC端的鼠标松开

  • touchmove：当手指在元素上移动时，不断触发，相当于PC端的鼠标按下移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
    <title>事件处理</title>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        *{
    margin: 0; padding: 0;}
        #box{
    
            width: 200px; height: 200px; border: 2px solid black;
            margin: 50px auto;
        }
        button{
    
            width: 100px; height: 50px; background: #ccc;;
            margin: 0 auto; display: block;
        }
    </style>
    <script>
最低0.47元/天 解锁文章
苦涩2020
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
深入理解jQuery 事件处理
10-22
下面小编就为大家带来一篇深入理解jQuery 事件处理。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
input框，焦点事件
weixin_48009560的博客
04-21 429
直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; font-size: 25px; } .red{ color: red; } .green{
使用jquery使input自动获取焦点
热门推荐
qq_37728271的博客
10-09 2万+
最近在做毕业设计时一直没能完善这个细节，想要通过点击选项卡后，自动获取输入框焦点，在网上查阅了很多资料终于踏破铁鞋无腻处。 #（element）.focus（）能够使元素获取焦点或者设置元素触发获取焦点的事件。 博主讲的原因是： 如果之前当前元素为隐藏或者未被创建，则需要延时。 按着这个思路，我更改了代码。延时50ms。 setTimeout(function(){ ...
jquery案例6—— jq聚焦失焦、普通元素获取文本、表单获取元素
努力、拼搏、奋进
05-16 1418
一、案例描述 聚焦失焦事件，当input聚焦时，添加阴影聚焦效果。输入内容，当失焦后，会将输入的内容进行显示。 二、案例效果演示 三、案例局部代码 css代码： <style> input { width: 250px; border: none; outline: none; border: 1px solid green; border-radius: 5px; height: 40p
jq input输入框聚焦失焦处理；
onlylele的博客
11-07 2347
jquery处理当input输入框默认为0时，聚焦让其置空；失焦如果为空时，让其至0处理； //这是一个例子 input 输入框聚焦，失焦，及绑定改变事件； $("input.totalnum").focus(function() { var prs=$(this).val(); if(prs==0||prs=='0'){ $(this).val("...
jQuery事件
weixin_64037609的博客
09-20 1079
jQuery事件
jQuery事件详解
10-20
本文主要介绍了jQuery事件的相关知识，具有很好的参考价值，下面跟着小编一起来看下吧
详解jQuery事件
10-20
本文主要介绍了jQuery事件的相关知识。具有一定的参考价值，下面跟着小编一起来看下吧
jQuery 事件 方法
12-13
jQuery 事件 方法 jQuery 事件方法 事件方法触发器或添加一个函数到被选元素的事件处理程序。 下面的表格列出了所有用于处理事件的 jQuery 方法。 方法 描述 bind() 向元素添加事件处理程序 blur() 添加/触发...
理解jquery事件冒泡
01-19
一、什么是jquery事件冒泡 在很多教材或者手册都可能会涉及到事件冒泡的概念，老手来说这当然是最基本的概念，但往往对于初学者可能比较陌生或者说从来没有听说过。下面就结合代码实例来简单介绍一下什么是事件冒泡...
基于JavaScript实现网页计算器
苦涩
04-04 2568
基于JavaScript的网页计算器 基于HTML、CSS、JavaScript制作的网页计算器，其中可以实现加、减、乘、除、取整、求余、阶乘、科学计数等功能 界面如下： 有兴趣的朋友可以继续完善 ^ _ ^ 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8...
JavaScript 获取元素及事件
苦涩
06-19 2038
使用ID获取元素对象 document.getElementById( “ID” );：返回文档中一个指定ID的元素对象，用于精确获取；若找到则返回该元素对象，否则返回null 获取或设置元素内容 innerText方法 元素对象.innerText = “文本”：返回或设置标签内的文本值，不包含HTML标签 <div id="zxw">id选择器</div> <script> var zxw = document.getElementById("zxw.
基于CSS3实现垂直轮播效果
苦涩
05-31 1574
效果图 方法：使用动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> <link rel="stylesheet" href="../css/reset.css"> <style type="text/css"> .box{ .
HTML5 canvas组件
苦涩
07-06 1410
canvas简介 canvas标签是用来绘制图像的 canvas本身没有绘画的能力，仅仅是图形的容器，相当于一块画板 必须要使用脚本完成绘制，JS canvas绘画 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #can.
基于CSS3实现元素宽度向两侧延伸
苦涩
05-31 1333
效果图 方法一：使用转换中的角度转换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> <link rel="stylesheet" href="../css/reset.css"> <style type="text/css"> nav{ .
基于jQuery实现自动或点击切换效果
苦涩
07-01 1016
效果图 功能：元素自动切换，当点击下方小圆点时，控制上方元素同步切换 方法：主要是定义一个全局变量，通过自增变化来控制自动切换效果，其中当自身显示时，兄弟元素隐藏；给小圆点添加单击事件，当点击时，传递自身对象给单击切换函数，通过对象获取点击对象的下标值，从而切换元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</.
HTML5 文档头部
苦涩
05-18 854
VB不能被v
基于jQuery实现幻灯片切换效果
苦涩
07-02 685
效果图 功能：1、幻灯片自动切换；2、点击下方小圆点切换对应幻灯片；3、点击左右两侧耳朵控制幻灯片切换至上一张或下一张；4、鼠标悬停幻灯片上时，幻灯片停止切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> <link rel="stylesheet" href="../css/res.
JavaScript Swiper插件
苦涩
07-10 634
Swiper开发文档 一款免费以及轻量级的移动设备触控滑块的js框架 初始化Swiper实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="./swiper.min.css"> <script src="./j.
jquery事件委托
最新发布
12-29
下面是一个示例，演示如何使用jQuery事件委托： ```javascript // HTML结构 <li>Item 1 <li>Item 2 <li>Item 3 // jQuery事件委托 $("#parent").on("click", "li", function() { console.log($(this)....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值