jQuery-Day3

2401_85122909

于 2024-06-10 18:06:10 发布

阅读量716

点赞数 30

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/2401_85122909/article/details/139579955

版权

🏆 学习の目标

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

能够说出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 插件常用的网站：

jQuery 插件库
jQuery 之家
引入相关文件。（jQuery 文件和插件文件）
复制相关html、css、js (调用插件)。

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

🥈 6.1 瀑布流插件（重点讲解）

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

瀑布流插件链接

下载位置如图：

在这里插入图片描述

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

插件的使用三点： 1. 引入css. 2.引入JS 3.引入html。（有的简单插件只需引入html和js，甚至有的只需引入js）；

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

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

引入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)

2401_85122909

关注

30
点赞
踩
28

收藏

觉得还不错? 一键收藏
0
评论
jQuery-Day3

🏆 学习の目标能够说出4种常见的注册事件能够说出 on 绑定事件的优势能够说出 jQuery 事件委派的优点以及方式能够说出绑定事件与解绑事件能够说出 jQuery 对象的拷贝方法能够说出 jQuery 多库共存的2种方法能够使用 jQuery 插件🥇 一、jQuery 事件注册 jQuery 为我们提供了方便的事件注册机制，使开发人员易于操作，优缺点如下：优点: 操作简单，且不用担心事件覆盖等问题。缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。
复制链接

扫一扫