扩展|2-10

简介: 扩展|2-10

当我们使用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>


相关文章
|
4月前
|
安全 编译器 程序员
C++对C的扩展(下)
C++对C的扩展
45 0
|
4月前
|
设计模式 uml C++
C++中的装饰器模式:灵活地扩展功能
C++中的装饰器模式:灵活地扩展功能
71 0
|
4月前
|
SQL 消息中间件 数据采集
功能特性
本文介绍日志服务主要的功能。
31 1
|
4月前
|
安全 程序员 编译器
C++对C的扩展(上)
C++对C的扩展
51 0
|
安全 编译器 C语言
c++学习之c++对c的扩展1
c++学习之c++对c的扩展1
98 0
|
编译器 C语言 C++
c++学习之c++对c的扩展2
c++学习之c++对c的扩展2
68 0
|
C语言 C++ 容器
|
存储 C#
扩展按钮图标
扩展按钮图标
381 1
扩展按钮图标
|
SQL 数据挖掘 关系型数据库
横向扩展 | 学习笔记
快速学习横向扩展
101 0
横向扩展 | 学习笔记