【前端学习-21】【03】/事件注册、委托、解绑/自动触发事件trigger/事件对象/拷贝对象/多库共存/JQ插件-瀑布流、懒加载、全屏滚动/尺寸、位置操作/链式编程/微博留言/返回顶部

最新推荐文章于 2023-01-10 11:25:54 发布
最新推荐文章于 2023-01-10 11:25:54 发布
阅读量210 收藏
点赞数
分类专栏： javascript JQuery 文章标签： jquery js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qnanwang/article/details/106179030
版权

JQuery快速开发

一、事件注册

1.知识点

在这里插入图片描述

2.代码演示：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div {
            width: 200px;
            height: 200px;
        }
        
        .current {
            background-color: pink;
        }
    </style>
    <script src="../JQuery.min.js"></script>
    <script>
        $(function() {
            // // 1.单个事件注册
            // $("div").click(function() {
            //     $(this).css("background", "purple");
            // });
            // $("div").mouseenter(function() {
            //     $(this).css("background", "green");
            // });
            // 2.事件处理on
            // $("div").on({
            //     mouseenter: function() {
            //         $(this).css("background", "yellow");
            //     },
            //     mouseleave: function() {
            //         $(this).css("background", "blue");
            //     }
            // })
            $("div").on("mouseenter mounseleave", function() {
                $(this).toggleClass("current");
            })
        })
    </script>
</head>
<body>
    <div class="current"></div>
</body>
</html>

二、事件委托

在这里插入图片描述

1.知识点

在这里插入图片描述

2.代码演示：

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../JQuery.min.js"></script>

</head>
<body>
    <ul>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
    <script>
        // 2.on可以实现事件委托
        // $("ul li").click();//以前的写法
        $("ul").on("click", "li", function() {
            alert(11);
        });
        // click是绑定在ul身上的但触发的是li
        // 3.on可以给未来动态创建的元素绑定事件
        // $("ol li").click(function(){
        //     alert(11);
        // })
        $("ol").on("click", "li", function() {
            alert(11);
        });
        var li = $("<li>我是后来创建的</li>");
        $("ol").append(li);
    </script>
</body>
</html>

3.案例：微博发布留言

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        
        ul {
            list-style: none
        }
        
        .box {
            width: 600px;
            margin: 100px auto;
            border: 1px solid #000;
            padding: 20px;
        }
        
        textarea {
            width: 450px;
            height: 160px;
            outline: none;
            resize: none;
        }
        
        ul {
            width: 450px;
            padding-left: 80px;
        }
        
        ul li {
            line-height: 25px;
            border-bottom: 1px dashed #cccccc;
            display: none;
        }
        
        input {
            float: right;
        }
        
        ul li a {
            float: right;
        }
    </style>
    <script src="JQuery.min.js"></script>
    <script>
        $(function() {
            $(".btn").on("click", function() {
                // 1.点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul 中
                var li = $("<li></li>");
                li.html($(".txt").val() + "<a href = 'javascript:;'>删除</a>");
                $("ul").prepend(li);
                li.slideDown();
                $(".txt").val("");
            });
            // 2.点击的删除按钮，可以删除当前的微博留言li
            $("ul").on("click", "a", function() {
                $(this).parent().slideUp(function() {
                    $(this).remove();
                });
            })
        })
    </script>
</head>

<body>
    <div class="box" id="weibo">
        <span>微博发布</span>
        <textarea name="" class="txt" cols="30" rows="10"></textarea>
        <button class="btn">发布</button>
        <ul>
        </ul>
    </div>
</body>

</html>

三、事件解绑off

1.知识点：

在这里插入图片描述在这里插入图片描述
注意：

// 2. one() 但是它只能触发事件一次
    $("p").one("click", function() {
     alert(11);

2.代码演示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function() {
            $("div").on({
                click: function() {
                    console.log("我点击了");
                },
                mouseover: function() {
                    console.log('我鼠标经过了');
                }
            });
            $("ul").on("click", "li", function() {
                alert(11);
            });
            // 1. 事件解绑 off 
            // $("div").off();  // 这个是解除了div身上的所有事件
            $("div").off("click"); // 这个是解除了div身上的点击事件
            $("ul").off("click", "li");
            // 2. one() 但是它只能触发事件一次
            $("p").one("click", function() {
                alert(11);
            })
        })
    </script>
</head>

<body>
    <div></div>
    <ul>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
    </ul>
    <p>我是屁</p>
</body>

</html>

四、自动触发事件trigger()

1.知识点

在这里插入图片描述
默认行为：文本框（焦点获得）

2.代码演示

在这里插入图片描述

<style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function() {
            $("div").on("click", function() {
                alert(11);
            });

   // 自动触发事件
   // 1. 元素.事件()
   // $("div").click();会触发元素的默认行为
   // 2. 元素.trigger("事件")
   // $("div").trigger("click");会触发元素的默认行为
    $("input").trigger("focus");
  // 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为
  $("div").triggerHandler("click");
  $("input").on("focus", function() {
   $(this).val("你好吗");
  });
   // $("input").triggerHandler("focus");
        });
    </script>
