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实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
JQuery判断正整数整理小结
Aug 21 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
jQuery获取随机颜色的实例代码
May 21 jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
JQuery事件委托原理与用法实例分析
May 13 jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
jquery实现淡入淡出轮播图效果
Dec 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制作中间带自己定义图片二维码的方法
2014/01/27 PHP
PHP图形计数器程序显示网站用户浏览量
2016/07/20 PHP
yii2中关于加密解密的那些事儿
2018/06/12 PHP
Yii2结合Workerman的websocket示例详解
2018/09/10 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
使用laravel和ajax实现整个页面无刷新的操作方法
2019/10/03 PHP
JavaScript中的类继承
2010/11/25 Javascript
js实现图片点击左右轮播
2015/07/08 Javascript
js中用cssText设置css样式的简单方法
2016/09/19 Javascript
微信小程序 底部导航栏目开发资料
2016/12/05 Javascript
JavaScript中动态向表格添加数据
2017/01/24 Javascript
weex slider实现滑动底部导航功能
2017/08/28 Javascript
详解Vue中的基本语法和常用指令
2019/07/23 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
浅谈javascript如何获取文件后缀名
2020/08/07 Javascript
Python内置函数—vars的具体使用方法
2017/12/04 Python
Python调用C++,通过Pybind11制作Python接口
2018/10/16 Python
对DJango视图(views)和模版(templates)的使用详解
2019/07/17 Python
TensorBoard 计算图的查看方式
2020/02/15 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
Django-celery-beat动态添加周期性任务实现过程解析
2020/11/26 Python
Python 实现集合Set的示例
2020/12/21 Python
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
美国运动鞋和服装网上商店:YCMC
2018/09/15 全球购物
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
综合实践教学反思
2014/01/31 职场文书
电气自动化求职信
2014/06/24 职场文书
大学生学雷锋活动总结
2014/06/26 职场文书
软件测试专业推荐信
2014/09/18 职场文书
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书
教师思想作风整顿个人剖析材料
2014/10/10 职场文书
英语导游词
2015/02/13 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
开学季:喜迎新生,迎新标语少不了
2019/11/07 职场文书
Win11显卡控制面板打开显卡设置方法
2022/04/20 数码科技