jQuery 查询元素：全面指南
简介
jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互，使 Web 开发更加快捷高效，本文将详细解析如何使用 jQuery 查询（选择）DOM 元素，包括基本选择器、层级选择器、过滤选择器和属性选择器等。
基本选择器
| 选择器类型 | 描述 | 示例 |
$() |
选择所有匹配的元素 | $("p") 选择所有
元素 |
$("#id") | 根据 ID 选择单个元素 | $("#header") 选择 ID 为header 的元素 |
$.className | 根据类名选择元素 | $(".myClass") 选择所有具有myClass 类的元素 |
$element | 根据标签名选择元素 | $("div") 选择所有
|
示例代码
$(document).ready(function(){
$("p").css("color", "red"); // 将所有段落文本颜色变为红色
});
层级选择器
| 选择器类型 | 描述 | 示例 |
> |
子选择器，仅选择直接子元素 | $("#parent > .child") 选择 ID 为parent 的直接子元素中具有child 类的元素 |
空格 |
后代选择器，选择所有后代元素 | $("#ancestor .descendant") 选择 ID 为ancestor 的所有后代元素中具有descendant 类的元素 |
+ |
相邻兄弟选择器，选择紧接在指定元素后的兄弟元素 | $("#prev + .next") 选择紧跟在 ID 为prev 的元素后的第一个具有next 类的元素 |
~ |
一般兄弟选择器，选择所有指定元素之后的兄弟元素 | $("#prev ~ .siblings") 选择 ID 为prev 的元素之后的所有具有siblings 类的元素 |
示例代码
$(document).ready(function(){
$("ul > li").css("backgroundcolor", "yellow"); // 设置无序列表中直接子元素的背景色为黄色
});
过滤选择器
| 选择器类型 | 描述 | 示例 |
:first |
选择第一个匹配的元素 | $("li:first") 选择第一个
元素 |
:last |
选择最后一个匹配的元素 | $("li:last") 选择最后一个
元素 |
:even |
选择索引为偶数的元素（从0开始计数） | $("tr:even") 选择索引为偶数的表格行 |
:odd |
选择索引为奇数的元素（从0开始计数） | $("tr:odd") 选择索引为奇数的表格行 |
:eq(index) |
根据索引选择元素 | $("li:eq(2)") 选择第三个
元素（索引从0开始） |
:gt(index) |
选择索引大于指定值的元素 | $("li:gt(2)") 选择索引大于2的所有
元素 |
:lt(index) |
选择索引小于指定值的元素 | $("li:lt(2)") 选择索引小于2的所有
元素 |
示例代码
$(document).ready(function(){
$("p:first").css("fontweight", "bold"); // 将第一个段落文字加粗
});
属性选择器
| 选择器类型 | 描述 | 示例 |
[attribute] |
选择具有特定属性的元素 | $("[title]") 选择所有具有title 属性的元素 |
[attribute=value] |
选择属性值等于指定值的元素 | $("[type='text']") 选择所有type 属性值为text 的输入元素 |
[attribute!=value] |
选择属性值不等于指定值的元素 | $("[type!='checkbox']") 选择所有type 属性值不为checkbox 的输入元素 |
[attribute^=value] |
选择属性值以指定值开头的元素 | $("[name^='button']") 选择所有name 属性值以button 开头的元素 |
[attribute$=value] |
选择属性值以指定值结尾的元素 | $("[name$='Submit']") 选择所有name 属性值以Submit 结尾的元素 |
[attribute*=value] |
选择属性值包含指定值的元素 | $("[name*='part']") 选择所有name 属性值包含part 的元素 |
示例代码
$(document).ready(function(){
$("a[href$='.pdf']").addClass("pdflink"); // 为所有链接到 PDF 文件的锚点添加类名 "pdflink"
});
组合选择器
jQuery 允许使用多种选择器组合来精确定位目标元素。
$(document).ready(function(){
$("div.container > p.intro").css("fontsize", "18px"); // 修改容器内介绍段落的字体大小
$("input[type='text'][name^='user']").val("Default Text"); // 为用户名输入框设置默认文本
});
相关问题与解答
问题1：如何使用 jQuery 选择具有多个类名的元素？
解答：
使用类选择器并用句点（.）分隔每个类名即可，要选择同时具有class1 和class2 类的元素，可以使用以下选择器：
$(".class1.class2")
或者使用多个类选择器结合：
$(".class1").add(".class2")
这两种方法都会选中同时具有这两个类的元素。
问题2：如何通过属性值部分匹配来选择元素？
解答：
使用属性选择器并结合特定的匹配模式，若要选择所有name 属性包含特定子字符串的元素，可以使用星号（*）作为通配符：
$("[name*='keyword']")
这将匹配任何name 属性中包含'keyword' 字符串的元素，其他匹配模式还包括：
[attribute^=value]：以指定值开头的属性。
`[attribute$=value]]：以指定值结尾的属性。
这些模式提供了灵活的方式来根据属性的部分内容筛选元素。
来源互联网整合，作者：小编，如若转载，请注明出处：https://www.aiboce.com/ask/84934.html
