用了都说好的jQuery（3）----事件

目标：

能够说出4种常见的注册事件
能够说出 on 绑定事件的优势
能够说出 jQuery 事件委派的优点以及方式
能够说出绑定事件与解绑事件
能够说出 jQuery 对象的拷贝方法
能够说出 jQuery 多库共存的2种方法
能够使用 jQuery 插件

1.1. jQuery 事件注册

jQuery 为我们提供了方便的事件注册机制，是开发人员优雅的操作优缺点如下：

优点: 操作简单，且不用担心事件覆盖等问题。
缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。

语法

在这里插入图片描述

演示代码

<body><div></div><script>$(function() {// 1. 单个事件注册$("div").click(function() {$(this).css("background", "purple");});$("div").mouseenter(function() {$(this).css("background", "skyblue");});})</script>
</body>

1.2. jQuery 事件处理

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

on(): 用于事件绑定，目前最好用的事件绑定方法
off(): 事件解绑
trigger() / triggerHandler(): 事件触发

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

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

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

1.3. 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 。

1.4. 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.5. jQuery 多库共存

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

语法

在这里插入图片描述

演示代码

<script>$(function() {// 让jquery 释放对$ 控制权 让用自己决定var suibian = jQuery.noConflict();console.log(suibian("span"));})
</script>

1.6. jQuery 插件

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

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

jQuery 插件常用的网站：

jQuery 插件库 http://www.jq22.com/
jQuery 之家 http://www.htmleaf.com/

jQuery 插件使用步骤：

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

此处对比较常用的插件进行介绍

1.6.1. 瀑布流插件（重点阐述）

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

预览：
在这里插入图片描述
下载位置
jQuery 之家 http://www.htmleaf.com/

代码演示

插件的使用三点： 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>

2.引入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,padding_y: 10,margin_bottom: 50,single_column_breakpoint: 700});});
</script>

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 （有时也可以只引入一部分，读懂后也可以修改部分内容）

1.6.2. 图片懒加载插件

插件库下载即可（略）

1.6.3. 全屏滚动插件

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

GitHub：https://github.com/alvarotrigo/fullPage.js

中文网址：http://www.dowebok.com/demo/2014/77/

代码演示

全屏滚动因为有多重形式，所以不一样的风格html和css也不一样，但是 js 变化不大。所以下面只演示js的引入，html和css引入根据自己实际

项目需要使用哪种风格引入对应的HTML和CSS。

<script src="js/jquery.min.js"></script>
<script src="js/fullpage.min.js"></script>
<script>$(function() {$('#dowebok').fullpage({sectionsColor: ['pink', '#4BBFC3', '#7BAABE', '#f90'],navigation: true});});
</script>

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

1.6.4. bootstrap组件

Bootstrap是 Twitter 公司设计的基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，他依靠jQuery实现，且支持响应式

布局，使得 Web 开发更加方便快捷。

凡是在软件开发中用到了软件的复用，被复用的部分都可以称为组件，凡是在应用程序中已经预留接口的组件就是插件。Bootstrap组件使用非常方便: 1.引入bootstrap相关css和js 2.去官网复制html

代码演示

引入bootstrap相关css和js

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

去官网复制html的功能模块

    <div class="container"><!-- Single button --><div class="btn-group"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></div></div>

1.6.5. bootstrap插件（JS）

bootstrap中的js插件其实也是组件的一部分，只不过是需要js调用功能的组件，所以一般bootstrap的js插件一般会伴随着js代码（有的也可以省略js，用属性实现）。

步骤： 1.引入bootstrap相关css和js 2.去官网复制html 3.复制js代码，启动js插件。

代码演示

引入bootstrap相关css和js

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

去官网复制html的功能模块

<!-- 模态框 -->
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"><div class="modal-dialog modal-lg" role="document"><div class="modal-content">里面就是模态框</div></div>
</div>

复制js代码，启动js插件。

<script>// 当我们点击了自己定义的按钮，就弹出模态框$(".myBtn").on("click", function() {// alert(11);$('#btn').modal()})
</script>

插件总结：根据实际项目要求使用相应的插件，达到预期结果。

最后希望我们都能成为那个写插件的人，Come on

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

