jQuery Selectors(选择器)的使用(二、层次篇)

下面给出详细的jQuery选择器使用攻略——层次篇。

1. 基本层次选择器

jQuery中的基本层次选择器可以直接选择指定元素或元素组，并且选择器之间用空格隔开。以下是基本层次选择器的一些示例：

1.1 后代选择器

后代选择器是用于选择某个元素内所有满足条件的后代元素。例如，可以选择body元素内所有的p元素：

$("body p")

1.2 子元素选择器

子元素选择器是用于选择某个元素下的所有直接的子元素。例如，可以选择id为container的div元素下的所有p元素：

$("#container > p")

1.3 相邻兄弟选择器

相邻兄弟选择器是用于选择某个元素后面的一个相邻兄弟元素。例如，可以选择id为container的div元素后面的一个p元素：

$("#container + p")

1.4 后续兄弟选择器

后续兄弟选择器是用于选择某个元素后面的所有兄弟元素。例如，可以选择id为container的div元素后面所有的p元素：

$("#container ~ p")

2. 进阶层次选择器

除了基本层次选择器之外，jQuery还提供了进阶层次选择器，包括过滤选择器和表单选择器。

2.1 过滤选择器

过滤选择器可以通过某些属性、状态或内容来过滤元素。以下是一些常用的过滤选择器：

• :first：选择第一个匹配的元素
• :last：选择最后一个匹配的元素
• :even：选择所有偶数位置的元素
• :odd：选择所有奇数位置的元素
• :contains(text)：选择包含指定文本的元素

示例代码：

$("ul li:first").css("color", "red");
$("ul li:last").css("color", "green");
$("ul li:even").css("background-color", "#eee");
$("ul li:odd").css("background-color", "#ccc");
$("ul li:contains('JavaScript')").css("font-weight", "bold");

2.2 表单选择器

表单选择器可以选择指定的表单元素，包括input、select和textarea等元素。以下是一些常用的表单选择器：

• :input：选择所有的input、select、textarea和button元素
• :text：选择所有的文本框元素
• :checkbox：选择所有的复选框元素
• :radio：选择所有的单选框元素
• :submit：选择所有的提交按钮元素
• :image：选择所有的图像输入元素

示例代码：

$(":input").css("border", "solid 1px red");
$(":text").css("background-color", "#eee");
$(":checkbox").click(function() {
  $(this).closest("tr").toggleClass("selected");
});
$(":submit").click(function() {
  alert("Form submitted");
});

总结

本篇文章主要介绍了jQuery选择器的层次篇，包括基本层次选择器和进阶层次选择器。在实际使用中可以根据需要选择不同的选择器，完成元素的精细选择和操作。