jQuery事件

最新推荐文章于 2021-12-18 17:25:00 发布
最新推荐文章于 2021-12-18 17:25:00 发布
阅读量206 收藏 1
点赞数
文章标签： jquery css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51945098/article/details/120650074
版权

总结
1.基础事件
鼠标事件
click( )
mouseover( )和mouseout( )
mouseenter( )和mouseleave( )

键盘事件
keydown( )和keyup( )
keypress( )

表单事件
bind()
unbind()

2.复合事件
鼠标光标悬停 hover()
鼠标连续点击 toggle()

3.动画事件
显示与隐藏show()和hide()
透明度fadeIn()和fadeOut()
高度slideDown()和slideUp()

详细：

jQuery 是为事件处理特别设计的。

什么是事件?(摘录)
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

在事件中经常使用术语"触发"（或"激发"）
例如： “当您按下按键时触发 keypress 事件”。

1.基础事件（重点）

1.1鼠标事件（重点）

A.click( )

触发每一个匹配元素的click事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js">、
</script>
    <script type="text/javascript">
    //如果是相同的标签，可以用this
        $(function(){
            $("p").click(function(){
                $(this).css("background","yellow")
            });
        });
    </script>
</head>
<body>
    <p>快来点我</p>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
B.mouseover( )和mouseout( )

mouseover( ) ：mouseover事件会在鼠标移入对象时触发

mouseout( ) ：mouseout事件在鼠标从元素上离开后会触发

</script>
    <script type="text/javascript">
        $(function(){
            $("p").mouseover(function(){
                $(this).css("background","yellow")
            });
            $("p").mouseout(function(){
                $(this).css("background","orange")
            });
        });
    </script>


<body>
    <p>快来点我</p>
</body>

在这里插入图片描述
触碰上去就是黄色，松开就是橘色，
然后一直是橘色，但mouseout一般不设置
在这里插入图片描述
C.mouseenter( )和mouseleave( )

mouseenter( )
与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。

mouseleave( )
与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave事件。
如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。

    <script type="text/javascript">
        $(function () {
            $("p").mouseenter(function () {
                $("p").css("background-color", "yellow");
            });
            $("p").mouseleave(function () {
                $("p").css("background-color", "lightgray");
            });
        });
    </script>


<body>
    <p>快来点我</p>
</body>

在这里插入图片描述
触碰上去就是黄色，松开就是灰色，然后一直是灰色
在这里插入图片描述

D.拓展：mouseover( )系列和mouseenter( )系列的区别

    <script type="text/javascript">
        x = 0;
        y = 0;
        $(document).ready(function () {
            $("div.over").mouseover(function () {
                $(".over span").text(x += 1);
            });
            $("div.enter").mouseenter(function () {
                $(".enter span").text(y += 1);
            });
        });
    </script>


<body>
    <p>mouseover 事件在鼠标移动到选取的元素及其子元素上时触发 。</p>
    <p>mouseenter 事件只在鼠标移动到选取的元素上时触发。 </p>
    <div class="over" style="background-color:lightgray;padding:20px;width:250px;float:left">
        <h3 style="background-color:white;">Mouseover 事件触发: <span></span></h3>
    </div>
    <div class="enter" style="background-color:lightgray;padding:20px;width:250px;float:right">
        <h3 style="background-color:white;">Mouseenter 事件触发: <span></span></h3>
    </div>
</body>

在这里插入图片描述
左边的不管你触碰灰色还是白色的，Mouseover 事件触发的数字都会变。
右边的只有你触碰灰色的，Mouseenter 事件触发的数字才会变。

1.2键盘事件（重点）

A.keydown( )和keyup( )

keydown事件会在键盘按下时触发。

keyup事件会在按键释放时触发。

    <script type="text/javascript">
        $(document).ready(function () {
            $("input").keydown(function () {
                $("input").css("background-color", "yellow");
            });
            $("input").keyup(function () {
                $("input").css("background-color", "pink");
            });
        });
    </script>


<body>
    输入你的名字: <input type="text">
    <p>在以上输入框中输入你的名字。在按键按下后输入框背景颜色会改变。</p>
</body>

在这里插入图片描述
在这里插入图片描述
当点击空格时，不松手就是黄色，松手就是粉色，默认就变成粉色了。

题外话：
当keydown里面换成$("p").append("1");
keyup里面换成$("p").append("2");的时候，
点空格就变成在p段落后面加1，松开变成2。

B.keypress( )（不支持功能键）

keydown事件会在键盘按下时触发

