jQuery选择器全集详解

jQuery选择器全集详解

jQuery选择器是一种强大的工具，通过它们我们可以快速简便地在文档中找到DOM元素。本文将介绍jQuery选择器的基本用法及常见的选择器类型，并通过实例加深理解。

基本用法

1.在HTML文档中引入jQuery库。

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

2.基本选择器

最常用的选择器就是基本选择器，它可以通过元素名、ID、class等方式选择元素。

• 选择元素名为p的元素

$("p")

• 选择ID为#header的元素

$("#header")

• 选择class为box的元素

$(".box")

3.层级选择器

层级选择器可以根据元素之间的层级关系进行选择。

• 选择ul元素下的所有li元素

$("ul li")

• 选择div元素下的所有直接子元素

$("div > *")

4.过滤选择器

过滤选择器可以通过一定的条件筛选DOM元素，从而选择需要的元素。

• 选择第一个p元素

$("p:first")

• 选择最后一个p元素

$("p:last")

• 选择除第一个p元素以外的所有p元素

$("p:not(:first)")

常见的选择器类型

1.基本选择器

• 元素选择器

$("element")

• ID选择器

$("#id")

• 类选择器

$(".class")

2.层级选择器

• 后代选择器

$("ancestor descendant")

• 子元素选择器

$("parent > child")

• 相邻兄弟选择器

$("prev + next")

• 后续兄弟选择器

$("prev ~ siblings")

3.基本过滤选择器

• 带有特定属性的元素

$("[attribute]")

• 带有特定属性值的元素

$("[attribute=value]")

• 带有特定属性值开头的元素

$("[attribute^=value]")

• 带有特定属性值结尾的元素

$("[attribute$=value]")

• 带有特定属性值包含的元素

$("[attribute*=value]")

• 所有可见元素

$(":visible")

• 所有隐藏元素

$(":hidden")

4.内容过滤选择器

• 选取含有特定文本的元素

$("element:contains(text)")

• 选取含有特定文本的元素，且不区分大小写

$("element:icontains(text)")

• 选取空元素

$("element:empty")

• 选取包含子元素的元素

$("element:parent")

5.可见性过滤选择器

• 选取可见的元素

$("element:visible")

• 选取隐藏的元素

$("element:hidden")

实例说明

示例1：选取所有以http或https开头的链接元素，添加一个默认打开新窗口的类样式。

$("[href^='http'], [href^='https']").addClass("new-window");

示例2：选取除第一个和最后一个li以外的所有li元素，添加一个highlight类样式。

$("li:not(:first):not(:last)").addClass("highlight");

以上是jQuery选择器全集的详细攻略，希望能对大家在前端开发的学习与工作中有所帮助！