网络安全之密码学信息安全/加密算法
文章目录1 常见加密方式1.1 对称加密1.2 Base64 算法1.2.1 算法简介1.2.2 Base64 算法原理1.2.3 base64 构成原则1.3 DES加密和解密1.4 AES加密解密2 加密模式2.1 ECB2.2 CBC3 填充模式3.1 NoPadding3.2 PKCS5Padding3.3 说明3.4 案例4 消息摘要4.1 特点4.2 常见算法4.3 获取字…...
2024/5/6 10:53:46
做了4年程序员，我明白了除了编写代码，这件事更重要
软件的目的有时会被遗忘译/_小生原标题/_你解决的问题比你编写的代码更重要！程序员似乎忘记了软件的真正目的，那就是解决现实问题。50年前，在1968年，由北约科学委员会主办的软件工程工作会议召开。那时，人们开始注意到软件正在成为社会的基本组成部分。然而，它也变得难…...
2024/4/24 10:40:21
Linux之企业实战
Linux之企业实战1.vmware虚拟机的三种网络模式2.CentOS7实战静态ip地址配置3.CentOS7实战修改linux系统主机名4.CentOS7实战ssh免密远程登录其它机器5.CentOS7实战搭建nfs文件共享服务器6.CentOS7实战部署ftp文件传输服务器 1.vmware虚拟机的三种网络模式简介：介绍网络设置 V…...
2024/4/24 10:40:19
python+appium（1）
一、下载JDK JDK是 Java 语言的软件开发工具包，JDK（TM）8 64位简而言之就是一款针对java编程的软件工具，是学习java编程的第一步。JDK作为Java语言的软件开发工具包，主要用于移动设备、嵌入设备的应用程序。LDK的全称Java Development Kit，是Java语言的软件开发工具包，是…...
2024/4/24 10:40:18
智能指针
智能指针用于解决普通指针容易造成内存泄漏和野指针方面的问题。普通指针不易管理极易出错，如出现一些异常时导致的堆上申请的内存没有释放。伴随着这类问题的还有多线程下类似加锁解锁的问题，我们希望类似指针和锁这类的资源可以自动管理自己的生存周期。对于锁，可以使用lo…...
2024/5/5 7:08:46
委派模式
1、委派模式基础介绍含义：又叫委托模式，主要目的是将任务的调度和分配与任务的执行分离开来；它是一种特殊的静态代理，接受请求的对象将请求委托给另一个对象来进行处理；属于行为型模式；应用场景：①委派不知道任务如何进行处理，把请求交给对象处理②实现程序的解耦（更注…...
2024/4/26 3:50:23
阿里云GPU服务器ubuntu18.04 cuda9.2 cudnn7.1环境 python3 tensorflow1.8编译和whl安装
目录参考链接和傻瓜安装1.CUDA9.2 和驱动的安装2.CUDNN7.1的安装3.NCCL 2.2.13的安装4.安装依赖5.配置TensorFlow源6.编译tensorflow 参考链接和傻瓜安装参考链接 https://www.pytorials.com/how-to-install-tensorflow-gpu-with-cuda-9-2-for-python-on-ubuntu我自己编译花了大…...
2024/4/24 10:40:16
smart rtmpd 服务器配置文件说明及优化方法介绍
----------------------------------------------------------------------------------------------------------------------------------------一分钟快速搭建 rtmpd 服务器: https://blog.csdn.net/freeabc/article/details/102880984软件下载地址: http://www.qiyicc.com/…...
2024/4/24 10:40:16
Python3 + Appium + 安卓模拟器
Python3 + Appium + 安卓模拟器概述本文主要分为以下几个部分安装Android SDK 安装JDK 配置环境变量安装Python3 安装Python3的Appium库安装Appium 安装模拟器(使用真机可以忽略)正文一、安装Android SDK 安装Android SDK（安卓软件开发包），测试Android手机必然是要安装…...
2024/5/5 7:24:44
1.4 计算属性——第1章 Vue起步知识
Vue的HTML模板里，可以用一些简单的运算表达式，放在{{}}里面，但在模板中放入太多的逻辑会让模板过重且难以维护，所以，对于任何复杂逻辑，都应当使用计算属性。注意：computed中的属性不能与data中的属性同名，否则会报错。什么是计算属性呢？就是把data里的属性改变一下，就…...
2024/4/24 10:40:16
罗克韦尔编程软件RSLogix5000 win7 64位那什么的方法
以下内容为笔者亲自整理，亲测有效！注意:当替换不了时，打开任务管理器，停止下图服务重试第一步：文件夹01中内容复制到下图路径下面，替换原有文件第二步：文件夹02中的内容复制到下图的路径下面，替换原有文件：第三步:复制文件夹03中内容至下图中路径，替换原有文件需要…...
2024/4/15 5:34:38
机械设计软件-CAD目录
一、CAD软件安装包+安装教程CAD 2004软件安装包+安装教程关键词：CAD 2004|CAD2004|cad2004|cad 2004|CAD 2005软件安装包+安装教程关键词：CAD 2005|CAD2005|cad2005|cad 2005|CAD 2006软件安装包+安装教程关键词：CAD 2006|CAD2006|cad2006|cad 2006|CAD 2007软件安装包+安…...
2024/4/24 4:26:01
RetinaNet网络解析
RetinaNet是何凯明大神提出的一种网络，该网络结构采用FPN网络的结构(请参考博客FPN网络原理解析)，其主要创新点在于提出了一个新的损失函数Focal Loss(请参考博客Focal Loss损失函数详解)，主要用于解决one-stage目标检测中正负样本极不平衡的问题。关于FPN网络、损失函数Foc…...
2024/4/16 6:13:22
pycharm激活
https://www.jianshu.com/p/06762e7e4d46...
2024/5/5 5:09:27
随记
代码优化：JS第218面...
2024/4/18 5:30:50
【位运算】B010_LC_字母组合迭代器（二进制枚举）
一、Problem Design an Iterator class, which has: A constructor that takes a string characters of sorted distinct lowercase English letters and a number combinationLength as arguments. A function next() that returns the next combination of length combinatio…...
2024/4/17 13:51:43
JavaScript初学记录(一) JavaScript简介
@ JavaScript简介一、什么是JavaScript? 概念:简单的说JavaScript是一门客户端脚本语言 ,运行在客户端浏览器中，几乎每一个浏览器都有JavaScript的解析引擎(脚本语言:不需要被编译,可以直接由浏览器执行) 功能:我们知道HTML是用来展示页面的,而CSS是用来控制页面的样式和布…...
2024/4/15 5:34:31
图python(数据结构与算法)---实现
图的存储结构1邻接矩阵表示法存储方式是用两个数组来表示图，一个一维数组表示图中顶点的信息，一个二维数组表示存储图中的边的信息。即边采用顺序存储结构，用二维数组存储，称为图的邻接矩阵1.1 无向图邻接矩阵表达无向图，邻接矩阵一定是对称的，而且对角线一定为01.2 有向…...
2024/4/16 6:13:17
Set集合---HashSet和TreeSet
Set集合：存放数据无序不可重复 HashSet:底层是哈希表。无序不可重复 TreeSet：底层是二叉树，不可重复 Set集合没有获取方法 / HashSet： //HashSet集合没有获取方法（get);;也没有修改方法删除方法：由于HashSet底层是哈希表，没有下标，因此不能通过下标删除 / package com…...
2024/4/24 10:40:11
EIA-CEA-861-D协议分享（免费）
https://pan.baidu.com/s/1oIhTUm4dc3ZtKCohxvH3bA k3j8...
2024/4/24 10:40:10

用了都说好的jQuery（3）----事件

目标：

1.1. jQuery 事件注册

1.2. jQuery 事件处理

1.2.1 事件处理 on() 绑定事件

1.2.2. 事件处理 off() 解绑事件

1.2.3. 事件处理 trigger() 自动触发事件

1.3. jQuery 事件对象

1.4. jQuery 拷贝对象

1.5. jQuery 多库共存

1.6. jQuery 插件

1.6.1. 瀑布流插件（重点阐述）

1.6.2. 图片懒加载插件

1.6.3. 全屏滚动插件

1.6.4. bootstrap组件

1.6.5. bootstrap插件（JS）

最后希望我们都能成为那个写插件的人，Come on

相关文章

最新文章