在本教程中，我们将学习jQuery中的方法链。

在jQuery中，可以链接返回jQuery对象的任何方法。

在本教程中，我们将研究如何使用jQuery中的链接方法添加文本，更改文本颜色和背景颜色。
因此，让我们开始吧。

通过链接方法添加文本和样式

假设我们有一个元素" h1"，其ID为" username"。
假设我们要添加一些文本并更改元素的文本颜色和背景颜色。

为了完成此任务，我们必须做以下事情。

• 选择元素
• 添加文字
• 设定文字颜色
• 设定背景颜色

我们将首先逐步解决此问题，然后将通过链接方法解决相同的问题。

逐步的方式

步骤1：选择元素

要选择元素，我们必须使用以下代码。

var h1 = $("#username");

步骤2：新增文字

假设我们要将用户名添加到元素中。
为了实现这一点，我们可以使用text()方法并传递我们要添加的文本值。

h1.text("happy");

步骤3：设定文字颜色

要设置文本颜色，我们必须使用css()方法。
假设我们要将文字颜色更改为"#111"，因此，我们将编写以下代码。

h1.css("color", "#111");

步骤4：设定背景颜色

要设置背景颜色，我们必须再次使用css()方法。
假设我们要将背景色设置为#eee，因此，我们将编写以下代码。

h1.css("background-color", "#eee");

因此，我们编写了以下4个步骤来设置文本" happy"，并将文本颜色更改为"#111"，将背景颜色更改为" #eee"。

var h1 = $("#username");
h1.text("happy");
h1.css("color", "#111");
h1.css("background-color", "#eee");

链接方式

步骤1：选择元素

为此，我们编写以下代码。

$("#username");

步骤2：设定文字

现在，我们将使用text()方法将文本" happy"添加到所选元素。

$("#username").text("happy");

步骤3：设定文字颜色

为此，我们将使用css()方法和color属性，并将值设置为#111。

$("#username").text("happy").css("color", "#111");

步骤4：设定背景颜色

要设置背景色，我们将再次使用css()方法和background-color属性，并将值设置为#eee。

$("#username").text("happy").css("color", "#111").css("background-color", "#eee");

可是等等...

通过将步骤3和步骤4结合起来，我们可以获得相同的结果。

因此，最终代码将如下所示。

$("#username").text("happy").css({"color": "#111", "background-color": "#eee"});

我们还可以分离方法以使其更具可读性。

$("#username")
  .text("happy")
  .css({
    "color": "#111",
    "background-color": "#eee"
  });

这是jQuery中的方法链。