第10章 jQuery插件-【千锋教育】Jquery从入门到实战

第10章 jQuery插件 常见插件 自定义插件 常见插件 自定义插件 ☞点击查看本小节知识架构 ☞点击查看本小节知识架构 10.2 10.1 学习目标 了解 掌握 掌握 了解什么是jQuery插件 1 2 掌握常见的第三方jQuery插件的使用方法 3 掌握实现自定义插件的方法 销售额 掌握知识 理解知识 熟悉知识 3.333333 3.333333 3.333333 插件是一种基于jQuery库、按照一定规范而编写出来的程序。插件的好处非常多，例如：不常用的功能可以以插件的形式存在，而不影响到jQuery核心库的性能和体积。 jQuery下的插件可以自定义实现，也可以由第三方提供。下面对这两种方式分别进行讲解。 10.1 常见插件 10.1.1 cookie插件 返回目录 10.1.2 日历插件 10.1.3 轮播图插件 10.1 常见插件 在第1章中，介绍过jQuery插件网络资源，只需要下载相关插件的文件，然后引入到页面即可使用。 cookie 是在 HTTP 协议下，服务器或脚本维护特殊信息的一种方式。cookie 是由 Web 服务器保存在用户浏览器（客户端）上的小文本文件，可以包含用户信息。无论何时用户连接到服务器，Web 站点都可以访问 cookie 信息。 原生JavaScript中并没有对cookie的操作进行封装，所以cookie的增、删、改、查都需要自己实现。jQuery本身并没有提供cookie的操作方法，而是利用jQuery插件的方式来实现，既简单又方便。 10.1.1 cookie插件 10.1 常见插件 cookie插件的下载地址如图所示。 10.1.1 cookie插件 10.1 常见插件 首先下载插件文件，然后引入页面，注意，插件都是基于jQuery的，所以需要同时引入jQuery文件，还要注意文件引入的顺序。 10.1.1 cookie插件 10.1 常见插件 使用方法如下。 （1）新添加一个会话cookie ，实现cookie的设置操作，代码如下所示。 注意：cookie的操作需要在服务器环境下进行，直接打开一个HTML页面是拿不到cookie的。 创建完成后，在浏览器开发者工具的Application下找到cookies，点开即可看见新添加的cookie，如图所示。 10.1.1 cookie插件 10.1 常见插件 （2）创建一个cookie并设置有效时间为7天，并且修改cookie的有效路径为根目录，代码如下所示。 运行上述代码，效果如图所示。 10.1.1 cookie插件 10.1 常见插件 运行以上代码，可以看到给cookie属性设置null值表示删除该属性。如图所示。 （3）读取和删除cookie的操作，代码如下所示。 日历效果在网页开发中很常见，基于原生JavaScript或jQuery来实现都是比较复杂的。可直接使用第三方日历插件。 日历插件的下载地址如图所示。 10.1.2 日历插件 10.1 常见插件 首先下载插件文件，然后引入页面，日历插件需要配合CSS文件，以便对日历进行美化，代码如下所示。 10.1.2 日历插件 10.1 常见插件 使用方法如下。 （1）创建一个最基本的日历，包括宽、高、前进后退按钮、日历表头等，代码如下所示。 （2）给指定日期添加数据，并通过单击事件进行触发，代码如下所示。 10.1.2 日历插件 10.1 常见插件 （3）可以把日历插件跟输入框结合，代码如下所示。 10.1.2 日历插件 10.1 常见插件 轮播图也是网页开发中常见的效果之一，利用第三方轮播图插件可以快速创建出多功能形式的效果。 轮播图插件的下载地址如图所示。 10.1.3 轮播图插件 10.1 常见插件 首先下载插件文件，然后引入页面，注意，轮播图插件需要配合CSS文件，以便轮对播图进行美化，代码如下所示。 10.1.3 轮播图插件 10.1 常见插件 使用方法如下。 （1）创建一个最基本的轮播图，包括动画方式、运动方向等，代码如下所示。 （2）修改轮播图的轮播方向，从水平切换到垂直，并设置2秒的切换时间，每次切换结束都会触发轮播图对象，代码如下所示。 10.1.3 轮播图插件 10.1 常见插件 本节介绍了一些常见的第三方jQuery插件，除了基本操作外，它们还有很多可配置的参数，通过框架API可以看到所有可配置的参数，如图所示。 10.1.3 轮播图插件 10.1 常见插件 10.2 自定义插件 10.2.1 插件方法 返回目录 10.2.2 自定义标签页 10.2.3 自定义弹窗 10.2 自定义插件 10.1节介绍了一些常见的jQuery插件的使用方法，可以发现，插件都是基于jQuery库实现的扩展方