第7章 jQuery插件和前端常用组件ppt课件.ppt

《第7章 jQuery插件和前端常用组件ppt课件.ppt》由会员分享，可在线阅读，更多相关《第7章 jQuery插件和前端常用组件ppt课件.ppt（92页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、在此输入您的封面副标题第7章 jQuery插件和前端常用组件第7章 jQuery插件和前端常用组件插件概念和基本使用模板引擎插件的使用文件上传插件的使用开发自定义插件数据可视化列表编辑器插件的使用 学习目标掌握掌握掌握掌握掌握掌握插件概念和基本使用12 掌握数视化列 表及文件上传 掌握前端常用的开发 组件及自定义插件3 目录开发自定义插件7.27.27.17.1jQuery插件的概述模板引擎7.37.3点击查看本小节知识架构点击查看本小节知识架构点击查看本小节知识架构 目录文件上传7.57.57.47.4数据可视化图表编辑器7.67.6点击查看本小节知识架构点击查看本小节知识架构点击查看本小节

2、知识架构 知识架构7.1 jQuery插件的概述插件的概述1什么是jQuery插件 知识架构7.2 开发自定义插件开发自定义插件1封装jQuery对象方法的插件2封装静态方法插件3案例自定义焦点图插件 知识架构7.3 模板引擎模板引擎1art-template快速入门2标准语法和常用方法 知识架构7.4 数据可视化图表数据可视化图表1快速体验ECharts2Echarts的常用配置项 知识架构7.5 文件上传文件上传1快速体验WebUploader2显示上传进度3图片上传操作 知识架构7.6 编辑器编辑器1快速体验UEditor2定制工具栏图标3UEditor常用方法 7.1 jQuery插件

3、的概述插件插件：插件是一种遵循某种规范的应用程序接口编写出来的程序，只能运行在指定的环境中。jQuery插件插件：在引入jQuery条件下运行的程序。jQuery插件官方网址插件官方网址：jQuery插件插件GitHub地址地址：插件的概述 7.2 开发自定义插件封装jQuery对象方法的插件封装jQuery对象方法实现的插件语法：语法： $.fn .插件名 = function(参数列表) / 编写插件的代码;$.fn是jQuery原型对象jQuery.prototype的简写 7.2 开发自定义插件封装jQuery对象方法的插件封装jQuery对象对象方法实现的插件方法中方法中this的指

