jQuery-Day3

最新推荐文章于 2025-08-17 13:02:36 发布

原创最新推荐文章于 2025-08-17 13:02:36 发布 · 145 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #前端 #javascript

程序员专栏收录该内容

112 篇文章

订阅专栏

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




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



[](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)🥈 2.3 事件处理 trigger() 自动触发事件

-------------------------------------------------------------------------------------------



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

![在这里插入图片描述](https://img-blog.csdnimg.cn/13ca877c520740aa83cf5e73bdf3f6b4.png)  

![在这里插入图片描述](https://img-blog.csdnimg.cn/fa480973fd554968879b894ea0756c15.png)  

代码示例如下：

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




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



[](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)🥇 三、jQuery 事件对象

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



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



**语法**  

![在这里插入图片描述](https://img-blog.csdnimg.cn/07cad8cdb3b64cfc9c080575ca5be815.png)  

代码示例如下：

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




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



[](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)🥇 四、jQuery 拷贝对象

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



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

**语法**  

![在这里插入图片描述](https://img-blog.csdnimg.cn/5ced21f81633442f99df34d6c9ca98b3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YmN56uv5bCP5LqM,size_20,color_FFFFFF,t_70,g_se,x_16)  

代码示例如下：




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



[](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)🥇 五、jQuery 多库共存

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



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

**语法**  

![在这里插入图片描述](https://img-blog.csdnimg.cn/361ec2ab436c4cda941adea6b211965f.png)  

代码示例如下：




[](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)🥇 六、jQuery 插件

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



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



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



 jQuery 插件常用的网站：



1.  [jQuery 插件库](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)

    

2.  [jQuery 之家](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)

    

3.  引入相关文件。（jQuery 文件 和 插件文件）

    

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

    



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



[](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)🥈 6.1 瀑布流插件（重点讲解）

---------------------------------------------------------------------------------



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

[瀑布流插件链接](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)



**下载位置如图：**  

![在这里插入图片描述](https://img-blog.csdnimg.cn/0bf2da54c45449c8a0909a2c0048fb84.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YmN56uv5bCP5LqM,size_20,color_FFFFFF,t_70,g_se,x_16)  

![在这里插入图片描述](https://img-blog.csdnimg.cn/a473c55015de4afe90a04aa69e91ec12.png)



### [](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)🏅 6.1.1 瀑布流插件使用步骤演示



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



1.  引入css




2.  引入js




3.引入html.

<!-- html结构一般为事先写好，很难修改结构，但可以修改内容及图片的多少（article标签） -->

<section id="gallery-wrapper">

    <article class="white-panel">

        <img src="images/P_000.jpg" class="thumb">

        <h1><a href="#">我是轮播图片1</a></h1>

        <p>里面很精彩哦</p>

    </article>

    <article class="white-panel">

        <img src="images/P_005.jpg" class="thumb">

        <h1><a href="#">我是轮播图片1</a></h1>

        <p>里面很精彩哦</p>

    </article>

    <article class="white-panel">

        <img src="images/P_006.jpg" class="thumb">

        <h1><a href="#">我是轮播图片1</a></h1>

        <p>里面很精彩哦</p>

    </article>

    <article class="white-panel">

        <img src="images/P_007.jpg" class="thumb">

        <h1><a href="#">我是轮播图片1</a></h1>

        <p>里面很精彩哦</p>

    </article>

</section>




📣总结：jQuery插件就是引入别人写好的：html 、css、js （有时也可以只引入一部分，读懂后也可以修改部分内容）❗❗❗



[](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)🥈 6.2 图片懒加载插件

-----------------------------------------------------------------------------



    图片的懒加载就是：当

**真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲**
**详情关注公中号【编程进阶路】**

页面滑动到有图片的位置，图片才进行加载，用以提升页面打开的速度及用户体验。（下载略）  

[图片懒加载插件链接](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)



### [](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)🏅 6.2.1 图片懒加载插件使用步骤演示



    懒加载只需引入html 和 js操作 即可，此插件不涉及css。



1.  引入js




2.  引入html




[](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)🥈 6.3 全屏滚动插件

----------------------------------------------------------------------------



    全屏滚动插件比较大，所以，一般大型插件都会有帮助文档，或者网站。全屏滚动插件介绍比较详细的网站为：  

[全屏滚动插件链接](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)



### [](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)🏅 6.3.1 全屏滚动插件使用步骤演示



    全屏滚动因为有多重形式，所以不一样的风格html和css也不一样，但是 js 变化不大。所以下面只演示js的引入，html和css引入根据自己实际项目需要使用哪种风格引入对应的HTML和CSS。



代码示例如下：




📣注意：实际开发，一般复制文件，然后在文件中进行修改和添加功能。❗❗❗





## 最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。