jQuery扩展_动力节点Java学院整理


Posted in jQuery onJuly 05, 2017

当我们使用jQuery对象的方法时,由于jQuery对象可以操作一组DOM,而且支持链式操作,所以用起来非常方便。

但是jQuery内置的方法永远不可能满足所有的需求。比如,我们想要高亮显示某些DOM元素,用jQuery可以这么实现:

$('span.hl').css('backgroundColor', '#fffceb').css('color', '#d85030');

$('p a.hl').css('backgroundColor', '#fffceb').css('color', '#d85030');

总是写重复代码可不好,万一以后还要修改字体就更麻烦了,能不能统一起来,写个highlight()方法?

$('span.hl').highlight();

$('p a.hl').highlight();

答案是肯定的。我们可以扩展jQuery来实现自定义方法。将来如果要修改高亮的逻辑,只需修改一处扩展代码。这种方式也称为编写jQuery插件。

编写jQuery插件

给jQuery对象绑定一个新方法是通过扩展$.fn对象实现的。让我们来编写第一个扩展——highlight1()

$.fn.highlight1 = function () {
  // this已绑定为当前jQuery对象:
  this.css('backgroundColor', '#fffceb').css('color', '#d85030');
  return this;
}

注意到函数内部的this在调用时被绑定为jQuery对象,所以函数内部代码可以正常调用所有jQuery对象的方法。

对于如下的HTML结构:

<!-- HTML结构 -->
<div id="test-highlight1">
  <p>什么是<span>jQuery</span></p>
  <p><span>jQuery</span>是目前最流行的<span>JavaScript</span>库。</p>
</div>

来测试一下highlight1()的效果:

'use strict';
$('#test-highlight1 span').highlight1();

什么是jQuery

jQuery是目前最流行的JavaScript库。

细心的童鞋可能发现了,为什么最后要return this;?因为jQuery对象支持链式操作,我们自己写的扩展方法也要能继续链式下去:

$('span.hl').highlight1().slideDown();

不然,用户调用的时候,就不得不把上面的代码拆成两行。

但是这个版本并不完美。有的用户希望高亮的颜色能自己来指定,怎么办?

我们可以给方法加个参数,让用户自己把参数用对象传进去。于是我们有了第二个版本的highlight2()

$.fn.highlight2 = function (options) {
  // 要考虑到各种情况:
  // options为undefined
  // options只有部分key
  var bgcolor = options && options.backgroundColor || '#fffceb';
  var color = options && options.color || '#d85030';
  this.css('backgroundColor', bgcolor).css('color', color);
  return this;
}

对于如下HTML结构:

<!-- HTML结构 -->
<div id="test-highlight2">
  <p>什么是<span>jQuery</span> <span>Plugin</span></p>
  <p>编写<span>jQuery</span> <span>Plugin</span>可以用来扩展<span>jQuery</span>的功能。</p>
</div>

来实测一下带参数的highlight2()

'use strict';
$('#test-highlight2 span').highlight2({
  backgroundColor: '#00a8e6',
  color: '#ffffff'
});

什么是jQuery Plugin

编写jQuery Plugin可以用来扩展jQuery的功能。

对于默认值的处理,我们用了一个简单的&&||短路操作符,总能得到一个有效的值。

另一种方法是使用jQuery提供的辅助方法$.extend(target, obj1, obj2, ...),它把多个object对象的属性合并到第一个target对象中,遇到同名属性,总是使用靠后的对象的值,也就是越往后优先级越高:

// 把默认值和用户传入的options合并到对象{}中并返回:
var opts = $.extend({}, {
  backgroundColor: '#00a8e6',
  color: '#ffffff'
}, options);

紧接着用户对highlight2()提出了意见:每次调用都需要传入自定义的设置,能不能让我自己设定一个缺省值,以后的调用统一使用无参数的highlight2()

也就是说,我们设定的默认值应该能允许用户修改。

那默认值放哪比较合适?放全局变量肯定不合适,最佳地点是$.fn.highlight2这个函数对象本身。

于是最终版的highlight()终于诞生了:

$.fn.highlight = function (options) {
  // 合并默认值和用户设定值:
  var opts = $.extend({}, $.fn.highlight.defaults, options);
  this.css('backgroundColor', opts.backgroundColor).css('color', opts.color);
  return this;
}

// 设定默认值:
$.fn.highlight.defaults = {
  color: '#d85030',
  backgroundColor: '#fff8de'
}

这次用户终于满意了。用户使用时,只需一次性设定默认值:

$.fn.highlight.defaults.color = '#fff';
$.fn.highlight.defaults.backgroundColor = '#000';

然后就可以非常简单地调用highlight()了。

对如下的HTML结构:

<!-- HTML结构 -->
<div id="test-highlight">
  <p>如何编写<span>jQuery</span> <span>Plugin</span></p>
  <p>编写<span>jQuery</span> <span>Plugin</span>,要设置<span>默认值</span>,并允许用户修改<span>默认值</span>,或者运行时传入<span>其他值</span>。</p>
