jQuery实现contains方法不区分大小写的方法

要实现jQuery的contains方法不区分大小写，可以通过jQuery.expr[":"].icontains来实现。下面是步骤：

1.编写jQuery.expr[":"].icontains的自定义方法

首先，我们需要编写一个jQuery的表达式，用来对DOM结点进行匹配，这里我们可以定义一个新的方法icontains，该方法可以实现忽略大小写的匹配。可以在页面代码中，或者在jQuery的插件中定义。

jQuery.expr[":"].icontains = $.expr.createPseudo(function (text) {
  return function (elem) {
    return $(elem).text().toUpperCase().indexOf(text.toUpperCase()) >= 0;
  };
});

2.测试代码

在上一步中，我们成功地编写了jQuery的icontains方法。下面我们来测试一下它的效果。以下是两个示例：

示例1：测试HTML结构

<div>
  <p>I'm a paragraph of text.</p>
  <p>Foo</p>
  <p>Baz</p>
  <p>bar</p>
</div>

从上面的HTML代码中，我们可以看到，有四个<p>结点，分别为"I'm a paragraph of text."、"Foo"、"Baz"、"bar"。我们要进行不区分大小写的测试，比如要查找含有"B"或"b"的结点。

$('div:p').css('color', 'red');   // 首先，所有匹配的结点字体颜色为红色
$('div:p:icontains("B")').css('color', 'blue'); // 然后，忽略大小写地查找含有"B"的结点，字体颜色为蓝色

这样，我们就可以看到含有"B"或者"b"的结点都被改为了蓝色。

示例2：测试具体文本

下面是另外一个示例，我们对具体文本进行测试：

<form>
  <input type="text" name="first_name" value="John">
  <input type="text" name="last_name" value="Doe">
  <input type="text" name="email" value="[e-mail]">
</form>

假设我们想要查找表单中名称为"last_name"的输入框，我们可以使用如下代码：

$('input:text:icontains("Last")').css('border', '2px solid red');

执行后，我们会发现名为"last_name"的输入框会被用红色边框框起来，以此来区分出来。

到这里，我们就完成了jQuery实现contains方法不区分大小写的攻略，包括如何编写实现方法以及实际应用。