4、向：的指向：可通过this访问调用当前方法的jQuery对象 $.fn.test = function() return this = obj ;var obj = $(div);console.log(obj.test(); / 输出结果：true说明插件内部this与jQuery对象obj是同一个对象 7.2 开发自定义插件封装jQuery对象方法的插件注意注意在编写插件时，应避免使用jQuery对象的简写“$”，防止发生名称的冲突。 7.2 开发自定义插件封装jQuery对象方法的插件封装封装jQuery对象方法实现的插件对象方法实现的插件避免命名冲突：避免命名冲突：将插件的方法放在闭包

5、函数中封装完插件后将其保存为一个单独的js文件，在使用插件时直接引入文件即可。推荐文件名使用“jquery.插件名.js”格式，防止与其他JavaScript库插件混淆。 (function($) $.fn.插件名 = function() / 编写插件的代码 ;)(jQuery); 7.2 开发自定义插件封装jQuery对象方法的插件封装封装jQuery对象方法实现的插件对象方法实现的插件通过一个案例进行演示封装jQuery对象方法的插件：制作tableColor插件，实现表格隔行换色功能。 7.2 开发自定义插件封装jQuery对象方法的插件封装封装jQuery对象方法实现的插件对象方法实

6、现的插件制作tableColor插件页面结构demo7-1.html 引入文件：引入文件： 先引入jQuery文件，再引入插件文件 7.2 开发自定义插件封装jQuery对象方法的插件封装封装jQuery对象方法实现的插件对象方法实现的插件制作tableColor插件页面结构demo7-1.html 文档结构：文档结构： ID编号姓名性别 001Tom男 002Jim男 003Lucy女 004Lily女 7.2 开发自定义插件封装jQuery对象方法的插件封装封装jQuery对象方法实现的插件对象方法实现的插件实现表格颜色设置：实现表格颜色设置： var table = $(table);/

7、 设置偶数行样式table.find(tr:even).css(background: lightBlue, color: red);/ 设置标题行样式table.find(tr:first).css(background: green, color: #fff); 7.2 开发自定义插件封装jQuery对象方法的插件封装封装jQuery对象方法实现的插件对象方法实现的插件jquery.tableColor.js 编写插件：编写插件： (function($) $.fn.tableColor = function(options) for (var i in options) this.fin

8、d(i).css(optionsi); return this; ;)(jQuery);返回当前对象，实现链式调用 7.2 开发自定义插件封装jQuery对象方法的插件封装封装jQuery对象方法实现的插件对象方法实现的插件tableColor插件使用：插件使用： $(table).tableColor( tr:even: background: lightBlue, color: red, tr:first: background: green, color: #fff); 脚脚下下留留心心插件书写注意事项在编写插件时，要养成以分号（;）结尾的习惯，因为插件代码将来可能被压缩、合并，如果省略

9、分号会导致出错。同样的，为防止他人不规范的代码对自定义插件的影响，可以在插件的头部添加一个分号（;）,如下所示。7.2 开发自定义插件 (function($) $.fn.插件名 = function() ;)(jQuery); 7.2 开发自定义插件封装静态方法插件封装封装jQuery对象方法实现的插件对象方法实现的插件语法：语法： $.插件名 = function(插件列表) / 编写插件的代码; 7.2 开发自定义插件封装静态方法插件：封装静态方法插件：通过一个案例进行演示封装静态方法插件：制作checkbox插件，实现表格全选、反选以及全不选操作。封装静态方法插件 7.2 开发自定义插

10、件封装静态方法插件封装静态方法插件：定义函数Checkbox，并将其添加到$对象上。封装静态方法插件 function Checkbox(ele) this.ele = ele;$.checkbox = function(selector) return new Checkbox($(selector); 7.2 开发自定义插件：为构造函数Checkbox添加原型方法。封装静态方法插件 Checkbox.prototype = checkAll: function() / 全选 this.ele.prop(checked, true); , uncheckAll: function() / 全

11、不选 this.ele.prop(checked, false); , checkInvert: function() / 反选 this.ele.each(function() this.checked = !this.checked;); ; 7.2 开发自定义插件demo7-2.html 页面结构：页面结构：封装静态方法插件 操作ID编号姓名. .男 . 7.2 开发自定义插件demo7-2.html ：中使用Checkbox插件方法实现全选、反选、全不选：封装静态方法插件 var ele = $.checkbox(:checked);$(#checkAll).click(functio

12、n() ele.checkAll(););$(#uncheckAll).click(function() ele.uncheckAll(););$(#checkInvert).click(function() ele.checkInvert();); 多多学学一一招招extend()方法的使用为调用extend()方法的对象添加成员“$.extend(obj)”：表示将obj对象的成员添加到$对象中“$.fn.extend(obj)”：表示将obj对象的成员添加到$.fn对象中7.2 开发自定义插件$.fn.extend( 插件方法1: function() , 插件方法2: function

13、() );$.extend( 插件方法1: function() , 插件方法2: function() ); 多多学学一一招招extend()方法的使用合并对象成员：合并对象成员：extend()方法支持合并一个或多个对象成员，该方法的第1个参数表示目标对象，第2N个参数表示被合并的对象7.2 开发自定义插件 var obj1 = a: 1, b: 1, c: 1;var obj2 = b: 2, a: 2;var obj3 = $.extend(obj1, obj2);console.log(obj1); / 输出结果：Object a: 2, b: 2, c: 1console.log(

14、obj2); / 输出结果：Object b: 2, a: 2console.log(obj3 = obj1); / 输出结果：true在合并时，遇到同名的成员将会覆盖，合并后，原对象的成员顺序不会改变。 多多学学一一招招extend()方法的使用合并对象成员：合并对象成员：如果调用插件方法时传入的options对象中省略了可选参数，就会在options对象中自动加上这些参数。7.2 开发自定义插件 (function($) var defaults = 可选参数1: 默认值1, 可选参数2: 默认值2; $.插件名 = function(options) options = $.extend

15、(, defaults, options); ; $.插件名.defaults = defaults; / 允许插件的使用者查看或更改可选参数)(jQuery); 多多学学一一招招extend()方法的使用深拷贝合并：深拷贝合并：$.extend()方法第一个参数在设为true时，表示采用递归方式合并对象。7.2 开发自定义插件 var defaults = sub: js, info: id: 2, name: Tom;var obj = info: name: Jimmy, score: 96;var newObj = $.extend(true, , defaults, obj);/ 输

16、出结果：sub: js, info: id: 2, name: Jimmy, score: 96console.log(newObj); 7.2 开发自定义插件案例展示：案例展示：焦点图自动切换当鼠标悬停、离开时，焦点图暂停、开启自动播放 鼠标悬停在小圆点，修改当前圆点的显示样式，切换到对应的图片案例自定义焦点图插件 7.2 开发自定义插件案例分析：案例分析：焦点图案例的HTML结构。案例自定义焦点图插件 7.2 开发自定义插件案例分析：案例分析：焦点图案例的CSS样式 根据焦点图的大小限定最外层div容器的宽高，通过浮动和定位让所有焦点图都显示在此区域内，接着设计小圆点的默认样式和鼠标滑过时

17、的样式，从而完成整个页面的设计。案例自定义焦点图插件 7.2 开发自定义插件案例分析：案例分析：焦点图案例的焦点图案例的jQuery特效：特效：根据图片的个数生成小圆点自动切换图片 切换图片时，小圆点和图片一一对应案例自定义焦点图插件 7.2 开发自定义插件案例实现：案例实现：编写编写HTML结构：结构：slide.html 页面结构案例自定义焦点图插件 . 7.2 开发自定义插件案例实现：案例实现：编写编写HTML结构：结构：slide.html 引入文件。案例自定义焦点图插件 7.2 开发自定义插件案例实现：案例实现：设计设计CSS样式：样式：slide.css案例自定义焦点图插件 .sl

18、ide position:relative; overflow:hidden; border:1px solid #ccc;.slide ul position:relative; list-style:none; margin:0; padding:0; .slide ul li position:absolute; display:none;.slide-nav position:absolute; right:0px; bottom:0px; height:30px; line-height:34px; width:100%; background:rgba(0,0,0,0.2); te

19、xt-align:center; .slide-nav a background:#fff; border-radius:7px; width:14px; height:14px; display:inline-block; margin:0 5px; cursor:pointer; .slide-nav .slide-curr background:#ff6700;小圆点被选中的样式 7.2 开发自定义插件案例实现：案例实现：封装焦点图插件封装焦点图插件 jquery.slide.js ：创建Slide构造函数案例自定义焦点图插件 function Slide(obj) / Slide构造函

20、数Slide.prototype = change: function(i, speed) , / 切换到第i张图片 next: function() , / 切换到下一张图片 start: function() speed, / 开启图片自动切换 pause: function() / 暂停图片自动切换; 7.2 开发自定义插件案例实现：案例实现：封装焦点图插件封装焦点图插件 jquery.slide.js ：设置默认参数。案例自定义焦点图插件 var defaults = speed: 3000, / 默认切换间隔时间（毫秒） width: 670px, / 默认图片宽度 height:

21、240px, / 默认图片高度 prefix: slide / class前缀; 7.2 开发自定义插件案例实现：案例实现：封装焦点图插件 jquery.slide.js 为jQuery对象增加slide方法案例自定义焦点图插件 $.fn.slide = function(options) options = $.extend(, defaults, options); this.css(width: options.width, height: options.height); var slide = new Slide(this, options.prefix); / 鼠标滑到焦点图区域，

22、暂停自动切换，离开时，恢复自动切换 this.hover(function() slide.pause();, function()slide.start(options.speed);); return slide.change(0, 0).start(options.speed); ;$.fn.slide.defaults = defaults; 7.2 开发自定义插件搭建插件骨架完善插件功能。搭建插件骨架完善插件功能。案例自定义焦点图插件 7.2 开发自定义插件案例实现：案例实现：封装焦点图插件 jquery.slide.js ：完善Slide构造函数案例自定义焦点图插件 functio

23、n Slide(obj, prefix) / 根据图片个数，自动生成相应数量的小圆点切换按钮 this.pics = obj.find(li); var nav = obj.find(. + prefix + -nav); nav.append(new Array(this.pics.length + 1).join(); this.dots = nav.find(a); this.currCls = prefix + -curr; var slide = this; / 当鼠标滑到某个小圆点上时，切换到对应的图片 this.dots.mouseover(function() slide.ch

24、ange($(this).index(););获取焦点图图片绑定鼠标经过事件 7.2 开发自定义插件案例实现：案例实现：封装焦点图插件 jquery.slide.js ：为Slide构造函数完善原型方法案例自定义焦点图插件 Slide.prototype = / 切换到索引值为i的图片，speed为动画速度 change: function(i, speed) this.i = i; / 保存传入的索引值 this.dots.eq(i).addClass(this.currCls).siblings(a) .removeClass(this.currCls); / 小圆点切换 this.pic

25、s.eq(i).stop(true, true).fadeIn(speed).siblings(li).fadeOut(speed); return this; / 图片切换 ; 7.2 开发自定义插件案例实现：案例实现：封装焦点图插件 jquery.slide.js 为Slide构造函数完善原型方法案例自定义焦点图插件 Slide.prototype = / 切换到下一张图片，如果已经是最后一张，则自动回到第一张 next: function() if (+this.i = this.pics.length) this.i = 0; return this.change(this.i, 60

26、0); ; 7.2 开发自定义插件案例实现：案例实现：封装焦点图插件 jquery.slide.js 为Slide构造函数完善原型方法。案例自定义焦点图插件 Slide.prototype = start: function(speed) / 开始自动切换 var slide = this; this.timer = window.setInterval(function() slide.next(); , speed); return this; ; 7.2 开发自定义插件案例实现：案例实现：封装焦点图插件 为Slide构造函数完善原型方法。案例自定义焦点图插件 Slide.prototyp

27、e = / 暂停自动切换 pause: function() window.clearInterval(this.timer); return this; ; 7.2 开发自定义插件使用插件：使用插件：slide.html中使用插件。案例自定义焦点图插件 $(.slide).slide(); 7.3 模板引擎art-template快速入门art-template描述描述：轻量级的JavaScript模板引擎，具有接近JavaScript极限的运行性能、精准的调试功能、简单的语法使用规则、同时支持JavaScript的原生语法等特性。GitHub地址地址：https:/ 7.3 模板引擎art

28、-template快速入门编写模板编写模板demo7-4.html 模板：模板： title each list value index 索引：index，值：value /each art-template标准语法开始和结束的标签 7.3 模板引擎art-template快速入门渲染模板渲染模板demo7-4.json 数据：数据： title: first demo, list: Purple potato, Sweet potato, Potato chips 7.3 模板引擎art-template快速入门渲染模板：渲染模板：demo7-4.html： $.get(demo7-4.js

29、on, function(data) var con = template(tpl, data); $(#content).html(con); );调用art-template模板引擎提供的template()函数 7.3 模板引擎标准语法和常用方法art-template在使用时支持两套语法在使用时支持两套语法：标准语法标准语法：支持基本的JavaScript表达式，语法简单实用，易于读写。原始语法原始语法：支持JavaScript的所有语句，拥有强大的逻辑表达能力。 7.3 模板引擎标准语法和常用方法不转义输出：不转义输出：数据原样输出在输出的数据前添加“”字符 默认输出：title 不

30、转义输出：title var con = template(test, title: 输出); $(#show).html(con); 7.3 模板引擎标准语法和常用方法print输出字符串输出字符串在模板中输出字符串 print flag? opt.num1 + opt.num2 : 此时flag为false var data = flag: false, opt: num1: 3, num2: 8; var con = template(test, data); $(#show).html(con);flag为真时，在id等于show的元素内输出num1与num2的和11，否则输出“此时f

31、lag为false”的提示信息 7.3 模板引擎标准语法和常用方法条件判断条件判断实现条件判断 each num v if v%2 = 0 偶数为：v /if /each var con = template(test, num: 2, 9, 8, 7, 1); $(#show).html(con); 7.3 模板引擎标准语法和常用方法嵌入子模板嵌入子模板模板中的内容过于繁杂时，可以将其分块实现，通过嵌入子模板的方式引入。 title include tpl each list v i 第 i + 1个 ：v /each 编写模板1、模板2 7.3 模板引擎标准语法和常用方法嵌入子模板嵌入子模

32、板模板中的内容过于繁杂时，可以将其分块实现，通过嵌入子模板的方式引入。 var data = title: 嵌入子模板, list: movie, variety, animation ; var con = template(test, data); $(#show).html(con); 7.4 数据可视化图表在实际开发中，根据实际需求，除了直接将后端返回的数据展示给用户外，还可以将其制作成可视化的图表（如折线图、饼状图等）展示，让数据信息变得更加直观。 7.4 数据可视化图表快速体验EChartsEcharts：一个纯JavaScript开源可视化库，具有丰富的可视化类型、绚丽的特效、支

33、持交互式数据、跨平台应用、可高度个性化定制等多种特性。下载地址下载地址： 7.4 数据可视化图表快速体验ECharts绘制图表绘制图表：demo7-5.html 引入文件、准备容器 / 引入ECharts的JavaScript文件/ 为ECharts准备一个DOM容器 / 编写图表代码 7.4 数据可视化图表快速体验ECharts绘制图表绘制图表：demo7-5.html 编写图表代码 var myChart = echarts.init(document.getElementById(box);myChart.setOption( title: text: 整点温度实况, color: #6

34、75bba, legend: data: 温度,/ 图例数组的名称);初始化echarts对象使用echarts对象调用setOption()方法设置图表的各项特性。 7.4 数据可视化图表快速体验ECharts绘制图表绘制图表：setOption()方法的参数项参数项参数项描述描述title标题组件，包含主标题和副标题color调色盘颜色列表legend图例组件，用于展现不同series系列的标记、颜色和名字tooltip提示框组件xAxis设置直角坐标系grid中的X轴相关配置yAxis设置直角坐标系grid中的Y轴相关配置series设置图表的系列列表，每个系列通过type决定自己的图表

35、类型 7.4 数据可视化图表快速体验ECharts加载异步数据：加载异步数据：demo7-5.json h: 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 2, 4, c: 3, 8, 12, 12, 16, 18, 16, 14, 10, 5, 4, 3 $.get(demo7-5.json, function(data) myChart.setOption( xAxis: data: data.h, series: name: 温度, data: data.c ););7.4 数据可视化图表快速体验ECharts加载异步数据：加载异步数据：发送Ajax请求的代

36、码，将获取数据填入到echarts对应的参数项中。 7.4 数据可视化图表EChars的常用配置项图表类型：图表类型：series配置项可同时指定一个或多个图表类型及相关配置，从而形成系列列表，每个系列都是通过type属性决定自己的图表类型。例如：例如：参数项参数项描述描述line默认为折线图，设置areaStyle后可以绘制面积图。通过visualMap组件可通过不同颜色区分每个区间内的数据。可应用在直角坐标系和极坐标系上bar柱状或条形图，通过柱形的高度或条形的宽度表示数据的大小，要求直角坐标系中至少有一个类目轴或时间轴pie饼图，设置roseType可显示成南丁格尔图（通过半径大小区分数

37、据的大小） 7.4 数据可视化图表图表类型图表类型：以具有层级结构的天气数据生成树状图表。 name: 天气, children: name: 雪, children: name: 大雪, name: 中雪, name: 小雪 . EChars的常用配置项 7.4 数据可视化图表数据集数据集：组件实现对数据的单独管理。 dataset: source: 商品, 2017, 2018, 图书, 56.3, 85.9, 服饰, 90, 95.6 第一行识别为纬度数据识别为图表具体的数据EChars的常用配置项 7.4 数据可视化图表数据集：数据集：组件实现对数据的单独管理 dataset: dim

38、ensions: 商品, 2017, 2018, source: 商品: 图书, 2017: 56.3, 2018: 85.9, 商品: 服饰, 2017: 90, 2018: 95.6 当指定dimensions属性时，该属性的数据识别为纬度数据，source属性中的数据都会被识别为具体数据EChars的常用配置项 7.4 数据可视化图表工具栏工具栏 toolbox: show: true, orient: vertical, feature: dataZoom: yAxisIndex: none, dataView: readOnly: false, magicType: type: li

39、ne, bar , restore: ,saveAsImage: , 图标以垂直的方式展示工具的配置项EChars的常用配置项 7.5 文件上传快速体验WebUploaderWebUploader描述描述：采用AMD（Asynchronous Module Definition，异步模块定义）规范组织的文件上传组件地址地址：https:/ WebUploader包含了两个版本，分别为压缩版本（）和源码版本（Source code）。7.5 文件上传快速体验WebUploader压缩版本源码版本 7.5 文件上传快速体验WebUploader参数项参数项描述描述Uploader.swfSWF文件

40、，当使用Flash运行时需要引入webuploader.cssWeb Uploader提供的CSS样式文件webuploader.html5only.js仅适用于HTML5实现的版本webuploader.html5only.min.js仅适用于HTML5实现的迷你版本webuploader.flashonly.js仅适用于FLASH实现的版本webuploader.flashonly.min.js仅适用于FLASH实现的迷你版本webuploader.jsWebUploader的完全版本webuploader.min.jsWebUploader的完全迷你版本webuploader.nolog

41、.js不开启日志功能的完全版本webuploader.nolog.min.js不开启日志功能的完全迷你版本webuploader.withoutimage.js去除图片处理版本，适用于HTML5和FLASHwebuploader.withoutimage.min.js去除图片处理迷你版本，适用于HTML5和FLASH 7.5 文件上传快速体验WebUploader 使用使用WebUploader的的文件引入文件引入方式：方式： 7.5 文件上传快速体验WebUploader var uploader = WebUploader.create( auto: true, / 选完文件后，是否自动上

42、传 server: fileupload.php, / 文件接收服务端 pick: / 指定选择按钮的容器 id: #file_picker, innerHTML: 单击上传文件, multiple: false );上传案例：上传案例： 7.5 文件上传快速体验WebUploader 在服务器端接收上传文件在服务器端接收上传文件：fileupload.php 7.5 文件上传上传文件进度fileQueued事件事件：监控文件是否放入到上传的队列。uploadProgress事件事件：获取文件上传的进度。 / 上传文件被加入到队列后触发 uploader.on(fileQueued, func

43、tion( file ) ); / 上传过程中触发，并且携带上传的进度值 uploader.on(uploadProgress, function( file, percentage ) );上传的文件对象数值类型的上传进度 7.5 文件上传显示上传文件进度上传事件上传事件：参数项参数项描述描述uploadSuccess上传成功uploadError上传失败uploadComplete上传完成（不论文件是否上传成功） 7.5 文件上传图片上传操作上传事件上传事件：thumb可再详细设置缩略图的样式（大小、是否可裁剪等等）。 accept: / 只允许选择图片文件 ,duplicate: tru

44、e, / 允许重复上传同一张图片thumb: / 配置生成缩略图的选项 7.5 文件上传图片上传操作上传事件上传事件：thumb可再详细设置缩略图的样式（大小、是否可裁剪等等）。 uploader.makeThumb(file, function(error, src) if (error) , 100, 100);生成缩略图错误 7.6 编辑器快速体验UEditorUEditor描述描述：UEditor是百度推出的一款编辑器，它的开源代码基于MIT协议，允许用户自由使用与修改。地址地址： 7.6 编辑器快速体验UEditor调用UE.getEditor()方法方法将实例化的编辑器存放到id为

45、content的元素容器内。 var ue = UE.getEditor(content); 7.6 编辑器定制工具栏图标选项选项含义含义选项选项含义含义选项选项含义含义backcolor背景色blockquote引用bold加粗emotion表情fontsize字号fontfamily字体forecolor字体颜色formatmatch格式刷fullscreen全屏help帮助insertorderedlist有序列表insertrow前插入行italic斜体insertunorderedlist无序列表insertcol前插入列inserttable插入表格justifyjustify两端

46、对齐justifyleft居左对齐justifyright居右对齐justifycenter居中对齐link超链接paragraph段落格式redo重做strikethrough删除线source源代码underline下划线undo撤销 7.6 编辑器定制工具栏图标修改配置项文件里面的toolbars。 UEDITOR_CONFIGtoolbars = fullscreen, source, |, undo, redo, |, bold, italic, underline, strikethrough, forecolor, backcolor, fontfamily, fontsize;

47、 7.6 编辑器定制工具栏图标在实例化编辑器时设置toolbars参数。 var ue = UE.getEditor(content, toolbars: fullscreen, source, |, undo, redo, |, bold, italic, underline, strikethrough,forecolor, backcolor, fontfamily, fontsize ); 7.6 编辑器UEditor常用方法在单击按钮时，获取获取编辑器的内容。 ue.ready(function() ue.setContent(请在此处编写内容!); / 设置编辑器的默认值 ue.s

48、etContent(雄关漫道真如铁，而今迈步从头越。, true););$(#btn).click(function() var html = ue.getContent(); alert(html); / 为编辑器追加内容); 7.6 编辑器UEditor常用方法参数项参数项描述描述getContent()获取编辑器的内容setContent()设置编辑器的内容，可修改编辑器当前的html内容getContentTxt()获取纯文本内容getPlainTxt()获取保留段落格式的纯文本内容hasContents()判断编辑器是否有内容selection.getText()获得当前选中的文本获

49、取内容方法获取内容方法： 7.6 编辑器UEditor常用方法参数项参数项描述描述focus()让编辑器获得焦点blur()让编辑器失去焦点isFocus()判断编辑器是否获得焦点setDisabled()设置当前编辑区域不可编辑setEnabled()设置当前编辑区域可以编辑setHide()隐藏编辑器setShow()显示编辑器execCommand()执行命令的通用接口。例如，设置当前选区背景色设置编辑器行为设置编辑器行为： 本章小结本章首先讲解了什么是插件，以及jQuery中如何自定义插件的两种方式。然后以方便前端开发为目的，讲解了一系列的常用组件，包括模板引擎art-template、数据可视化图表ECharts、文件上传组件WebUploader以及编辑器UEditor。学习本章内容后，读者需要掌握至少一种插件的自定义方法，并能够根据项目需求灵活运用常用的开发组件。