jQuery-Day3

🏆 学习の目标

=======================================================================

能够说出4种常见的注册事件

能够说出 on 绑定事件的优势

能够说出 jQuery 事件委派的优点以及方式

能够说出绑定事件与解绑事件

能够说出 jQuery 对象的拷贝方法

能够说出 jQuery 多库共存的2种方法

能够使用 jQuery 插件

🥇 一、jQuery 事件注册

===============================================================================

​ jQuery 为我们提供了方便的事件注册机制,使开发人员易于操作,优缺点如下:

  • 优点: 操作简单,且不用担心事件覆盖等问题。

  • 缺点: 普通的事件注册不能做事件委托,且无法实现事件解绑,需要借助其他方法。

    语法

    在这里插入图片描述

🥇 二、jQuery 事件处理

===============================================================================

因为普通注册事件方法的不足,jQuery又开发了多个处理方法,重点讲解如下:

  • on(): 用于事件绑定,目前最好用的事件绑定方法

  • off(): 事件解绑

  • trigger() / triggerHandler(): 事件触发

🥈 2.1 事件处理 on() 绑定事件


因为普通注册事件方法的不足,jQuery又创建了多个新的事件绑定方法bind() / live() / delegate() / on()等,其中最好用的是: on()

语法

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

代码示例如下:


<body>

    <div></div>

    <ul>

        <li>我们都是好孩子</li>

        <li>我们都是好孩子</li>

        <li>我们都是好孩子</li>

    </ul>

    <ol></ol>



    <script>

        $(function() {

            // (1) on可以绑定1个或者多个事件处理程序

            // $("div").on({

            //     mouseenter: function() {

            //         $(this).css("background", "skyblue");

            //     },

            //     click: function() {

            //         $(this).css("background", "purple");

            //     }

            // });

            $("div").on("mouseenter mouseleave", function() {

                $(this).toggleClass("current");

            });

  

            // (2) on可以实现事件委托(委派)

            // click 是绑定在ul 身上的,但是 触发的对象是 ul 里面的小li

            // $("ul li").click();

            $("ul").on("click", "li", function() {

                alert(11);

            });



            // (3) on可以给未来动态创建的元素绑定事件

            $("ol").on("click", "li", function() {

                alert(11);

            })

            var li = $("<li>我是后来创建的</li>");

            $("ol").append(li);

        })

    </script>

</body>





📣注意:on()方法的三个很强大的优势:1、可以同时绑定多个事件处理程序;2、可以进行事件委派,把绑定在子元素的事件绑定到父元素上;3、可以给动态生成的元素绑定事件;❗❗❗

🥈 2.2 事件处理 off() 解绑事件


当某个事件上面的逻辑,在特定需求下不需要的时候,可以把该事件上的逻辑移除,这个过程我们称为事件解绑。jQuery 为我们提供 了多种事件解绑方法:die() / undelegate() / off() 等,甚至还有只触发一次的事件绑定方法 one(),在这里我们重点讲解一下 off() ;

语法

在这里插入图片描述

代码示例如下:


<body>

    <div></div>

    <ul>

        <li>我们都是好孩子</li>

        <li>我们都是好孩子</li>

        <li>我们都是好孩子</li>

    </ul>

    <p>我是一个P标签</p>

	<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>

</body>



📣注意:off()方法的三个很强大的优势:1、可以同时解绑定多个事件处理程序;2、可以进行解绑事件委派;3、可以解绑元素上的某个特定的事件;❗❗❗

🥈 2.3 事件处理 trigger() 自动触发事件


有些时候,在某些特定的条件下,我们希望某些事件能够自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发。由此 jQuery 为我们提供了两个自动触发事件 trigger() 和 triggerHandler() ;

在这里插入图片描述

在这里插入图片描述

代码示例如下:


<body>

    <div></div>

    <input type="text">

      

    <script>

    $(function() {

      // 绑定事件

      $("div").on("click", function() {

        alert(11);

      });



      // 自动触发事件

      // 1. 元素.事件()

      // $("div").click();会触发元素的默认行为

      

      // 2. 元素.trigger("事件")

      // $("div").trigger("click");会触发元素的默认行为

      $("input").trigger("focus");

      

      // 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为

      $("input").on("focus", function() {

        $(this).val("你好吗");

      });

      // 一个会获取焦点,一个不会

      $("div").triggerHandler("click");

      // $("input").triggerHandler("focus");

    });

    </script>

</body>



📣注意:trigger() 和 triggerHandler() 方法的区别是:triggerHandler()方法不会触发元素的默认行为❗❗❗

🥇 三、jQuery 事件对象

===============================================================================

jQuery 对DOM中的事件对象 event 进行了封装,兼容性更好,获取更方便,使用变化不大。事件被触发,就会有事件对象的产生。

语法

在这里插入图片描述

代码示例如下:


<body>

    <div></div>



	<script>

        $(function() {

            $(document).on("click", function() {

                console.log("点击了document");

            })

            $("div").on("click", function(event) {

                // console.log(event);

                console.log("点击了div");

                event.stopPropagation();

            })

        })

    </script>

</body>



📣注意:jQuery中的 event 对象使用,可以借鉴 API 和 DOM 中的 event 。❗❗❗

🥇 四、jQuery 拷贝对象

===============================================================================

jQuery中为我们提供了一个拷贝对象的方法,方便易用,内容如下。

语法

在这里插入图片描述

代码示例如下:


