JQuery事件

最新推荐文章于 2022-12-21 17:51:19 发布
最新推荐文章于 2022-12-21 17:51:19 发布
阅读量193 收藏 1
点赞数 1
分类专栏： 记录 全面 实例 文章标签： jquery js html5 css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45686583/article/details/114319428
版权
实例 同时被 3 个专栏收录
51 篇文章 0 订阅
订阅专栏
全面
40 篇文章 0 订阅
订阅专栏
记录
32 篇文章 0 订阅
订阅专栏

JQuery事件

  • jQuery事件是对JavaScript事件的封装，常用事件分类如下：

基础事件：
鼠标事件
键盘事件
表单事件


复合事件：
鼠标光标悬停
表单事件



一、鼠标事件：

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


这里是引用

实例：

<!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>鼠标事件</title>
    <script src="js/jquery-1.8.3.js"></script>
    <style>
        li{
            list-style: none;
            float: left;
            padding: 0 5px;
        }
        .bing{
            background-color: rgb(9, 195, 252);
        }
    </style>
    <script>
        $(function(){

            // 触发鼠标移动时的事件
            $("li").mouseover(function(){
                $(this).addClass("bing");
            });

            // 触发鼠标移出时的事件
            $("li").mouseout(function(){
                $(this).removeClass();
            });
        });
    </script>
</head>
<body>
    <ul>
        <li>冰冰</li>
        <li>椰果</li>
        <li>奶茶</li>
        <li>橘子</li>
        <li>油桃</li>
    </ul>
</body>
</html>

结果是：
在这里插入图片描述


二、键盘事件：

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


这里是引用

实例：

<!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">
    <script src="js/jquery-1.8.3.js"></script>
    <title>键盘事件</title>
    <script>
        $(function(){
            $(document).keydown(function(event){
                if(event.keyCode=="13"){
                    alert("确认要提交吗？");
                }
            });
        });
    </script>
</head>
<body>
    <!-- 当点击enter按键的时候弹出是否确认提交的弹窗 -->
    用户名<input type="text" name="userName"><br><br>
    密码<input type="password" name="password"><br><br>
    <input type="button" value="提交">
</body>
</html>

结果是：
在这里插入图片描述


三、表单事件：

当元素获得焦点时，会触发focus事件，失去焦点时，会触发blur事件。


在这里插入图片描述


**实例：** 
<!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">
    <script src="js/jquery-1.8.3.js"></script>
    <title>表单事件</title>
    <style>
        .bing{
            background-color: rgb(7, 93, 253);
        }
    </style>
    <script>
        $(function(){
            $("[type=password").focus(function(){
                $(this).addClass("bing");
            });
            $("[type=password]").blur(function(){
                $(this).removeClass();
            });
        });
    </script>
</head>
<body>
    用户名<input type="text" name="userName"><br>
    密码<input type="password" name="password"><br>
    <input type="button" value="提交">
</body>
</html>

结果是：
在这里插入图片描述


四、绑定事件和绑定多个事件：

除了使用事件名绑定事件外，还可以使用bind()方法。
bind()方法还可以同时为多个事件绑定方法。


**实例：** 
<!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">
    <script src="js/jquery-1.8.3.js"></script>
    <title>绑定事件</title>
    <script>
        $(function(){
            $("[type=button]").bind("click",function(){
                $("P").css("background-color","pink");
            });
        });
    </script>
</head>
<body>
    <p>喜欢就是</p>
    <p>第一眼看见你</p>
    <p>就知道</p>
    <p>就是你</p>
    <input type="button" value="爱您">
</body>
</html>

结果是：
在这里插入图片描述


五、移除事件：

移除事件使用unbind()方法。
当unbind()不带参数时，表示移除所绑定的全部事件。


这里是引用


六、鼠标光标悬停事件：

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


实例：

<!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">
    <script src="js/jquery-1.8.3.js"></script>
    <title>鼠标光标悬停事件</title>
    <style>
        li{
            list-style: none;
            float: left;
            padding: 0 10px;
        }
        .tea{
            list-style: none;
            float: none;
        }
    </style>
    <script>
        $(function(){
            $("li").hover(function(){
                $("#show").css("display","block")
            },
            function(){
                $("#show").css("display","none")
            });
        });
    </script>
</head>
<body>
    <ul>
        <li>首页</li>
        <li>奶茶</li>
        <li>
            <ul id="show">
                <li class="tea">冰冰椰果奶茶</li>
                <li class="tea">原味奶茶</li>
                <li class="tea">珍珠奶茶</li>
            </ul>
        </li>
        <li>果茶</li>
    </ul>
</body>
</html>

结果是：
在这里插入图片描述
在这里插入图片描述