keypress( )和keydown( )\keyup()的区别：

keydown和keyup是键盘按下任何键（功能键，编辑键和定位键）

keypress是键盘按下任何数字键和任何字母键，
backspace键 tab键和enter键也可以。

    <script type="text/javascript">
        i = 0;
        $(document).ready(function () {
            $("input").keypress(function () {
                $("span").text(i += 1);
            });
        });
    </script>


<body>
    输入你的名字: <input type="text">
    <p>按键的次数: <span>0</span></p>
</body>

在这里插入图片描述
按空格时，数字会增加
在这边，按tab键不可以

1.3表单事件（重点）

A.bind()

为每个匹配元素的特定事件绑定事件处理函数。

和click事件和设置方法一样。

    <script type="text/javascript">
        $(function() {//第一种
            $("p").click(function () {
                $(this).css("background","yellow");
            });
        });
        
        $(function() {//第二种
            $("p").bind("click",function () {
                $("p").css("background","yellow");
            });
        });
        
        // function a(){//第三种
        //     $("p").css("background","yellow");
        // }
    </script>


<body>
    <p>触发</p>
    
    <!-- <p οnclick="a()">触发</p> 第三种 -->
</body>

在这里插入图片描述
在这里插入图片描述
B.unbind()

bind()的反向操作，从每一个匹配的元素中删除绑定的事件。

slideToggle() 效果
里面可以写 (“slow”,“normal”, or “fast”) 或 数字（不用加双引号）
这动画效果只调整元素的高度，可使匹配的元素以“滑动”的方式隐藏或显示。

    <script type="text/javascript">
        $(function () {
            $("p").click(function () {
                $(this).slideToggle();
            });
            $("button").click(function () {
                $("p").unbind();
            });
        });
    </script>


<body>
    <p>这是一个段落。</p>
    <p>这是另外一个段落。</p>
    <p>点击任意段落(p 元素)，该段落就会消失。</p>
    <button>移除所有段落(p 元素)的事件句柄</button>
</body>

在这里插入图片描述
点p段落的会慢慢滑动
但如果点那个按钮，那么效果就会消失

2.复合事件
2.1鼠标光标悬停（不是重点）

hover()

    <script type="text/javascript">
        $(function () {//第一种
            $("p").hover(function () 
               { $("p").css("background-color", "yellow"); }
           	, function () 
               { $("p").css("background-color", "pink"); }
            );
        });
        
        // $(function () {// 第二种 链式操作 也很重要
        // $("p").mouseover(function()
        //    { $("p").css("background-color","yellow"); })
        //     .mouseout(function()
        //    { $("p").css("background-color","pink"); })    
        // });
    </script>


<body>
    <p>鼠标移动到该段落。</p>
</body>

在这里插入图片描述
鼠标点击该段落就会变成黄色，
松开就是粉色，然后一直是粉色。
在这里插入图片描述

附注：
hover()等价于mouseover和 mouseout事件的组合

2.2鼠标连续点击

toggle()

    <script type="text/javascript">
        $(document).ready(function () {
        
		//第一种
        $("button").click(function () {$("p").toggle();});
        
        //第二种
        $("button.one").bind("click",function(){$("p").show()});
        $("button.two").bind("click",function(){$("p").hide()});
        
        //第三种
        $("button").toggle(function(){
                $("p").hide();
            },function(){
                $("p").show();
            });
            
		//题外话
        // $("button").toggle(function(){
        //         $("p").css("background","red");
        //     },function(){
        //         $("p").css("background","green");
        //    });
        
        });
    </script>


<body>
    <p>这是一个段落。</p>
    <button>切换 hide() 和 show()</button>

    <button class="one">显示</button>
    <button class="two">隐藏</button>
</body>

在这里插入图片描述
切换 hide() 和 show()==》可只点这个进行 隐藏 和 显示

ps：
如果引入在线jQuery包，如果版本太老，
可能会不支持例子里（toggle）第三种和题外话。
在做项目的时候记得要记住。

第一种和第三种的区别：
举例中的题外话，加背景颜色第一种形式就用不了。

3.动画事件

3.1显示与隐藏show()和hide()

<script>
$(document).ready(function(){
	$(".two").click(function(){$("p").hide();});
	$(".one").click(function(){$("p").show();});
});
</script>


<body>
<p>这是一个段落。</p>
<button class="one">显示</button>
<button class="two">隐藏</button>
</body>

在上面案例中。

3.2透明度fadeIn()和fadeOut()（不是重点）

