15.前端jQuery之【jQuery事件】

已于 2022-06-07 16:48:17 修改
阅读量1.2k 收藏 1
点赞数 1
分类专栏： 前端--html/CSS/JavaScript/jQuery 文章标签： 前端 javascript jquery
于 2021-11-28 16:11:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52559893/article/details/121592893
版权

目录

1.引入jQuery事件方法（绑定id）

2.常用jQuery事件

3.常用jQuery模型 

 1.克隆事件模型：单击进行克隆

2.模态框事件模型

3.点击展开隐藏菜单

4.返回到顶部模型

5.自定义登录校验

6.input实时监控

7.hover事件

8.监控键盘按键事件

1.引入jQuery事件方法（绑定id）

1.第一种:
    语法：$('').click(代码块函数);
    如：$('#d1').click(function () {
            alert('一起学python')
        });

2.第二种(功能更加强大 还支持事件委托)
    语法：：$('').on('click',click(代码块函数)
    如：
        $('#d2').on('click',function () {
                alert('一起学python')
        })

2.常用jQuery事件

      jQuery事件参考菜鸟教程：https://www.runoob.com/jquery/jquery-events.html
      jQuery事件方法https://www.runoob.com/jquery/jquery-ref-events.html

3.常用jQuery模型 （参考Jason老师）

 1.克隆事件模型：单击进行克隆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <style>
        #d1 {
            height: 100px;
            width: 100px;
            background-color: orange;
            border: 1px solid blue;
        }
    </style>
</head>
<body>
<button id="d1">屠龙宝刀，点击就送</button>
<script>
    $('#d1').on('click',function () {
        // console.log(this)                            // this指代是当前被操作的标签对象
        $(this).clone().insertAfter($('body'))          // clone默认情况下只克隆html和css 不克隆事件
        //$(this).clone(true).insertAfter($('body'))    // 括号内加true即可克隆事件
    })
</script>
</body>
</html>

