扩展|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>


相关文章
|
7月前
|
安全 编译器 程序员
C++对C的扩展(下)
C++对C的扩展
53 0
|
安全 编译器 C语言
c++学习之c++对c的扩展1
c++学习之c++对c的扩展1
113 0
|
7月前
|
安全 程序员 编译器
C++对C的扩展(上)
C++对C的扩展
62 0
|
编译器 C语言 C++
c++学习之c++对c的扩展2
c++学习之c++对c的扩展2
80 0
|
C语言 C++ 容器
|
存储 C#
扩展按钮图标
扩展按钮图标
434 1
扩展按钮图标
对象的自治和行为的扩展与适配
对象的自治和行为的扩展与适配
对象的自治和行为的扩展与适配
|
监控 Java Spring
扩展JavaMelod支持自定义监控点
扩展JavaMelod支持自定义监控点
207 0
扩展JavaMelod支持自定义监控点
|
Kubernetes 安全 Cloud Native
基于 Wasm 和 ORAS 简化扩展服务网格功能
本文将介绍如何使用 ORAS 客户端将具有允许的媒体类型的 Wasm 模块推送到 ACR 注册库(一个 OCI 兼容的注册库)中,然后通过 ASM 控制器将 Wasm Filter 部署到指定工作负载对应的 Pod 中。Wasm Filter 部署中的所有步骤都使用声明方式,也就是说可以创建一个自定义资源 CRD 来描述 Wasm Filter 的部署。一旦该 CRD 创建之后,ASM 控制器可以将 Wasm 模块加载到数据平面层中的相应 Envoy 代理中,同时在控制平面层中也会创建相应的 Istio EnvoyFilter 自定义资源。
基于 Wasm 和 ORAS 简化扩展服务网格功能