fadeIn()通过不透明度的变化来实现所有匹配元素的淡入效果

fadeOut()通过不透明度的变化来实现所有匹配元素的淡出效果

(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

    <script type="text/javascript">
        $(document).ready(function () {
            $(".btn1").click(function () {
                $("p").fadeOut()
            });
            $(".btn2").click(function () {
                $("p").fadeIn();
            });
        });
    </script>


<body>
    <p>这是一个段落。</p>
    <button class="btn1">淡出</button>
    <button class="btn2">淡入</button>
</body>

在这里插入图片描述
点击淡出，上面一句话就会慢慢消失，
淡入，就会慢慢出现。

3.3高度slideDown()和slideUp()

slideUp()使匹配的元素以“滑动”的方式隐藏起来

slideDown()使匹配的元素以“滑动”的方式显示出来

(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

    <script type="text/javascript">
        $(document).ready(function () {
            $(".btn1").click(function () {
                $("p").slideUp();
            });
            $(".btn2").click(function () {
                $("p").slideDown();
            });
        });
    </script>


<body>
    <p>这是一个段落。</p>
    <button class="btn1">上滑</button>
    <button class="btn2">下滑</button>    
</body>

在这里插入图片描述
点击上滑，以上内容就慢慢向上消失，
下滑，就慢慢出现。

题外话：
jQuery children() 方法
children() 方法返回被选元素的所有直接子元素
语法

$(selector).children(filter);

jQuery toggleClass() 方法
toggleClass() 方法对添加和移除被选元素的一个或多个类进行切换。
语法

$(selector).toggleClass(classname,function(index,currentclass),switch)

classname 必需，根据classname来写css。

jQuery find() 方法
find() 方法返回被选元素的后代元素。

$("ul").find('li').show();

快捷键
ul>li*4

事件对象
Event 对象代表事件的状态，
比如事件在其中发生的元素、键盘按键的状态、鼠标（移动）的位置、鼠标按钮的状态。

event监听事件
用来监听一个对象如果发生了变化（此时指的是被监听者），
监听的就会做出一些反映。

比如以下案例：

$(“#out”).click(function（e）{
console.log(e)
})

在这里插入图片描述
冒泡事件
当多个Dom元素互相嵌套的时候，一个元素触发了某个事件
（例如Click事件），那么嵌套此事件的所有元素都会被触发一次Click事件
(白话就是里面执行,外面也执行了,一层一层往上级传递)

<script src="https://code.jquery.com/jquery-3.1.1.min.js">
</script>
    <style>
        #out{
            background-color: blue;
            width: 100px;
            height: 100px;
        }
        #inside{
            background-color: red;
            width: 50px;
            height: 50px;
        }
    </style>


<body>
    <div id="out">
        <div id="inside"></div>
    </div>
    <script type="text/javascript">
        $('#out').click(function(){
            alert(111)
        })
        $('#inside').click(function(){
            alert(222)
            // e.stopPropagation();
        })
    </script>
</body>

在这里插入图片描述
在这里插入图片描述

点击红色出现弹窗222，点击确定以后弹出111。
点击蓝色会出现111。

如何避免内部div出现这个冒泡事件情况？
（点红色不弹出111）

方式一：
e.stopPropagation(); 终止冒泡

$('#inside').click(function(e){
     alert(222);
     e.stopPropagation();
})

方式二：

$('#inside').click(function (e) {
 	if (e.target == e.currentTarget) {alert(222);}
  })
$('#out').click(function (e) {
    if (e.target == e.currentTarget) {alert(111);}
})

target：触发事件的组件的一些属性值集合
currentTarget：当前组件的一些属性值集合

----2021.10.08&10.09

