$(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>
📣注意:on()方法的三个很强大的优势:1、可以同时绑定多个事件处理程序;2、可以进行事件委派,把绑定在子元素的事件绑定到父元素上;3、可以给动态生成的元素绑定事件;❗❗❗
[]( )🥈 2.2 事件处理 off() 解绑事件
-------------------------------------------------------------------------------------
当某个事件上面的逻辑,在特定需求下不需要的时候,可以把该事件上的逻辑移除,这个过程我们称为事件解绑。jQuery 为我们提供 了多种事件解绑方法:die() / undelegate() / off() 等,甚至还有只触发一次的事件绑定方法 one(),在这里我们重点讲解一下 off() ;
**语法**
![在这里插入图片描述](https://img-blog.csdnimg.cn/93dbe1c602bf413bb7768d7918719768.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YmN56uv5bCP5LqM,size_20,color_FFFFFF,t_70,g_se,x_16)
代码示例如下:
<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>
📣注意:off()方法的三个很强大的优势:1、可以同时解绑定多个事件处理程序;2、可以进行解绑事件委派;3、可以解绑元素上的某个特定的事件;❗❗❗
[]( )🥈 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()方法不会触发元素的默认行为❗❗❗
[]( )🥇 三、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 。❗❗❗
[]( )🥇 四、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、深拷贝是克隆一个新的对象,修改目标对象不会影响拷贝出来的新的对象;❗❗❗
[]( )🥇 五、jQuery 多库共存
===============================================================================
实际开发中,很多项目连续开发十多年,jQuery版本不断更新,最初的 jQuery 版本无法满足需求,这时就需要保证在旧有版本正常运行的情况下,新的功能使用新的jQuery版本实现,这种情况被称为,jQuery 多库共存。
**语法**
![在这里插入图片描述](https://img-blog.csdnimg.cn/361ec2ab436c4cda941adea6b211965f.png)
代码示例如下:
[]( )🥇 六、jQuery 插件
=============================================================================
jQuery 功能比较有限,想要更复杂的特效效果,可以借助于 jQuery 插件完成。 这些插件也是依赖于jQuery来完成的,所以必须要先引入
jQuery文件,因此也称为 jQuery 插件。
jQuery 插件常用的网站:
1. [jQuery 插件库]( )
2. [jQuery 之家]( )
3. 引入相关文件。(jQuery 文件 和 插件文件)
4. 复制相关html、css、js (调用插件)。
📣注意:jQuery插件是依赖于jQuery,所以必须先引入jQuery; ❗❗❗
[]( )🥈 6.1 瀑布流插件(重点讲解)
---------------------------------------------------------------------------------
我们学习的第一个插件是jQuery之家的开源插件,瀑布流。我们将重点详细讲解,从找到插件所在网页,然后点击下载代码,到插件的使用等,后面的插件使用可参考瀑布流插件的使用。
[瀑布流插件链接]( )
**下载位置如图:**
![在这里插入图片描述](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)
### []( )🏅 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 (有时也可以只引入一部分,读懂后也可以修改部分内容)❗❗❗
[]( )🥈 6.2 图片懒加载插件
-----------------------------------------------------------------------------
图片的懒加载就是:当页面滑动到有图片的位置,图片才进行加载,用以提升页面打开的速度及用户体验。(下载略)
[图片懒加载插件链接]( )
### []( )🏅 6.2.1 图片懒加载插件使用步骤演示
懒加载只需引入html 和 js操作 即可,此插件不涉及css。
1. 引入js
2. 引入html
[]( )🥈 6.3 全屏滚动插件
----------------------------------------------------------------------------
全屏滚动插件比较大,所以,一般大型插件都会有帮助文档,或者网站。全屏滚动插件介绍比较详细的网站为:
[全屏滚动插件链接]( )
### []( )🏅 6.3.1 全屏滚动插件使用步骤演示
# 最后
**自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。**
**深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。**
**因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。**
![img](https://img-blog.csdnimg.cn/img_convert/9b680d34df668298a0572f7858b204ee.jpeg)
![](https://img-blog.csdnimg.cn/img_convert/35501e58bebb55df83fdebdab0ec6f9c.png)
![](https://img-blog.csdnimg.cn/img_convert/e2a46c925b0ed00eb23010d02efc28c7.png)
**既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!**
[**如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!**](https://bbs.csdn.net/topics/618191877)
**由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!**
-------------------------------------------------------
全屏滚动插件比较大,所以,一般大型插件都会有帮助文档,或者网站。全屏滚动插件介绍比较详细的网站为:
[全屏滚动插件链接]( )
### []( )🏅 6.3.1 全屏滚动插件使用步骤演示
# 最后
**自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。**
**深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。**
**因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。**
[外链图片转存中...(img-YwfvjgKO-1714924691660)]
[外链图片转存中...(img-6HkZ9VjV-1714924691660)]
[外链图片转存中...(img-iJ1OdKyx-1714924691660)]
**既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!**
[**如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!**](https://bbs.csdn.net/topics/618191877)
**由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!**