<script>

        $(function() {

   			// 1.合并数据

            var targetObj = {};

            var obj = {

                id: 1,

                name: "andy"

            };

            // $.extend(target, obj);

            $.extend(targetObj, obj);

            console.log(targetObj);

   

   			// 2. 会覆盖 targetObj 里面原来的数据

            var targetObj = {

                id: 0

            };

            var obj = {

                id: 1,

                name: "andy"

            };

            // $.extend(target, obj);

            $.extend(targetObj, obj);

            console.log(targetObj); 

        })

    </script>



📣注意:1、浅拷贝拷贝的是目标对象的地址,修改目标对象会影响拷贝的新的对象;2、深拷贝是克隆一个新的对象,修改目标对象不会影响拷贝出来的新的对象;❗❗❗

🥇 五、jQuery 多库共存

===============================================================================

实际开发中,很多项目连续开发十多年,jQuery版本不断更新,最初的 jQuery 版本无法满足需求,这时就需要保证在旧有版本正常运行的情况下,新的功能使用新的jQuery版本实现,这种情况被称为,jQuery 多库共存。

语法

在这里插入图片描述

代码示例如下:


<script>

	$(function() {

  		// 让jquery 释放对$ 控制权 让用自己决定

  		var suibian = jQuery.noConflict();

  		console.log(suibian("span"));

	})

</script>



🥇 六、jQuery 插件

=============================================================================

jQuery 功能比较有限,想要更复杂的特效效果,可以借助于 jQuery 插件完成。 这些插件也是依赖于jQuery来完成的,所以必须要先引入

jQuery文件,因此也称为 jQuery 插件。

​ jQuery 插件常用的网站:

  1. jQuery 插件库

  2. jQuery 之家

  3. 引入相关文件。(jQuery 文件 和 插件文件)

  4. 复制相关html、css、js (调用插件)。

📣注意:jQuery插件是依赖于jQuery,所以必须先引入jQuery; ❗❗❗

🥈 6.1 瀑布流插件(重点讲解)


我们学习的第一个插件是jQuery之家的开源插件,瀑布流。我们将重点详细讲解,从找到插件所在网页,然后点击下载代码,到插件的使用等,后面的插件使用可参考瀑布流插件的使用。

瀑布流插件链接

下载位置如图:

在这里插入图片描述

在这里插入图片描述

🏅 6.1.1 瀑布流插件使用步骤演示

插件的使用三点: 1. 引入css. 2.引入JS 3.引入html。 (有的简单插件只需引入html和js,甚至有的只需引入js);

  1. 引入css

<link rel="stylesheet" href="css/normalize.css">

<link rel="stylesheet" type="text/css" href="css/default.css">

  

<!-- 下面的样式代码为页面布局,可以引入,也可以自己写,自己设计页面样式,一般为直接引入,方便 -->

<style type="text/css">

  #gallery-wrapper {

    position: relative;

    max-width: 75%;

    width: 75%;

    margin: 50px auto;

  }



  img.thumb {

    width: 100%;

    max-width: 100%;

    height: auto;

  }



  .white-panel {

    position: absolute;

    background: white;

    border-radius: 5px;

    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);

    padding: 10px;

  }



  .white-panel h1 {

    font-size: 1em;

  }



  .white-panel h1 a {

    color: #A92733;

  }



  .white-panel:hover {

    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);

    margin-top: -5px;

    -webkit-transition: all 0.3s ease-in-out;

    -moz-transition: all 0.3s ease-in-out;

    -o-transition: all 0.3s ease-in-out;

    transition: all 0.3s ease-in-out;

  }

</style>



  1. 引入js

<!-- 前两个必须引入 -->

<script src="js/jquery-1.11.0.min.js"></script>

<script src="js/pinterest_grid.js"></script>

<!-- 下面的为启动瀑布流代码,参数可调节属性,具体功能可参考readme.html -->

<script type="text/javascript">

	$(function() {

      $("#gallery-wrapper").pinterest_grid({

          no_columns: 5,

          padding_x: 15,



### 最后

**一个好的心态和一个坚持的心很重要**,很多冲着高薪的人想学习前端,但是能学到最后的没有几个,遇到困难就放弃了,这种人到处都是,就是因为有的东西难,所以他的回报才很大,我们评判一个前端开发者是什么水平,就是他解决问题的能力有多强。



**分享一些前端面试题以及学习路线给大家**

![](https://img-blog.csdnimg.cn/img_convert/09c8a0a9ea6d15595e09d8a76e80029e.webp?x-oss-process=image/format,png)

s ease-in-out;

    -moz-transition: all 0.3s ease-in-out;

    -o-transition: all 0.3s ease-in-out;

    transition: all 0.3s ease-in-out;

  }

</style>



  1. 引入js

<!-- 前两个必须引入 -->

<script src="js/jquery-1.11.0.min.js"></script>

<script src="js/pinterest_grid.js"></script>

<!-- 下面的为启动瀑布流代码,参数可调节属性,具体功能可参考readme.html -->

<script type="text/javascript">

	$(function() {

      $("#gallery-wrapper").pinterest_grid({

          no_columns: 5,

          padding_x: 15,



### 最后

**一个好的心态和一个坚持的心很重要**,很多冲着高薪的人想学习前端,但是能学到最后的没有几个,遇到困难就放弃了,这种人到处都是,就是因为有的东西难,所以他的回报才很大,我们评判一个前端开发者是什么水平,就是他解决问题的能力有多强。



**分享一些前端面试题以及学习路线给大家**

[外链图片转存中...(img-Ckg9JvuA-1718013958623)]

![](https://img-blog.csdnimg.cn/img_convert/a05e9491c924d01a5f6530105ed05a16.webp?x-oss-process=image/format,png)
  • 30
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值