</head>
<body>
    <div></div>
    <input type="text">
</body>

五、JQuery事件对象

1.知识点

在这里插入图片描述

2.代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function() {
            $(document).on("click", function() {
                console.log("点击了document");

            })
            $("div").on("click", function(event) {
                // console.log(event);
                console.log("点击了div");
                event.stopPropagation();
            })
        })
    </script>
</head>
<body>
    <div></div>
</body>
</html

六、JQuery拷贝对象

1. 知识点

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

2.代码演示

<script>
  $(function() {
        // var targetObj = {};
        // var obj = {
        //     id: 1,
        //     name: "andy"
        // };
        // // $.extend(target, obj);
        // $.extend(targetObj, obj);
        // console.log(targetObj);
        // var targetObj = {
        //     id: 0
        // };
        // var obj = {
        //     id: 1,
        //     name: "andy"
        // };
        // // $.extend(target, obj);
        // $.extend(targetObj, obj);
        // console.log(targetObj); // 会覆盖targetObj 里面原来的数据
        var targetObj = {
            id: 0,
            msg: {
                sex: '男'
            }
        };
        var obj = {
            id: 1,
            name: "andy",
            msg: {
                age: 18
            }
        };
        // // $.extend(target, obj);
        // $.extend(targetObj, obj);
        // console.log(targetObj); // 会覆盖targetObj 里面原来的数据
        // // 1. 浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象
        // targetObj.msg.age = 20;
        // console.log(targetObj);
        // console.log(obj);
        // 2. 深拷贝把里面的数据完全复制一份给目标对象 如果里面有不冲突的属性,会合并到一起 
        $.extend(true, targetObj, obj);
        // console.log(targetObj); // 会覆盖targetObj 里面原来的数据
        targetObj.msg.age = 20;
        console.log(targetObj); // msg :{sex: "男", age: 20}
        console.log(obj);
    })
</script>

七、JQuery多库共存

1.知识点

在这里插入图片描述

2.代码演示

在这里插入图片描述

八、JQuery插件

1.瀑布流

在这里插入图片描述

2.图片懒加载

在这里插入图片描述

3.全屏滚动

在这里插入图片描述

九.Bootstrap JS插件

在这里插入图片描述
注意：
bootstrap插件使用时记得要引入所有的，包括Jquery。
同时要放在container容器里面。

`<div class="container"> </div>`

案例：todolist

1.分析：

（主要利用本地存储）
在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

本地存储代码演示：

<script>
        var todolist = [{
            title: '我今天吃八个馒头',
            done: false
        }, {
            title: '我今天学习jq',
            done: false
        }, ];
        // localStorage.setItem("todo", todolist);
        // 1. 本地存储里面只能存储字符串的数据格式 把我们的数组对象转换为字符串格式 JSON.stringify()
        localStorage.setItem("todo", JSON.stringify(todolist));
        var data = localStorage.getItem("todo");
        // console.log(typeof data);
        // console.log(data[0].title);
        // 2. 获取本地存储的数据 我们需要把里面的字符串数据转换为 对象格式 JSON.parse()
        data = JSON.parse(data);
        console.log(data);
        console.log(data[0].title);
    </script>

十、JQuery尺寸、位置操作

1.知识点

在这里插入图片描述

2.代码演示：

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

3.案例：带有动画的返回顶部

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

十一、链式编程

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