好好学java的xz
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
深入理解jQuery 事件处理
10-22
下面小编就为大家带来一篇深入理解jQuery 事件处理。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
a标签调用接口下载文件
qq_43159578的博客
05-21 956
const a = document.createElement('a') document.body.appendChild(a); a.setAttribute('download', '') a.setAttribute('href', this.$baseURL + '/warehouse/export') a.setAttribute('id', 'downloadBtn') document.body.remove.
[前端系列] jquery的on事件实现hover函数效果
程序员老狼专注开发aigc或客服系统应用
12-18 2213
当使用jquery的on函数的时候，可以给动态添加的元素增加事件，但是却没有悬浮hover函数了 可以使用这种方式模拟实现hover函数效果 $("body").on("mouseover mouseout",".lineItem",function(event) { if(event.type == "mouseover"){ //鼠标悬浮 ...
锋利的jQuery(四)--jQuery中的事件和动画
Scarlett
04-28 286
4.1 jQuery中的事件4.1.1 加载DOM 以浏览器装载文档为例，在页面加载完毕后，浏览器会通过JavaScript为DOM元素添加事件。在常规的JavaScript 代码中，通常使用 window.onload 方法，而在 jQuery 中，使用的是$(document).ready()方法， 它是事件模块中最重要的一个函数，可以极大地提高 Web 应用程序的响应速度。通过使用该方法，可...
jquery 触发元素 a 的 click() 事件不生效 问题
kellyfun的博客
08-28 5049
不能用$(“#id”).click()需要用js原生的获取元素document.getElementById("").click() 或者 $("#id")[0].click();因为是a中的文本点击事件
jquery on()方法及其参数使用
热门推荐
不二法门
01-12 1万+
1.定义 on() 方法在被选元素及子元素上添加一个或多个事件处理程序。 2.语法 $(selector).on(event,childSelector,data,function,map) 3.参数 参数 描述 event 必需。规定要从被选元素移除的一个或多个事件或命名空间。 由空
jQuery事件详解
10-20
本文主要介绍了jQuery事件的相关知识，具有很好的参考价值，下面跟着小编一起来看下吧
理解jquery事件冒泡
01-19
一、什么是jquery事件冒泡 在很多教材或者手册都可能会涉及到事件冒泡的概念，老手来说这当然是最基本的概念，但往往对于初学者可能比较陌生或者说从来没有听说过。下面就结合代码实例来简单介绍一下什么是事件冒泡...
jQuery 事件
12-13
jQuery 事件 jQuery 是为事件处理特别设计的。 什么是事件？ 页面对不同访问者的响应叫做事件。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。 实例： 在元素上移动鼠标。 选取单选按钮 点击元素 ...
jQuery学习5 jQuery事件模型
12-10
jQuery事件模型是JavaScript库jQuery中的核心功能之一，它简化了事件处理程序的创建和管理，使得跨浏览器的事件处理变得更加简单。以下是对jQuery事件模型的详细说明： 1. **统一事件处理程序方法**：jQuery提供了...
jQuery中slideUp 和 slideDown 的点击事件
10-24
主要介绍了jQuery中slideUp 和 slideDown 的点击事件的相关资料,需要的朋友可以参考下
jQuery事件用法详解
10-21
主要为大家详细介绍了jQuery事件用法，具有一定的参考价值，感兴趣的朋友可以参考一下
jQuery事件用法实例汇总
10-25
主要介绍了jQuery事件用法实例汇总,对事件的绑定及各类事件的用法做了较为详尽的实例分析,有很好的借鉴价值,需要的朋友可以参考下
浅谈jQuery事件绑定原理
10-24
主要介绍了浅谈jQuery事件绑定原理，并做了简单分析，然后用实例来展示,需要的朋友可以参考下
jquery事件与绑定事件
10-20
本文主要介绍了jquery事件与绑定事件的相关知识，具有很好的参考价值。下面跟着小编一起来看下吧
JQuery 事件监听
Mephisto180502的博客
05-17 1085
什么是事件监听 当用户在界面上执行一个操作，例如按下键盘、拖动或者单击鼠标时，都将产生一个事件。类似的DOM事件如：onclick、onmouseover、onmouseout、onkeydown、onkeyup、onkeypress、onload、onselect、onchange、onchange、onfoucs、onblur等等。那么，我们对这些事件进行监听就叫做事件监听。 on() 和...
jquery常用事件（整理）
厚积薄发，博观约取
07-31 968
jquery 事件 整理
jquery中的mouseover、mouseout 和 mouseenter 、 mouseleave的区别
tianjiliuhen的博客
03-17 6003
原文地址：http://www.5ixiudou.com/portal/detailInfo/1000000005/286 现在有这样一种需求，鼠标放置到 有灰色背景框的div上之后，显示操作按钮，编辑和删除 这时候，大家可能会想到使用 jquery中的 mouseover 和 mouseout 方法，在鼠标放置上去的时候，使用 mouseover 方法，离开的时候使用 mouse...
对a标签使用click()不起作用
yixu0534的博客
05-22 7794
有问题的代码： var cur_url = window.location.href;#获取当前页面url if(cur_url.indexOf('#') > 1){ #链接中有锚点 var tab = cur_url.split('#')[1]; #获取锚点的值 var lis = $('#myTab li'); #获取所有tab $.each(lis, fun...
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、付费专栏及课程。

余额充值