首页 / JQUERY / jQuery实现事件案例

jQuery实现事件案例

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jQuery实现事件案例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7619字，纯文字阅读大概需要11分钟。

内容图文

序：两种绑定时间的方式：

　　1、jQ_obj.click(function () {})。

　　2、jQ_obj.on(‘click‘, function () {})。

一、克隆事件

            <!
            DOCTYPE html
            >
            <
            html 
            lang
            ="en"
            >
            <
            head
            >
            <
            meta 
            charset
            ="UTF-8"
            >
            <
            title
            >Title</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="jQuery351.js"></script><style>
        #copy {
            height: 100px;
            width: 100px;
            border: orange 5px solid;
            text-align: center;}</style></head><body><button id="copy">点击复制</button><script>
    let $copyEle = $(‘#copy‘)
    $copyEle.on(‘click‘, function () {
        $(this).clone(true).insertAfter($(this))
    })
</script></body></html>

二、自定义模态框

            <!
            DOCTYPE html
            >
            <
            html 
            lang
            ="en"
            >
            <
            head
            >
            <
            meta 
            charset
            ="UTF-8"
            >
            <
            title
            >Title</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="jQuery351.js"></script><style>
        .hide {
            display: none;}

        #z0 {
            font-size: 40px;
            color: deepskyblue;}

        #z1 {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: rgba(125, 125, 125, 0.3);
            z-index: 1;}

        #z2 {
            height: 300px;
            width: 300px;
            background: lightcoral;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -150px;
            z-index: 2;}</style></head><body><span id="z0">最底层的内容</span><button id="on">点击打开盖层</button><div id="z1" class="hide"></div><div id="z2" class="hide"><button id="off">点击关闭盖层</button></div><script>
    let $onEle = $(‘#on‘)
    let $offEle = $(‘#off‘)
    let $z1Ele = $(‘#z1‘)
    let $z2Ele = $(‘#z2‘)
    $onEle.on(‘click‘, function () {
        $z1Ele.removeClass(‘hide‘)
        $z2Ele.removeClass(‘hide‘)
    })
    $offEle.on(‘click‘, function () {
        $z1Ele.addClass(‘hide‘)
        $z2Ele.addClass(‘hide‘)
    })
</script></body></html>

三、隐藏/打开子菜单

            <!
            DOCTYPE html
            >
            <
            html 
            lang
            ="en"
            >
            <
            head
            >
            <
            meta 
            charset
            ="UTF-8"
            >
            <
            title
            >Title</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="jQuery351.js"></script><style>
        ul {
            list-style-type: none;
            font-size: 40px;
            color: red;}

        li {
            font-size: 30px;
            color: blue;}

        #left_div {
            width: 300px;
            height: 1000px;
            position: absolute;
            top: 0;
            left: 0;
            background: navajowhite;}

        .left_ul {
            height: 260px;
            width: 300px;
            position: absolute;
            left: 20px;}

        .hide {
            display: none;}</style></head><body><div id="left_div"><div class="left_ul" style="top: 30px"><ul>aaa
            <li>a1</li><li>a2</li><li>a3</li></ul></div><div class="left_ul" style="top: 360px"><ul>bbb
            <li>b1</li><li>b2</li><li>b3</li></ul></div><div class="left_ul" style="top: 690px"><ul>ccc
            <li>c1</li><li>c2</li><li>c3</li></ul></div></div><script>
    let $liEle = $(‘li‘)
    let $ulEle = $(‘ul‘)
    $liEle.addClass(‘hide‘)
    $ulEle.on(‘click‘,
        function () {
            $(this).children().toggleClass(‘hide‘)
        })
</script></body></html>

四、返回顶部按钮

            <!
            DOCTYPE html
            >
            <
            html 
            lang
            ="en"
            >
            <
            head
            >
            <
            meta 
            charset
            ="UTF-8"
            >
            <
            title
            >Title</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="jQuery351.js"></script><style>
        .hide {
            display: none;}

        #to_top {
            height: 50px;
            width: 50px;
            background: orange;
            position: fixed;
            right: 30px;
            bottom: 30px;
            text-align: center;}

        #left_div {
            height: 2000px;
            width: 300px;
            background: lightcoral;}</style></head><body><div id="left_div"></div><button id="to_top" class="hide">返回顶部</button><script>
    let $windowEle = $(window)
    let $to_topEle = $(‘#to_top‘)
    $windowEle.on(‘scroll‘, (function () {
        if ($(this).scrollTop() >200) {
            $to_topEle.removeClass(‘hide‘)
        } else {
            $to_topEle.addClass(‘hide‘)
        }
    }))
    $to_topEle.on(‘click‘, function () {
        $windowEle.scrollTop(0)
    })
</script></body></html>

五、登录校验

            <!
            DOCTYPE html
            >
            <
            html 
            lang
            ="en"
            >
            <
            head
            >
            <
            meta 
            charset
            ="UTF-8"
            >
            <
            title
            >Title</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="jQuery351.js"></script><style>
        .remind {
            color: red;}

        .hide {
            display: none;}</style></head><body><div>
    username: <input type="text" id="username"><span class="remind hide"
                                                     id="username_remind">&nbsp&nbsp&nbsp用户名不能为空</span></div><div>
    password: <input type="text" id="password"><span class="remind hide"
                                                     id="password_remind">&nbsp&nbsp&nbsp密码不能为空</span></div><button id="send">提交</button><script>
    let $sendEle = $(‘#send‘)
    let $usernameEle = $(‘#username‘)
    let $passwordEle = $(‘#password‘)
    let $inputELe = $(‘input‘)
    $sendEle.on(‘click‘, function () {
        if (!$usernameEle.val()) {
            $(‘#username_remind‘).removeClass(‘hide‘)
        }
        if (!$passwordEle.val()) {
            $(‘#password_remind‘).removeClass(‘hide‘)
        }
    })
    $inputELe.on(‘focus‘, function () {
        $(this).next().addClass(‘hide‘)
    })
</script></body></html>

六、实时监视input

            <!
            DOCTYPE html
            >
            <
            html 
            lang
            ="en"
            >
            <
            head
            >
            <
            meta 
            charset
            ="UTF-8"
            >
            <
            title
            >Title</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="jQuery351.js"></script><style>
        .hide {
            display: none;}</style></head><body><input type="text"><span style="color: red" class="hide">&nbsp&nbsp&nbsp长度不能大于10</span><script>
    let $inputEle = $(‘input‘)
    $inputEle.on(‘input‘, function () {
        if ($(this).val().length >10) {
            $(this).next().removeClass(‘hide‘)
        }
        if ($(this).val().length <11) {
            $(this).next().addClass(‘hide‘)
        }
    })
</script></body></html>

七、hover事件

            <!
            DOCTYPE html
            >
            <
            html 
            lang
            ="en"
            >
            <
            head
            >
            <
            meta 
            charset
            ="UTF-8"
            >
            <
            title
            >Title</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="jQuery351.js"></script><style>
        #div1 {
            height: 100px;
            width: 100px;
            border: 5px black solid;}

        #div2 {
            height: 100px;
            width: 100px;
            margin-top: 30px;
            border: lightblue 5px solid;}

        .to_red {
            background: red;}</style></head><body><div id="div1">移上来下边的变红，移出恢复</div><div id="div2"></div><script>
    let $div1Ele = $(‘#div1‘)
    $div1Ele.hover(
        function () {
            $(‘#div2‘).addClass(‘to_red‘)
        },
        function () {
            $(‘#div2‘).removeClass(‘to_red‘)
        }
    )
</script></body></html>

八、任意位置按“Q”则关闭窗口

            <!
            DOCTYPE html
            >
            <
            html 
            lang
            ="en"
            >
            <
            head
            >
            <
            meta 
            charset
            ="UTF-8"
            >
            <
            title
            >Title</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="jQuery351.js"></script></head><body><div style="font-size: 40px; text-align: center; height: 300px; width: 300px; border: lightcoral 5px solid">按Q关闭窗口</div><script>
    let $windowEle = $(window)
    $windowEle.keydown(function (event) {
        if (event.keyCode ===81) {
            window.close()
        }
    })
</script></body></html>

原文：https://www.cnblogs.com/caoyu080202201/p/12927464.html

内容总结

以上是互联网集市为您收集整理的jQuery实现事件案例全部内容，希望文章能够帮你解决jQuery实现事件案例所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1193882.html

来源：【匿名】

【上一篇】JQuery实现瀑布流页面【下一篇】学习php+jQuery+Ajax实现点赞效果的方法

更多 ►

【jQuery实现事件案例】教程文章相关的互联网学习教程文章

jQuery框架使用，jq选择器，jq操作页面内容， jq操作类名，jq操作全局属性,jq获取盒子信息,jq获取位置信息，js/jq页面加载完毕事件，jq事件【代码】

jq选择器// 获取所有的页面元素jq对象$(‘css3选择器语法‘);var $box = $(".box:nth-child(1)"); 获取的是jq对象数组// 拿到指定的页面元素jq对象$(‘css3选择器语法‘).eq(index);var $box = $(".box").eq(1); 获取的是jq对象数组// jq 转 js （ jq对像就是由数组包裹的js对象）box1 = $box[0] 从数组里取出来box1 = $box.get(0) 从数组里取出来// js 转 jq$box1 = $(box1); jq操作元素对象jq操作页面内容$(".box").eq(1...

夺命雷公狗jquery---22-bind为jquery对象绑定多个相关事件【代码】

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="js/jquery.js"></script><script>//页面载入ready方法 $(function(){$(‘img‘).bind({mouseover:function(){$(‘#result‘).html(‘GOGOGOG‘);},mouseout:function(){$(‘#result‘).html(‘OUTOUT‘);}});});</script></head><body><input type="button" id="btnok" value="OK"/><hr /><img src="images/1.jpg"><hr /><div id="resul...

JQuery学习笔记（2）——数组属性事件【代码】

each遍历JQueryObjectArray.each(function(index,Element))复制$(".myTable").each(function(i,ele){//使用模板函数//这里的ele是一个DOM对象，要想使用jQuery对象，可以这样写$(this)//function里面的i和ele两个参数，根据实际情况填console.log(`${i}: ele.innerText`); });toFixed(2) 保留2位小数数组map拼接数组调用map，会自动拼接成一个字符串复制 $.getJSON(‘json_data.html‘, {name1: ‘参数值‘, name2: ‘value2‘}, f...

12-JQuery学习之bind绑定事件【代码】

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>13-bind绑定事件</title></head><body><h3>bind()方法简单的绑定事件</h3><div >点击查看内容</div><input type="button" value="点击就不可用了"><hr><button >按钮1</button><button >按钮2</button><button >按钮3</button><button >按钮4</button></body><script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script><script type="text/j...

jQuery实现事件案例【代码】

序：两种绑定时间的方式：　　1、jQ_obj.click(function () {})。　　2、jQ_obj.on(‘click‘, function () {})。一、克隆事件<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="jQuery351.js"></script><style>#copy {height: 100px;width: 100px;border: orange 5px solid;text-align: cente...

jquery validate组件导致表单onsubmit事件执行两次

这是今天在工作中遇到的一个问题。由于业务需要在原来表单提交时增加一段新的校验逻辑。原来的逻辑如下（代码都做了简化）：在表单提交时，使用check方法校验<form onsubmit= "return check();"> 方法代码：function check(){ if(...){ alert("xxx"); return false; }} 因为新增了一段逻辑，所以我新增了一个方法，调整了代码的结构：< form onsubmit= "return newCheck();">方法代码：　　function ne...

jQuery事件之自定义事件【代码】

其实事件的bind和unbind，都是为了自定义事件做准备。语法：$(selector).trigger(type, data); 作用：在每一个匹配的元素上触发某类事件，它触发的是由bind()注册的自定义事件。参数解释：type(string)：要采用护法的事件类型 data(Array): 可选参数, 传递给事件处理函数的附加参数示例：给一个按钮添加自定义的事件 $("button").bind("myClick", function(ev, a, b)){//给button按钮添加的自定义事件myClick事件}然后通过trig...

jQuery clone()方法绑定事件【代码】【图】

先看如下代码： 1 (function ($) {2 3var div = $("<div></div>").css({width: "100px", height: "100px"});4var colors = ["red", "blue", "yellow"];5for (var c = 0; c < colors.length; c++) {6var perDiv = div.clone();7 perDiv.css({8 background: colors[c]9 }); 10 perDiv.click(function () { 11 console.log(colors[c]); 12 }); 13 $("body").append(perDi...

jQuery为动态生成的select元素添加事件的方法

项目中需要在点击按钮时动态生成select元素，为防止每次点击按钮时从服务器端获取数据(因为数据都是相同的),可以这样写代码1、首先定义全局js变量var strVoucherGroupSelect ="";2、在js中写好获取服务端数据的代码functiongenVoucherGroupSelect(rowID){ return$(strVoucherGroupSelect).attr("id", "sl_"+ rowID).parent().html(); //返回增加ID后的下拉框完整html}functiongetVoucherGroupData(){ $.ajax({ type: "Post",...

jquery bind 方法一个特点（绑定多个方法到一个dom的某个事件）【代码】

目录： [TOC]jquery bind方法介绍方法声明：bind(type,[data],fn)方法说明：为每一个匹配元素的特定事件(eg:click)绑定一个事件处理器函数。这个事件处理函数会通过参数方式接收到一个事件对象，可以通过它来阻止(浏览器)默认的行为。如果既想取消默认的行为，又想阻止事件起泡，这个事件处理函数必须返回false。技巧：多数情况下，可以把事件处理器函数定义为匿名函数。参数意义type (String) : 事件类型。data (Object) : (可选...

jQuery事件对象的作用（利用冒泡事件优化）【代码】【图】

事件中的Event对象容易被初学者忽略掉，可能大多时候初学者不知道怎么去用它，但有些时候它还是非常有用的一个标准的"click"点击事件$(elem).on("click",function(event){event //事件对象 })在不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异。jQuery根据 W3C 标准规范了事件对象，所以在jQuery事件回调方法中获取到的事件对象是经过兼容后处理过的一个标准的跨浏览器对象这里不在千篇一律的说方法的使用，通过实际的一...

解决 Jquery 一个点击事件触发多次【代码】

1：首先我们遇到的问题：如下图 $("#save").click(function () {var new_permission = transfer.getData(‘index‘); //获取右侧数据$.ajax({type: ‘POST‘,url: ‘/system_save_permission/‘,async: false,data: {‘page_type‘: pageType_url,‘column_data‘: JSON.stringify(column_data),‘new_permission‘: JSON.stringify(new_permission),},success: function (data) {$("#authority_modal > div > div > div.modal-h...

JQuery事件【代码】

JQuery事件 JS添加点击事件<input type="button" value="测试" onclick="test()" /><script type="text/javascript">function test() {alert("aa"); } </script> JQuery添加点击事件<input type="button" value="测试2" id="btn" /><script type="text/javascript">$(document).ready(function(e) {$("#btn").click(function(){alert("一个按钮");})});</script> 给一个类添加点击事件<input type="button" value="测试3"class="bt...

JQuery事件与动画

事件绑用快捷方式$("button:first").click(function(){ alert(1); }); 使用on绑定事件 ① 使用on进行单事件绑定$("button").on("click",function(){ $(this) 取到当前调用事件函数的对象 console.log($(this).html()); }); ② 使用on同时为多个事件，绑定同一函数$("button").on("mouseover click",function(){ console.log($(this).html()) })*/ /③ 调用函数时，传入自定义参数$("button").on("click",{name:"j...

jQuery(六)、事件【代码】

1 页面载入　　1、ready(fn)　　当DOM载入完后绑定一个要执行的函数。　　这是事件模块中最重要的一个函数，可以极大地提高web应用程序的响应速度。$(document).ready(function(){......}); // $(document).ready()的简写，同时内部的jQuery代码依然使用$作为别名，而不管全局的$为何 $(function($){.......});2 事件处理　　1、on(events, [selector], [data], fn)　　在选择元素上绑定一个或多个事件的处理函数。　　参数：　　(...

首页 / JQUERY / jQuery实现事件案例

jQuery实现事件案例

内容导读

内容图文

内容总结

内容备注

内容手机端

【jQuery实现事件案例】教程文章相关的互联网学习教程文章

事件 - 相关标签

JQUERY - 技术教程分类

JQUERY - 最新教程

JQUERY - 最热教程