当前位置：首页 > jquery

jquery获取元素

2026-04-07 20:23:52jquery

jQuery获取元素的方法

jQuery提供了多种灵活的方式来获取DOM元素，主要通过选择器实现。以下是常见的方法和示例：

基本选择器

通过ID、类名或标签名获取元素：

// 通过ID获取元素
$("#elementId");

// 通过类名获取元素
$(".className");

// 通过标签名获取元素
$("div");

层级选择器

通过DOM层级关系获取元素：

// 获取父元素下的所有子元素
$("parentSelector > childSelector");

// 获取祖先元素下的所有后代元素
$("ancestorSelector descendantSelector");

// 获取紧邻的下一个兄弟元素
$("prevSelector + nextSelector");

// 获取所有后续兄弟元素
$("prevSelector ~ siblingsSelector");

属性选择器

通过元素的属性获取元素：

// 获取具有特定属性的元素
$("[attributeName]");

// 获取属性值等于特定值的元素
$("[attributeName='value']");

// 获取属性值以特定字符串开头的元素
$("[attributeName^='prefix']");

// 获取属性值以特定字符串结尾的元素
$("[attributeName$='suffix']");

// 获取属性值包含特定字符串的元素
$("[attributeName*='substring']");

表单选择器

专门用于表单元素的选择器：

// 获取所有输入框
$(":input");

// 获取所有文本框
$(":text");

// 获取所有密码框
$(":password");

// 获取所有单选按钮
$(":radio");

// 获取所有复选框
$(":checkbox");

// 获取所有提交按钮
$(":submit");

过滤选择器

对已选择的元素进行进一步过滤：

// 获取第一个元素
$("selector:first");

// 获取最后一个元素
$("selector:last");

// 获取偶数索引的元素
$("selector:even");

// 获取奇数索引的元素
$("selector:odd");

// 获取特定索引的元素
$("selector:eq(index)");

// 获取索引大于特定值的元素
$("selector:gt(index)");

// 获取索引小于特定值的元素
$("selector:lt(index)");

内容过滤选择器

根据元素内容进行选择：

// 获取包含特定文本的元素
$("selector:contains('text')");

// 获取空元素
$("selector:empty");

// 获取包含特定子元素的元素
$("selector:has(childSelector)");

可见性过滤选择器

根据元素是否可见进行选择：

// 获取可见元素
$("selector:visible");

// 获取隐藏元素
$("selector:hidden");

注意事项

jQuery选择器返回的是一个jQuery对象，不是原生DOM元素。如需获取原生DOM元素，可以使用get()方法或数组索引：
```
// 获取第一个匹配的原生DOM元素
$("#elementId").get(0);
// 或
$("#elementId")[0];
```
选择器性能优化：尽量使用ID选择器，因为ID选择器速度最快。避免使用过于复杂的选择器，以提高性能。
链式操作：jQuery支持链式操作，可以在获取元素后直接调用其他方法：
```
$("#elementId").addClass("active").css("color", "red");
```