**不忘初心，砥砺前行**
李胖圆
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
jQuery常见事件
奶香刘沙包的博客
12-29 2727
JQuery几种常用事件 1.事件ready(fn) 当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。通俗的来讲就是当页面加载完时就会执行此函数事件。可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。 $(document).ready(function(){ // 在这里写你的代码... }); 使用 $(document).ready() 的简写(最常用)，同时内部的 jQ
03-jQuery-事件绑定【click() 、on()】、事件切换toggle()、事件方法、样式控制
记录java学习日常~
05-20 6656
on() 方法是 jQuery 中最常用且最通用的事件绑定方法，可以绑定多个事件类型，并为每个事件类型指定一个或多个处理程序。click() 方法是一种简洁的事件绑定方法，只能绑定 click 事件，并且只允许绑定一个处理程序，无法为同一个元素绑定多个处理程序。off() 方法用于移除之前绑定的事件处理程序，它需要传递一个或多个事件类型参数，并为这些事件类型制定要移除的处理程序。jQuery 事件绑定中，on() 方法用于为元素添加事件处理程序，off() 方法则用于移除绑定的事件处理程序。
jQuery--事件方法
jfxu
12-03 381
1.$(document).ready()                 方法允许我们在文档完全加载完后执行函数。 2.click()                                           方法是当按钮点击事件被触发时会调用一个函数。 eg:   $("p").click(function(){   $(this).hide(); });
jQuery 事件
xiangxiongfly
12-21 1844
常用事件 页面事件 ready() 鼠标事件 自动触发点击事件 键盘事件 表单事件 编辑事件 滚动事件 固定栏目 事件 绑定事件 解绑事件 合成事件 一次事件 自定义事件 event对象 event.type event.target event.which event.pageX 和 event.pageY keyCode this
jQuery中的常用事件
weixin_52841956的博客
02-21 2609
这里介绍一些jQuery常用的事件 jQuery事件是对JavaScript事件的封装，常用事件如：鼠标事件，键盘事件，表单事件，绑定事件，复合事件等等 1.鼠标事件 方法如下 click() :单击事件、触发或将函数绑定到指定元素的click事件 mouseover(): 触发或将函数绑定到指定元素的mouseover事件 mouseout() ：触发或将函数绑定到指定元素的mouseout的事件 代码示例： $(function () { $("input").clic
深入理解jQuery 事件处理
10-22
下面小编就为大家带来一篇深入理解jQuery 事件处理。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jQuery事件详解
10-20
本文主要介绍了jQuery事件的相关知识，具有很好的参考价值，下面跟着小编一起来看下吧
详解jQuery事件
10-20
本文主要介绍了jQuery事件的相关知识。具有一定的参考价值，下面跟着小编一起来看下吧
jQuery 事件 方法
12-13
jQuery 事件 方法 jQuery 事件方法 事件方法触发器或添加一个函数到被选元素的事件处理程序。 下面的表格列出了所有用于处理事件的 jQuery 方法。 方法 描述 bind() 向元素添加事件处理程序 blur() 添加/触发...
理解jquery事件冒泡
01-19
一、什么是jquery事件冒泡 在很多教材或者手册都可能会涉及到事件冒泡的概念，老手来说这当然是最基本的概念，但往往对于初学者可能比较陌生或者说从来没有听说过。下面就结合代码实例来简单介绍一下什么是事件冒泡...
JQuery方法事件大全
10-13
JQuery方法事件大全，JQuery方法事件大全，JQuery方法事件大全，JQuery方法事件大全，JQuery方法事件大全，JQuery方法事件大全，JQuery方法事件大全
JQUERY事件大全
12-31
JQUERY事件大全,方便学习jquery.
jQuery 事件方法大全-超全的总结
liuliuhelingdao的博客
11-08 838
可能的事件属性有：blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove,focus( ) 元素获得焦点 a, input, textarea, button, select, label, map, area。ready(fn);blur( ) 元素失去焦点 a, input, textarea, button, select, label, map, area。
jQuery---各种事件
记忆、深处
01-14 463
鼠标事件： 1、click() 点击事件，当元素被点击时触发。 2、dblclick() 双击事件，当元素被双击时触发. 3、mouseenter() 当鼠标悬停在某个元素时触发。 4、mouseleave() 当鼠标悬停离开某个元素时触发。 5、mousedown() 当鼠标悬停在某个元素上并且按下鼠标时触发。 6、mouseup() 当鼠标悬停在元素上并且松开点击时触发。 7、hover(fu...
jQuery中的事件
m0_52660785的博客
07-29 361
jQuery中的事件
jQuery事件
JJ_Smilewang的博客
07-06 339
单个事件注册，一次只能给一个元素注册一个类型的事件，但是有时需要给同个元素注册多个事件，这时就要写重复写，如下代码：on() 方法可以给元素绑定一个或多个事件的事件处理函数。① events：表示一个或多个用空格分隔的事件类型，如“click”’或“mouseenter”。 ② selector：表示元素的子元素选择器，用于事件委托。 ③ fn：回调函数，即绑定在元素身上的侦听函数。（1）优势1 on() 方法可以绑定多个事件，多个处理事件程序。（2）优势2 可以进行事件委派操作，即把原来加在子元素身
jQuery事件大全(真的很全)
热门推荐
杨春建的博客
09-21 1万+
Dom： Attribute： $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img").attr({src:"test.jpg",alt:"test Image"}); 给某个元素添加属性/值，参数是map $("img").attr("src","test.jpg"); 给某个元素添加属性/值 $("img").attr("title",
JQuery几种常用事件
qq_41342776的博客
11-01 9501
推荐进入：http://jquery.cuishifeng.cn/index.html，查看jquery文档自学。   事件ready: 当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。通俗的来讲就是当页面加载完时就会执行此函数事件。 例如：一个酒店前台项目需要查看当前房间状态，就需要将所有数据拿到页面在页面加载完毕时来判断房间状态，给每个...
jquery事件委托
最新发布
12-29
下面是一个示例，演示如何使用jQuery事件委托： ```javascript // HTML结构 <li>Item 1 <li>Item 2 <li>Item 3 // jQuery事件委托 $("#parent").on("click", "li", function() { console.log($(this)....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值