2.模态框事件模型

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>自定义模态框</title>
    <style>
        .cover {
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: darkgrey;
            z-index: 999;
        }
        .modal {
            width: 600px;
            height: 400px;
            background-color: white;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -300px;
            margin-top: -200px;
            z-index: 1000;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
    <input type="button" value="弹" id="i0">
    <div class="cover hide"></div>
    <div class="modal hide">
        <label for="i1">姓名</label>
        <input id="i1" type="text">
        <label for="i2">爱好</label>
        <input id="i2" type="text">
        <input type="button" id="i3" value="关闭">
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script>
        var tButton = $("#i0")[0];          //获取【弹】按钮标签
        $("#i0").click(function () {
            var coverEle = $(".cover")[0];      // 得到中间层标签对象，
            var modalEle = $(".modal")[0];      // 得到模态框标签对象，
            $(coverEle).removeClass("hide");    // 要转换成jQuery对象，移除隐藏
            $(modalEle).removeClass("hide");
        })
        tButton.onclick=function () {
        var coverEle = $(".cover")[0];
        var modalEle = $(".modal")[0];
        $(coverEle).removeClass("hide");
        $(modalEle).removeClass("hide");
        };
        var cButton = $("#i3")[0];
        cButton.onclick = function () {
            var coverEle = $(".cover")[0];
            var modalEle = $(".modal")[0];
            $(coverEle).addClass("hide");
            $(modalEle).addClass("hide");
        }
    </script>
</body>
</html>

3.点击展开隐藏菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <style>
        .left {
            float: left;
            background-color: darkgray;
            width: 20%;
            height: 100%;
            position: fixed;
        }
        .title {
            font-size: 36px;
            color: white;
            text-align: center;
        }
        .items {
            border: 1px solid black;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
    <div class="left">
        <div class="menu">
            <div class="title">菜单一
                <div class="items">111</div>
                <div class="items">222</div>
                <div class="items">333</div>
            </div>
            <div class="title">菜单二
                <div class="items">111</div>
                <div class="items">222</div>
                <div class="items">333</div>
            </div>
            <div class="title">菜单三
                <div class="items">111</div>
                <div class="items">222</div>
                <div class="items">333</div>
            </div>
        </div>
    </div>
    <script>
        $('.title').click(function () {
            // 先给所有的items加hide
            $('.items').addClass('hide')
            // 然后将被点击标签内部的hide移除
            $(this).children().removeClass('hide')
        })
    </script>
</body>
</html>

4.返回到顶部模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <style>
        .hide {
            display: none;
        }
        #d1 {
            position: fixed;
            background-color: black;

            right: 20px;
            bottom: 20px;
            height: 50px;
            width: 50px;
        }
    </style>
</head>
<body>
<a href="" id="d1"></a>
<div style="height: 500px;background-color: rgb(104, 97, 97)"></div>
<div style="height: 500px;background-color: rgb(64, 80, 40)"></div>
<div style="height: 500px;background-color: rgb(110, 110, 146)"></div>
<a href="#d1" class="hide">回到顶部</a>
<script>
    $(window).scroll(function () {
        if($(window).scrollTop() > 300){
            $('#d1').removeClass('hide')
        }else{
            $('#d1').addClass('hide')
        }
    })
</script>
</body>
</html>

5.自定义登录校验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<p>username:
    <input type="text" id="username">
    <span style="color: red"></span>
</p>
<p>password:
    <input type="text" id="password">
    <span style="color: red"></span>
</p>
<button id="d1">提交</button>
<script>
    let $userName = $('#username')
    let $passWord = $('#password')
    $('#d1').click(function () {
        // 获取用户输入的用户名和密码 做校验
        let userName = $userName.val()
        let passWord = $passWord.val()
        if (!userName){
            $userName.next().text("用户名不能为空")
        }
        if (!passWord){
            $passWord.next().text('密码不能为空')
        }
    })
    $('input').focus(function () {
        $(this).next().text('')
    })
</script>
</body>
</html>

6.input实时监控

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>k</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<input type="text" id="d1">
<script>
    $('#d1').on('input',function () {
        console.log(this.value)
    })
</script>
</body>
</html>

7.hover事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<p id="d1">到家啊就是度假酒店</p>
<script>
    // $("#d1").hover(function () {  // 鼠标悬浮 + 鼠标移开
    //     alert(123)
    // })
    $('#d1').hover(
        function () {
            alert('我来了')  // 悬浮
    },
        function () {
            alert('我溜了')  // 移开
        }
    )
</script>
</body>
</html>

8.监控键盘按键事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<script>
    $(window).keydown(function (event) {
        console.log(event.keyCode)
        if (event.keyCode === 16){
            alert('你按了shift键')
        }
    })
</script>
</body>
</html>
放纵fly
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web前端之锋利的jQuery四：jQuery中的事件
爸爸去哪了2之熊猫三胞胎的博客
12-06 3319
web前端之锋利的jQuery四：jQuery中的事件与动画 加载DOM： 执行时机： $(document).ready(function(){}); 详情解释 事件绑定： bind(event,data,function) 第一个参数是事件类型，类型包括：blur focus load resize unload click dblclick mousedow
03-jQuery-事件绑定【click() 、on()】、事件切换toggle()、事件方法、样式控制
记录java学习日常~
05-20 7764
on() 方法是 jQuery 中最常用且最通用的事件绑定方法，可以绑定多个事件类型，并为每个事件类型指定一个或多个处理程序。click() 方法是一种简洁的事件绑定方法，只能绑定 click 事件，并且只允许绑定一个处理程序，无法为同一个元素绑定多个处理程序。off() 方法用于移除之前绑定的事件处理程序，它需要传递一个或多个事件类型参数，并为这些事件类型制定要移除的处理程序。jQuery 事件绑定中，on() 方法用于为元素添加事件处理程序，off() 方法则用于移除绑定的事件处理程序。
jQuery
qq_50748038的博客
08-26 6325
jQuery事件的基本使用绑定和解绑，事件委托和jQuery中插入内容、克隆节点的方法，了解jQuery静态方法在数组和对象上的操作以及字符串操作
Jquery中事件
m0_73030012的博客
09-17 1387
事件是Web浏览器通知应用程序（比如我们的js）发生了某个事情！我们可以为这些特定的事情，事先安排好处理方案，这样就能够实现互动！事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。jquery是为事件处理特别设计的语法：$(selector).toggle(fun1, fun2,fun3-----)第一个方法和第二个方法是必须的，后面是可选的。注意：这个方法在1.8之前可以使用的，目前已经不支持！！
jQuery鼠标点击事件
热门推荐
柯晓楠
01-16 2万+
概念 个人理解： jQuery鼠标点击事件是最常用的事件之一，当用户使用鼠标在浏览器窗口或元素上进行点击交互时触发的事件，都属于鼠标点击事件的范围。常见的鼠标操作有：单击、双击、右键等等。 click() 事件函数 说明： 当用户单击鼠标左键时触发click()函数，每触发一次匹配元素的click事件，该事件函数就会被调用。 语法： 触发被选元素的click事件： $(selector...
jQuery事件处理机制(4)
qq_45466959的博客
05-31 1169
在前端开发中，经常使用事件来完成一些交互操作。举例： 文本框获得焦点、鼠标滑过改变样式等。 jQuery提供的一些事件：jQuery中事件方法一般与事件名称相同。例如： 单机事件click，对应的事件方法是click()方法。常用事件方法：click()事件： 为元素绑定事件处理函数后，还可以手动触发事件。例如： 扩展 1.2 页面加载事件 在网页开发中，操作DOM时，会因为页面元素还没有加载而执行失败，因此引入事件处理函数；解决办法：jQuery提供了ready事件作为页面加载事件；Javavasci
【jquery常见事件】Jquery常见事件应用汇总【附应用场景】
赏樱看雪撸代码
05-29 1287
jquery双击事件、jquery单击事件、jquery派发事件、阻止冒泡、jquery绑定与解绑事件、jquery鼠标移动事件等。
jquery signalR.js
05-15
做JS客户端SignalR需引用的js库
前端开发工程师面试题 node.js jquery js vue
11-15
前端开发工程师面试题 node.js jquery js vue
开发工具 jquery-1.11.3.min
05-31
开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-...
开发工具 jquery.dataTables.min
05-31
开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery....
前端+ jquery-ui-1.13.1.custom
最新发布
04-11
- **事件驱动**：所有组件都基于 jQuery 事件模型，易于与其他 JavaScript 库集成。 - **可访问性**：遵循 WAI-ARIA 规范，确保组件对残障人士友好。 - **国际化支持**：内置多语言支持，方便创建多语言应用。 **2....
jQuery事件方法
wen0627的博客
05-16 5738
1、首先了解一下什么是事件，页面对不同访问者的响应叫做事件，事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。 2、最常见的事件是在某元素上移动鼠标触发事件，选取单选按钮触发事件，点击元素触发事件，在事件中经常使用触发术语，比如当按下按键时触发keypress事件，以下是常见Dom事件。 3、了解jQuery事件以及方法语法，在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法，例如：在页面中指定一个点击事件。 4、接下来是常用jQuery事件方法.
JQuery事件的基本使用
m0_48041877的博客
08-29 3368
JQuery的基本使用以及网站推荐
jQuery事件(1)，终于彻底把握了
2401_84092456的博客
04-04 904
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。点击这里领取Web前端开发经典面试题。
jQuery实现点击事件的四种方法
juejiangjianchi的博客
07-31 1718
1、 <button id="but" onclick="but()"></button> function but() { alert("but") } 2、 <button id="but"></button> $("#but").click(function(){ alert("but") }); 3、 <button ...
jQuery 事件详解
黑马程序员官方博客
03-15 461
可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。在此之前有bind(), live() delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on替代他们。可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。动态创建的元素，click() 没有办法绑定事件， on() 可以给动态生成的元素绑定事件。off() 方法可以移除通过 on() 方法添加的事件处理程序。如果有的事件只想触发一次， 可以使用 one() 来绑定事件。
jQuery绑定点击事件和改变事件的几种方式以及多个元素绑定多个事件
cheng1a的博客
09-05 8600
jQuery绑定点击事件和及监听改变事件的几种方式以及多个元素绑定多个事件
jQuery--事件方法
jfxu
12-03 390
1.$(document).ready()                 方法允许我们在文档完全加载完后执行函数。 2.click()                                           方法是当按钮点击事件被触发时会调用一个函数。 eg:   $("p").click(function(){   $(this).hide(); });
15天速成jQuery：简单高效前端开发利器
整个教程将引导读者通过15天的学习，逐步掌握jQuery的核心概念和技术，从而提升前端开发技能。" 这份教程适合所有希望提升JavaScript能力，特别是希望通过简洁代码实现页面交互效果的开发者，无论是初级还是进阶...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值