《jQuery程序设计基础教程 工业和信息化普通高等教育十二五 规划教材 教学课件 ppt 作者 姚敦红 杨凌 张志美 李晓黎 等编著 第5章》由会员分享，可在线阅读，更多相关《jQuery程序设计基础教程 工业和信息化普通高等教育十二五 规划教材 教学课件 ppt 作者 姚敦红 杨凌 张志美 李晓黎 等编著 第5章（144页珍藏版）》请在金锄头文库上搜索。
1、,jQuery程序设计基础教程,授课教师： 职务：,第5章 jQuery插件,课程描述 jQuery是一个轻量级JavaScript库，虽然它非常便捷、且功能强大，但是还是不可能满足所有用户的所有需求。而作为一个开源项目，所有用户都可以看到jQuery的源代码，很多人都希望共享自己日常工作积累的功能。jQuery的插件机制使这种想法成为现实。可以把自己的代码制作成jQuery插件，供其他人引用。插件机制大大增强了jQuery的可扩展性，扩充了 jQuery的功能。本章介绍jQuery插件机制的工作原理以及开发和引用jQuery插件的方法，然后介绍一些很实用的jQuery插件。,本章知识点,5.
2、1 概述 5.2 滚动插件 5.3 图表插件 5.4 布局插件 5.5 文字处理插件 5.6 UI插件,5.1 概述,5.1.1 jQuery的插件机制 5.1.2 使用jQuery插件,5.1.1 jQuery的插件机制,jQuery插件是基于jQuery开发的js脚本库，是对jQuery的有效扩展。正因为有很多人把自己的开发成果以插件的形式共享，所以jQuery就好像一个取之不竭的宝藏。只要你用心寻找，总会找到需要的插件。也许有时候你正准备自己编码实现一个功能，却意外地发现有人已经把它做成插件共享，你只需下载并引用插件就可以了。 建议将jQuery插件的文件名命名为jquery.插件名.j
3、s，以免和其他js库插件混淆。,jQuery插件可以分为下面3种类型,（1）封装jQuery对象方法：把一些常用功能定义为函数，绑定到jQuery对象上，从而扩展了jQuery对象。 （2）全局函数：把自定义函数附加到jQuery命名空间下，从而作为一个公共的全局函数使用。 （3）自定义选择器：编写一个自定义函数，返回满足指定条件的HTML元素对应的jQuery对象。,定义jQuery插件的方法如下,(function($) / 这里放插件代码 )(jQuery);,1开发封装jQuery对象方法的插件,(function( $ ) $.fn.插件名 = function() / 实现插件的代
4、码 ; )( jQuery );,【例5-1】 定义一个jQuery插件showhtml,(function( $ ) $.fn.showhtml = function() alert(this.html(); ; )( jQuery );,如果需要在插件中定义多个方法，可以使用$.extend()方法定义插件的方法,$.fn.extend( 方法名1:function() / 实现方法1的代码 , 方法名2:function() / 实现方法2的代码 );,【例5-2】,定义一个jQuery插件，封装了2个jQuery对象方法，代码如下： $.fn.extend( showhtml : fu
5、nction() alert(this.html(); , showtext : function() alert(this.text(); ); 将此插件保存为jquery. myPlugin.js。,2开发定义全局函数的插件,jQuery全局函数是附加在jQuery命名空间下的自定义函数。全局函数没有被绑定到jQuery对象上因此不能通过任何jQuery对象来调用它。可以使用jQuery.extend()方法定义全局函数，代码如下： (jQuery.extend( 全局函数1 : function(参数列表) 函数体 , 全局函数2: function(参数列表) 函数体 );,【例5-3
6、】,定义一个jQuery插件，其中包含2个全局函数add()和multi()，分别用于计算2个数相加和相乘的结果，代码如下： jQuery.extend( add: function(a,b) return a+b; , multi: function(a,b) return a*b; ); 将此插件保存为jquery. myFunc.js。,3开发自定义选择器的插件,可以使用jQuery. expr定义自定义选择器，基本方法如下： $.expr:.withjQuery = function(obj) / 自定义选择器的代码 return 匹配HTML元素的条件，; ;,【例5-4】,定义一个
7、jQuery插件，其中包含一个自定义选择器withjQuery，用于匹配内容包含“jQuery”的HTML元素，代码如下： $.expr:.withjQuery = function(obj) var $this = $(obj); return ($this.html().indexOf(jQuery) -1); ; 将此插件保存为jquery.customselector.js。,5.1.2 使用jQuery插件,在jQuery程序中使用jQuery插件的方法很简单，首先需要引用jQuery脚本和插件脚本，代码如下： ,1使用封装jQuery对象方法的插件,与调用其他jQuery对象方法一
8、样，可以使用下面的方法调用插件中封装的jQuery对象方法： jQuery对象.封装的jQuery对象方法,【例5-5】, $(document).ready(function() $(“#p1“).click(function() $(“#p1“).showhtml(); ); ); 单击我 ,【例5-6】,引用【例5-2】中创建的jquery.myPlugin.js插件，调用其中的Showhtml()方法，代码如下： $(document).ready(function() $(“#p1“).click(function() $(“#p1“).showtext(); ); ); 单击我 ,
9、2使用定义全局函数的插件,调用jQuery全局函数的方法如下： jQuery.全局函数名();,【例5-7】,引用【例5-3】中创建的jquery.myFunc.js插件，调用其中的全局函数add()和multi()，代码如下： $(document).ready(function() $(“#p1“).click(function() $(“#p1“).html(“1+2=“+jQuery.add(1,2); ); ); 单击我 ,3使用定义自定义选择器的插件,调用jQuery全局函数的方法如下： $(HTML标签:withjQuery),【例5-8】,引用【例5-4】中创建的jquery.
10、customselector.js插件，使用其中的自定义选择器withjQuery，代码如下： $(document).ready(function() $(p:withjQuery).css(background-color, yellow); ); jQuery属于Java家族，它是一种快捷、小巧、功能丰富的JavaScript库。jQuery提供很多支持各种浏览器平台的API，使用这些API可以使Web前端开发变得更加轻松。 HTML5是最新的HTML标准。之前的版本HTML4.01于1999年发布。10多年过去了，互联网已经发生了翻天覆地地变化。 ,浏览【例5-8】的结果,5.2 滚动
11、插件,5.2.1 捕获滚动事件的插件Waypoints 5.2.2 滚动特效插件scrollTo,5.2.1 捕获滚动事件的插件Waypoints,Waypoints插件可以捕获滚动事件，通常用于在HTML元素被滚动时实现一些特效。可以访问下面的网址下载和了解Waypoints插件。 http:/ / 处理函数代码 ),【例5-9】, $(document).ready(function() $(#article).waypoint(function(direction) if(direction=down) alert(“byebye“); if(direction=up) alert(“欢
12、迎回来！“); ); ); ,接上, jQuery属于Java家族，它是一种快捷、小巧、功能丰富的JavaScript库。jQuery提供很多支持各种浏览器平台的API，使用这些API可以使Web前端开发变得更加轻松。 HTML5是最新的HTML标准。之前的版本HTML4.01于1999年发布。10多年过去了，互联网已经发生了翻天覆地地变化。 ,5.2.2 滚动特效插件scrollTo,scrollTo插件可以滚动效果定位到指定的HTML元素。对应的脚本文件为jquery.scrollTo.js，可以在互联网上搜索最新的scrollTo插件，也可以直接使用本书源代码中055.2.2目录下的jq
13、uery.scrollTo.js。引用scrollTo插件的代码如下： 可以使用ScrollTo()方法滚动到指定的HTML元素，其基本语法如下： jQuery对象.ScrollTo(滚动速度);,【例5-10】, div padding:20px; border:3px solid #000; background-color:blue; function goto(id) / alert(id); $(“#“ + id).ScrollTo(800); ,接上, HTML 5 最新版本的HTML jQuery 轻量级的JavaScript脚本库 ,【例5-10】的界面,5.3 图表插件,5.
14、3.1 Excel样式的表格插件Handsontable 5.3.2 HTML表格插件DataTables 5.3.3 图表效果插件Sparklines,5.3.1 Excel样式的表格插件Handsontable,Handsontable插件可以在网页中显示一个Excel样式的表格，用户可以对表格中的数据进行编辑。Handsontable插件可以实现的主要功能如下： 在网页中编辑表格的内容，支持剪切、复制、粘贴等操作； 可以显示类似Excel行和列的标题头； 可以多项选择表格的行； 可以通过右键菜单插入、删除行和列； 可以通过下拉菜单选择表格单元格的内容； 可以兼容IE（7.0以上）、Fir
15、eFox、Chrome, Safari和Opera等主流浏览器。,脚本文件,Handsontable插件对应的脚本文件为jquery.scrollTo.js，可以在互联网上搜索最新的Handsontable插件，也可以直接使用本书源代码中055.3.1目录下的jquery.handsontable.js。,提示,本书源代码中附带的jquery.handsontable.js是基于jQuery 1.7.2的，不兼容jQuery1.9.0。因此，本书源代码中在055.3.1目录下附带了1.7.2的版本的jquery.js。,引用andsontable插件,使用andsontable插件还需要引用样式文件jquery.handsontable.css。引用andsontable插件的代码如下： 如果需要支持右键菜单还需要引用jquery.contextMenu.js和jquery.contextMenu.css。本书源代码中在055.3.1jQuery-contextMenu目录下附带了这两个文件。引用这两个文件的代码如下： ,定义Handsontable表格,$(#div元素id).hands