QNAN-
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
海康DS-7804n-f1/ds-7808N-F1/P V3.4.97 解绑萤石云
08-19
版本号：V3.4.97 Build200618 程序包适用于以下型号： DS-7804/08N-F1/P、 ...将该文件拷贝到U盘【U盘需FAT32格式】， 将U盘插到录像机USB接口，进入录像机主菜单 选择系统维护→版本升级→本地升级进行升级
海康威视DS-7604N-F1/RTA固件升级包
05-07
特别地，"支持萤石云解绑"意味着用户现在可以解除设备与萤石云服务的绑定，以便于更换或管理多个云服务。 5. **用户体验改善**：界面改进、操作流程简化等，旨在提供更友好的用户界面和操作体验。 压缩包内的文件...
[前端] 代码中执行绑定元素的指定事件trigger方法
程序员老狼专注开发aigc或客服系统应用
04-01 480
前面业务里有个搜索功能 , 入口比较深 , 现在想要把入口挪到有公共header的地方 , 在不想完全实现一遍功能的情况下 , 就需要模拟进行多个点击事件来执行点击后的效果 执行先点击1 ,再给inout赋值 ,再点击2 基本思路是类似jquery的trigger方法 , 原生js也是可以实现 , 代码如下 <button id="btn-1">按钮1</b...
微信小程序开发--uniapp
mzc的博客
10-10 5429
uniapp介绍 什么是uniapp uniapp是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。 截止2020年8月份，uniapp已经支持一套代码打包到 Android、IOS、H5、微信小程序、支付宝小程序、百度小程序、字节跳动小程序、QQ小程序、快应用、360小程序 10个平台。 移动端跨平台技术发展史 随着互联网的逐渐发展，互联网公司越来越多，原生的移动端存在无法
uni-app:小程序开发总结
m0_58293192的博客
01-10 1701
uni-app:小程序开发总结
微信小程序学习之triggerEvent
weixin_34292402的博客
03-21 996
1.tag/index.wxml<viewbind:tap="onTap"></view>2.tag/index.jsproperties:{ text:String }, methods:{ onTap:function(event){ this...
前端常见面试题
小谭鸡米花的博客
10-14 144
1.关于防抖/节流 题目要求很明确，要求最终输出“searchText1”，并且在500ms后输出“searchText7”，很明显就是关于同一个函数在短时间内重复调用，如何限制其调用频率。 function throttle(action, threshold) { // TODO: } let timer = true; const triggerScroll = throttle((val) => { console.log
海康DS-7816NB-K2/16P解除萤石云绑定专用解绑包
最新发布
10-04
海康DS-7816NB-K2/16P解除萤石云绑定专用解绑包，在海康硬盘录像机上解绑萤石云下载DS-7816NB-K2/16P后对硬盘录像机升级就可以解绑海康萤石云的绑定，解绑后使用你自己的手机在绑定萤石云。解绑时保持DS-7816NB-K2/...
javascript/jquery实现点击触发事件的方法分析
10-16
它会在DOM准备就绪后自动绑定事件： ```javascript $(function() { // 等同于 $(document).ready() $("#demo").click(function() { alert("我是方案二"); }) }) ``` 3. 方案三：原生JavaScript的...
jQuery交互式前端开发(第一季)：初体验/选择器/事件绑定
06-19
本课程内容详尽，讲解深入。内容包括：jQuery选择器、包装对象、jQuery的DOM操作、样式操作、属性操作、节点操作、动画效果、事件绑定和解绑、自定义事件、隐式迭代、链式编程、jQuery插件开发、各种案例等。
表单验证 trigger
WHQNever_Stop的博客
06-22 4943
简单来说就是设置trigger就会自动验证表单填写是不是符合条件的，而trigger就控制什么时候验证。1.trigger:"blur" 这是当失去焦点时验证。 填写密码、用户名、手机号、邮箱时可以使用blur2.trigger:"change" 这是当值改变了时验证。 用单选框、复选框的时候可以使用biur...
在线jquery.min.js引用
热门推荐
透明大脑
05-16 5万+
jQuery：  script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">script> script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js">script>
前端框架Aurelia - Delegate vs Trigger
oscar92420aaa的博客
03-23 1127
1.When use which The short answer is: Use delegate except when you cannot use delegate. 哈哈哈哈写文档的真的太可爱了。 Event delegation is a technique used to improve application performance. It dra
jQuery绑定和解绑点击事件及重复绑定解决办法
说：/~不了的专栏
10-14 9954
绑点击事件这个是jquery一个常用的功能，如click,unbind等等这些事件绑定事情，但还有很多朋友不知道，下面我来给大家介绍jQuery绑定和解绑点击事件及重复绑定解决办法,有需要了解的同学可参考。
jQuery之事件触发trigger
weixin_33921089的博客
09-12 155
这个函数也会导致浏览器同名的默认行为的执行。比如，如果用trigger()触发一个'submit'，则同样会导致浏览器提交表单。如果要阻止这种默认行为，应返回false。&lt;script type="text/javascript"&gt; $(function(){ $('#btn').bind("click", function(){ ...
trigger
weixin_30420305的博客
10-06 90
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><input type="button" id="btn" value="button">&...
jquery事件一 ---鼠标移入移出
weixin_30555753的博客
05-07 215
比较一下几个jquery事件的区别mouseover() 鼠标进入（进入子元素也触发） mouseout() 鼠标离开（离开子元素也触发） mouseenter() 鼠标进入（进入子元素不触发） mouseleave() 鼠标离开（离开子元素不触发） hover() 同时为mouseenter和mouseleave事件指定处理函数用一个有背景的盒子为例子，加上margin-top的动画效果...
触发元素事件 trigger
Web前端工程师
10-09 371
$('body').click(function(){ alert(1); }); $('body').trigger('click'); //自动点击了body，并且触发单击事件 <input type='text' id='test' value='大家好啊'/> $('#test').trigger('select'); //自动选择了ID为test的内容 ...
trigger的用法总结
个人前端记录
03-14 2万+
最重要最基础的语法： $(selector).trigger(event,eventObj,param1,param2,...) event：必需。规定指定元素上要触发的事件。 可以是自定义事件，或者任何标准事件。 param1,param2,...可选。传递到事件处理程序的额外参数。 额外的参数对自定义事件特别有用。 与triggerHandle的区别： ● 它不会引起...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值