</div>

实测一下修改默认值的效果:

'use strict';
$.fn.highlight.defaults.color = '#659f13';
$.fn.highlight.defaults.backgroundColor = '#f2fae3';

$('#test-highlight p:first-child span').highlight();

$('#test-highlight p:last-child span').highlight({
  color: '#dd1144'
});

如何编写jQuery Plugin

编写jQuery Plugin,要设置默认值,并允许用户修改默认值,或者运行时传入其他值。

最终,我们得出编写一个jQuery插件的原则:

1.给$.fn绑定函数,实现插件的代码逻辑;

2.插件函数最后要return this;以支持链式调用;

3.插件函数要有默认值,绑定在$.fn.<pluginName>.defaults上;

4.用户在调用时可传入设定值以便覆盖默认值。

针对特定元素的扩展

我们知道jQuery对象的有些方法只能作用在特定DOM元素上,比如submit()方法只能针对form。如果我们编写的扩展只能针对某些类型的DOM元素,应该怎么写?

还记得jQuery的选择器支持filter()方法来过滤吗?我们可以借助这个方法来实现针对特定元素的扩展。

举个例子,现在我们要给所有指向外链的超链接加上跳转提示,怎么做?

先写出用户调用的代码:

$('#main a').external();

然后按照上面的方法编写一个external扩展:

$.fn.external = function () {
  // return返回的each()返回结果,支持链式调用:
  return this.filter('a').each(function () {
    // 注意: each()内部的回调函数的this绑定为DOM本身!
    var a = $(this);
    var url = a.attr('href');
    if (url && (url.indexOf('http://')===0 || url.indexOf('https://')===0)) {
      a.attr('href', '#0')
       .removeAttr('target')
       .append(' <i class="uk-icon-external-link"></i>')
       .click(function () {
        if(confirm('你确定要前往' + url + '?')) {
          window.open(url);
        }
      });
    }
  });
}

对如下的HTML结构:

<!-- HTML结构 -->
<div id="test-external">
  <p>如何学习<a href="http://jquery.com" rel="external nofollow" >jQuery</a>?</p>
  <p>首先,你要学习<a href="/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000" rel="external nofollow" >JavaScript</a>,并了解基本的<a href="https://developer.mozilla.org/en-US/docs/Web/HTML" rel="external nofollow" >HTML</a>。</p>
</div>

实测外链效果:

'use strict';
$('#test-external a').external();

小结

扩展jQuery对象的功能十分简单,但是我们要遵循jQuery的原则,编写的扩展方法能支持链式调用、具备默认值和过滤特定元素,使得扩展方法看上去和jQuery本身的方法没有什么区别。

jQuery 相关文章推荐
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
jquery DataTable实现前后台动态分页
Jun 17 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
jQuery实现带进度条的轮播图
Sep 13 jQuery
jQuery选择器_动力节点Java学院整理
Jul 05 #jQuery
jQuery事件_动力节点Java学院整理
Jul 05 #jQuery
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 #jQuery
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 #jQuery
jquery拖动改变div大小
Jul 04 #jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 #jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 #jQuery
You might like
生成静态页面的PHP类
2006/07/15 PHP
PHP 面向对象 PHP5 中的常量
2010/05/05 PHP
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
php把session写入数据库示例
2014/02/26 PHP
thinkphp文件处理类Dir.class.php的用法分析
2014/12/08 PHP
CI框架常用方法小结
2016/05/17 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
使用Apache的rewrite
2021/03/09 Servers
jquery实现输入框动态增减的实例代码
2013/07/14 Javascript
JS动态调用方法名示例介绍
2013/12/18 Javascript
ECharts仪表盘实例代码(附源码下载)
2016/02/18 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
2016/07/25 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
2017/05/04 jQuery
angular 组件通信的几种实现方式
2018/07/13 Javascript
JS事件流与事件处理程序实例分析
2019/08/16 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
2019/08/22 Javascript
vue点击按钮实现简单页面的切换
2020/09/08 Javascript
python实现探测socket和web服务示例
2014/03/28 Python
Python 多进程和数据传递的理解
2017/10/09 Python
python实现两个文件合并功能
2018/04/01 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
numpy库与pandas库axis=0,axis= 1轴的用法详解
2019/05/27 Python
Python面向对象编程基础实例分析
2020/01/17 Python
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
班班通校本培训方案
2014/03/12 职场文书
报关报检委托书
2014/04/08 职场文书
管理工程专业求职信
2014/08/10 职场文书
人大代表选举标语
2014/10/07 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
严以律己学习心得体会
2016/01/13 职场文书
MySQL8.0.24版本Release Note的一些改进点
2021/04/22 MySQL
SpringBoot连接MySQL获取数据写后端接口的操作方法
2021/11/02 MySQL
SQL Server2019安装的详细步骤实战记录(亲测可用)
2022/06/10 SQL Server