» 栏目 » jquery » jQuery选择器

jQuery教程 jQuery安装 jQuery语法 jQuery选择器 jQuery事件 jQuery隐藏与显示 jQuery淡入淡出 jQuery show()方法 jQuery hide()方法 jQuery toggle()方法 jQuery fadeIn()方法 jQuery fadeOut()方法 jQuery fadeToggle()方法 jQuery slideUp()方法 jQuery slideDown()方法 jQuery slideToggle()方法 jQuery animate()方法 jQuery stop()方法 jQuery callback jQuery链式调用 jQuery html()方法 jQuery text()方法 jQuery va l()方法 jQuery append()方法 jQuery prepend()方法 jQuery after()方法 jQuery before()方法 jQuery remove()方法 jQuery empty()方法 jQuery addClass()方法 jQuery removeClass()方法 jQuery css方法 jQuery toggleClass方法

jQuery选择器

栏目： jquery 发布时间：2024-12-13

jQuery选择器是一种强大的工具，它允许你快速且容易地选择页面上的元素，并对它们进行操作。这些选择器基于CSS选择器，但提供了更多的功能和灵活性。本教程将详细介绍jQuery选择器的基本用法和高级技巧。

一、基本选择器

元素选择器：
- 用法：$("element")
- 说明：选择所有指定标签名的元素。例如，$("p")选择所有段落元素。
ID选择器：
- 用法：$("#id")
- 说明：选择具有指定ID的元素。ID在页面中应该是唯一的。例如，$("#header")选择ID为header的元素。
类选择器：
- 用法：$(".class")
- 说明：选择所有具有指定类名的元素。例如，$(".button")选择所有类名为button的元素。
属性选择器：
- 用法：$[attribute=value]
- 说明：选择具有指定属性和值的元素。例如，$("[type='text']")选择所有type属性为text的输入元素。

二、层次选择器

后代选择器：
- 用法：$("ancestor descendant")
- 说明：选择所有作为某元素后代的元素。例如，$("div p")选择所有div元素内的p元素。
子选择器：
- 用法：$("parent > child")
- 说明：选择所有作为某元素直接子元素的元素。例如，$("ul > li")选择所有ul元素的直接li子元素。
相邻兄弟选择器：
- 用法：$("prev + next")
- 说明：选择紧接在另一个元素后的元素。例如，$("h2 + p")选择所有紧接在h2元素后的p元素。
一般兄弟选择器：
- 用法：$("prev ~ siblings")
- 说明：选择某元素之后的所有同辈元素。例如，$("h2 ~ p")选择所有h2元素之后的所有p元素。

三、基本筛选器

首元素选择器：
- 用法：$(":first")
- 说明：选择匹配集合中的第一个元素。
尾元素选择器：
- 用法：$(":last")
- 说明：选择匹配集合中的最后一个元素。
非选择器：
- 用法：$(":not(selector)")
- 说明：选择不匹配指定选择器的元素。
偶数选择器：
- 用法：$(":even")
- 说明：选择匹配集合中索引为偶数的元素（从0开始）。
奇数选择器：
- 用法：$(":odd")
- 说明：选择匹配集合中索引为奇数的元素（从0开始）。
等于选择器：
- 用法：$(":eq(index)")
- 说明：选择匹配集合中索引等于指定值的元素。
大于选择器：
- 用法：$(":gt(index)")
- 说明：选择匹配集合中索引大于指定值的元素。
小于选择器：
- 用法：$(":lt(index)")
- 说明：选择匹配集合中索引小于指定值的元素。

四、内容选择器

包含选择器：
- 用法：$(":contains(text)")
- 说明：选择包含指定文本的元素。
空选择器：
- 用法：$(":empty")
- 说明：选择没有子元素（包括文本）的元素。
父选择器：
- 用法：$(":parent")
- 说明：选择含有子元素（包括文本）的元素。

五、可见性选择器

可见选择器：
- 用法：$(":visible")
- 说明：选择所有可见的元素。
隐藏选择器：
- 用法：$(":hidden")
- 说明：选择所有隐藏的元素。

六、表单选择器

启用选择器：
- 用法：$(":enabled")
- 说明：选择所有启用的表单元素。
禁用选择器：
- 用法：$(":disabled")
- 说明：选择所有禁用的表单元素。
选中选择器：
- 用法：$(":checked")
- 说明：选择所有被选中的表单元素（如checkbox、radio、option）。
选中选项选择器：
- 用法：$(":selected")
- 说明：选择所有被选中的<option>元素。

七、高级选择器

过滤器：
- jQuery允许你使用.filter()方法来进一步筛选已选择的元素。例如，$("p").filter(":contains('jQuery')")选择包含文本"jQuery"的所有段落元素。
查找：
- 使用.find()方法可以在已选择的元素内部查找后代元素。例如，$("#parent").find(".child")在ID为parent的元素内查找所有类名为child的元素。
链式调用：
- jQuery允许你链式调用多个方法，以简化代码。例如，$("p").first().css("color", "red")选择第一个段落并将其文本颜色设置为红色。

通过本教程的学习，你应该已经掌握了jQuery选择器的基本用法和常见技巧。现在，你可以开始使用这些选择器来选择和操作页面上的元素，提高你的开发效率。

本文地址：https://www.tides.cn/p_jquery-selector