JQUERY的属性选择符和自定义选择符使用方法（二）

下面我将详细讲解一下“JQUERY的属性选择符和自定义选择符使用方法（二）”的完整攻略。

一、属性选择符

需要在 HTML 元素中选择指定属性的元素时，可以使用属性选择符。属性选择符有如下几种：

1.1 [attribute]：选取拥有制定属性的元素

示例代码：

// 选取所有拥有 title 属性的 a 元素
$("a[title]");

1.2 [attribute=value]：选取指定属性等于给定值的元素

示例代码：

// 选取所有 href 属性等于 http://www.google.com 的 a 元素
$("a[href='http://www.google.com']");

1.3 [attribute!=value]：选取指定属性不等于给定值的元素

示例代码：

// 选取所有 href 属性不等于 http://www.google.com 的 a 元素
$("a[href!='http://www.google.com']");

1.4 [attribute$=value]：选取指定属性以给定值结尾的元素

示例代码：

// 选取所有 href 属性以 .pdf 结尾的 a 元素
$("a[href$='.pdf']");

1.5 [attribute^=value]：选取指定属性以给定值开头的元素

示例代码：

// 选取所有 href 属性以 http 开头的 a 元素
$("a[href^='http']");

1.6 [attribute*=value]：选取指定属性包含给定值的元素

示例代码：

// 选取所有 href 属性包含 google 的 a 元素
$("a[href*='google']");

二、自定义选择符

假设需要自己定义一个选择符用来选取表格中的每一行，可以使用 JQUERY 的 extend() 方法创建自定义选择符。示例代码如下：

$.extend($.expr[":"], {
  tableRow: function(el) {
    return $(el).is("tr");
  }
});

// 选取每一个表格行
$("table:tableRow")

以上代码中，$.extend() 方法将一个新选择符 tableRow 添加到了 jquery.expr 中。

三、总结

以上便是关于 “JQUERY的属性选择符和自定义选择符使用方法（二）” 的完整攻略。通过属性选择符，我们可以通过属性值的方式来选取指定元素。使用自定义选择符可以更加方便地选取我们所需的元素。