jQuery选择器详解：元素过滤与操作-优快云博客

本文链接：https://blog.youkuaiyun.com/anisweir/article/details/45641327

:first过滤选择器

过滤选择器，该类型的选择器是根据某过滤规则进行元素的匹配，书写时以“：”号开头,通常用于查找集合元素中的某一位置的单个元素。

在jQuery中，如果想得到一组相同标签元素中的第1个元素该怎样做呢？

在下面的示例代码中你可能注意到我们会使用

$(“li:first”)

使用li:first过滤选择器可以很方便地获取ul列表中的第一个li元素.

:first过滤选择器的功能是获取第一个元素，常常与其它选择器一起使用，获取指定的一组元素中的第一个元素。

:eq(index)过滤选择器

如果想从一组标签元素数组中，灵活选择任意的一个标签元素，我们可以使用

:eq(index)

其中参数index表示索引号（即：一个整数），它从0开始，如果index的值为3，表示选择的是第4个元素。例如：

:contains(text)过滤选择器

有时候我们可能希望按照文本内容来查找一个或多个元素，那么使用:contains(text)选择器会更加方便，它的功能是选择包含指定字符串的全部元素，它通常与其他元素结合使用，获取包含“text”字符串内容的全部元素对象。其中参数text表示页面中的文字。

:has(selector)过滤选择器

使用包含的元素名称来过滤，:has(selector)过滤选择器的功能是获取选择器中包含指定元素名称的全部元素，其中selector参数就是包含的元素名称，是被包含元素。

获取指定包含某个元素名的全部<li>元素，并改变它们显示文字的颜色，如下图所示：

:hidden过滤选择器

:hidden过滤选择器的功能是获取全部不可见的元素，这些不可见的元素中包括type属性值为hidden的元素。

例如，调用:hidden选择器获取不可见的<p>元素，并将该元素的内容显示在<div>元素中，如下图所示：

:visible过滤选择器

·与上一节的:hidden过滤选择器相反，:visible过滤选择器获取的是全部可见的元素，也就是说，只要不将元素的display属性值设置为“none”，那么，都可以通过该选择器获取。

例如，使用:visible选择器获取可见的<p>元素，并将该元素的内容显示在<div>元素中，如下图所示：

[attribute=value]属性选择器

属性作为DOM元素的一个重要特征，也可以用于选择器中，通过元素属性获取元素的选择器，[attribute=value]属性选择器的功能是获取与属性名和属性值完全相同的全部元素，其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示属性值。

使用[attribute=value]属性选择器，获取指定属性名和对应值的全部<li>元素，并设置它们显示的文字颜色，如图所示：

[attribute!=value]属性选择器

与介绍的[attribute=value]属性选择器正好相反，[attribute!=value]属性选择器的功能是获取不包含属性名，或者与属性名和属性值不相同的全部元素，其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示属性值。

例如，使用[attribute!=value]属性选择器，获取指定不包含属性名，或与属性名和对应值不同的全部<li>元素，并设置它们显示的文字颜色，如图所示：

[attribute*=value]属性选择器

介绍一个功能更为强大的属性选择器[attribute*=value]，它可以获取属性值中包含指定内容的全部元素，其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示对应的属性值。

例如，使用[attribute*=value]属性选择器，获取属性值中包含某一指定内容的全部<li>元素，并设置它们显示的文字颜色，如下图所示：

:first-child子元素过滤选择器

通过上面的学习，我们知道使用:first过滤选择器可以获取指定父元素中的首个子元素，但该选择器返回的只有一个元素，并不是一个集合，而使用:first-child子元素过滤选择器则可以获取每个父元素中返回的首个子元素，它是一个集合，常用多个集合数据的选择处理。

如下图，如果想把页面中每个ul中的第一个li获取到，并改变其颜色。则可以使用

: first-child

:last-child子元素过滤选择器

与:first-child子元素过滤选择器功能相反，:last-child子元素过滤选择器的功能是获取每个父元素中返回的最后一个子元素，它也是一个集合，常用多个集合数据的选择处理。

例如，使用:last-child子元素过滤选择器，修改“蔬菜”和“水果”中最后一个显示的文字颜色，如下图所示：

编程练习

初始时:<ul>元素中仅显示5个<li>元素,其中包含还包括最后一个<li>元素,<a>元素中的显示"更多"字符.

当点击"更多"链接时,自身内容变为"简化",同时,<ul>元素中显示全部的<li>元素.

当点击"简化"链接时,自身内容变为"更多",同时,<ul>元素中仅显示包含最后一个<li>元素在内的5个元素.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<ul>

</ul>

</body>

$("a").on("click", function (e) {

$(this).text(("更多" === $(this).text()) ?

($("ul li").slideDown(),"简化")

: ($("ul li:gt(3):not(:last)").slideUp(),"更多"));

});

</script>

</html>

// <script>

$("a").click(function(){

if($(this).html()=="更多"){

$(this).html("简化");

$("ul li").show();

}else{

$(this).html("更多");

$("li:eq(2),li:eq(5)").css("display","none");

}

})