jQuery是一个功能强大的JavaScript库，它提供了丰富的选择器来帮助开发者更方便地选择和操作DOM元素。以下是jQuery的一些常用选择器及其示例代码：
1.基本选择器：
// 通过ID选择元素 |
|
$("#myId").css("color", "red"); |
|
// 通过类名选择元素 |
|
$(".myClass").hide(); |
// 通过元素名选择元素 |
|
$("p").click(function() { |
|
alert("Paragraph clicked!"); |
|
}); |
|
// 选择所有元素 |
|
$("*").css("border", "1px solid black"); |
2.层次选择器：
// 选择某个元素的祖先元素 |
|
$("#myElement").parents("div").css("border", "1px solid red"); |
|
// 选择某个元素的子元素 |
$("#myElement").children("p").css("color", "blue"); |
|
// 选择某个元素的兄弟元素 |
|
$("#myElement").siblings("div").hide(); |
|
// 选择某个元素的下一个和上一个兄弟元素 |
|
$("#myElement").next("p").addClass("next"); |
|
$("#myElement").prev("p").addClass("prev"); |
3.过滤选择器：
// 选择第一个元素 |
|
$("p:first").css("font-weight", "bold"); |
|
// 选择最后一个元素 |
|
$("p:last").css("text-decoration", "underline"); |
// 选择索引为2的元素 |
|
$("p:eq(2)").css("background-color", "yellow"); |
|
// 选择偶数索引的元素 |
|
$("p:even").css("color", "green"); |
|
|
$("p:odd").css("color", "purple"); |
|
// 选择包含特定文本的元素 |
|
$("p:contains('Hello')").css("text-decoration", "line-through"); |
// 选择具有特定属性的元素 |
|
$("input[type='text']").css("border", "1px solid orange"); |
4.表单选择器：
// 选择所有输入元素 |
|
$("input").val(""); |
|
|
|
$("input[type='checkbox']").prop("checked", false); |
|
// 选择被选中的选项 |
|
$("select option:selected").text("New Option"); |
// 选择具有特定名称的输入元素 |
|
$("input[name='myName']").val("New Value"); |
|
// 选择具有特定值的输入元素 |
|
$("input[value='myValue']").remove(); |
以上只是jQuery选择器的一部分，实际上还有更多高级的选择器和方法可供选择。你可以根据实际需求查阅jQuery官方文档或其他相关资料，以了解更多关于选择器的使用方法和示例。
