jquery的选择器怎么写

jQuery选择器是jQuery库中非常强大的功能之一，它允许我们通过CSS选择器的方式轻松地选取HTML元素并对其进行操作，在本文中，我们将详细介绍jQuery选择器的使用方法和技巧。

1、基本选择器

jQuery选择器的基本语法与CSS选择器相同，主要包括元素选择器、类选择器、ID选择器、属性选择器等，以下是一些基本的选择器示例：

// 元素选择器
$("p"); // 选取所有<p>标签
$("#para1"); // 选取id为para1的元素
// 类选择器
$(".myClass"); // 选取class为myClass的所有元素
// ID选择器
$("#myId"); // 选取id为myId的元素
// 属性选择器
$("[href]"); // 选取所有带有href属性的元素
$("[href='http://example.com']"); // 选取href属性值为'http://example.com'的所有元素

2、层次选择器

层次选择器允许我们根据元素的嵌套关系来选取元素，主要包括后代选择器（空格）、子元素选择器（>）、兄弟元素选择器（+）等，以下是一些层次选择器示例：

// 后代选择器（空格）
$("div p"); // 选取所有<div>标签内的<p>标签
$("#para1 .myClass"); // 选取id为para1的元素内的class为myClass的所有元素
// 子元素选择器（>）
$("ul > li"); // 选取所有直接子元素为<li>的<ul>标签
$("#parent > child"); // 选取id为parent的元素内的直接子元素为child的元素
// 兄弟元素选择器（+）
$("h1 + p"); // 选取紧接在<h1>标签后的<p>标签
$("#prev + next"); // 选取id为prev的元素后的紧接元素next

3、过滤选择器

过滤选择器可以根据特定条件来筛选元素，主要包括基本过滤选择器（：not、：first、：last、：even、：odd、：eq、：gt、：lt等）、内容过滤选择器（：contains、：empty、：has等）、可见性过滤选择器（：hidden等）等，以下是一些过滤选择器示例：

// 基本过滤选择器
$("div:not(.myClass)"); // 选取所有不包含class为myClass的<div>标签
$("p:first"); // 选取第一个<p>标签
$("p:last"); // 选取最后一个<p>标签
$("tr:even"); // 选取所有偶数行的<tr>标签
$("tr:odd"); // 选取所有奇数行的<tr>标签
$("tr:eq(2)"); // 选取第3个<tr>标签（索引从0开始）
$("tr:gt(2)"); // 选取索引大于2的<tr>标签
$("tr:lt(2)"); // 选取索引小于2的<tr>标签
// 内容过滤选择器
$("a:contains('example')"); // 选取所有包含文本'example'的<a>标签
$("div:empty"); // 选取所有空的<div>标签
$("div:has(p)"); // 选取包含<p>标签的<div>标签
// 可见性过滤选择器
$("div:hidden"); // 选取所有不可见的<div>标签（包括display为none或visibility为hidden的元素）

4、表单选择器

jQuery还提供了一些专门用于表单元素的选择器，如复选框选择器（：checkbox）、单选按钮选择器（：radio）、文本框选择器（：text）、密码框选择器（：password）等，以下是一些表单选择器示例：

// 复选框选择器
$("input[type='checkbox']"); // 选取所有复选框元素
$("#myCheckbox"); // 选取id为myCheckbox的复选框元素
$("input[type='checkbox']:checked"); // 选取所有选中的复选框元素
$("#myCheckbox:checked"); // 选取id为myCheckbox的选中复选框元素
// 单选按钮选择器
$("input[type='radio']"); // 选取所有单选按钮元素
$("#myRadio"); // 选取id为myRadio的单选按钮元素
$("input[type='radio']:checked"); // 选取所有选中的单选按钮元素
$("#myRadio:checked"); // 选取id为myRadio的选中单选按钮元素
// 文本框选择器和密码框选择器类似，只需将type替换为text或password即可。$("input[type='text']")、$("#myText")等。

5、CSS类名和ID组合使用的选择器

我们可以将CSS类名和ID组合使用，以更精确地选取目标元素，我们可以使用.class#id或#id.class的形式来同时指定类名和ID，以下是一些组合使用的选择器示例：

// 同时指定类名和ID的选择器（注意：类名在前，ID在后）
$(".myClass#myId"); // 选取class为myClass且id为myId的元素
$("#myId.myClass"); // 同上，结果相同，但写法略有不同（ID在前，类名在后）

6、自定义属性选择器

除了常用的属性选择器外，我们还可以使用自定义属性来进一步筛选元素，我们可以使用[attribute^=value]或[attribute*=value]的形式来匹配属性值以特定字符或字符串开头或包含特定字符或字符串的元素，以下是一些自定义属性选择器示例：

// 属性值以特定字符开头的选择器（注意：^表示开头）
$("a[href^='http']"); // 选取href属性值以'http'开头的所有<a>标签
$("#link^=example"); // 选取id以'example'开头的元素（注意：这里的^=表示不等于）