当前位置：首页 > jquery

jquery 查找

2026-03-02 12:47:42jquery

jQuery 查找元素

使用 jQuery 查找元素可以通过多种选择器和方法实现。以下是一些常见的查找方式：

基本选择器

$("tagName")：通过标签名查找元素，如 $("div")。
$(".className")：通过类名查找元素，如 $(".my-class")。
$("#idName")：通过 ID 查找元素，如 $("#my-id")。

层级选择器

$("parent > child")：查找直接子元素，如 $("ul > li")。
$("ancestor descendant")：查找所有后代元素，如 $("div span")。

属性选择器

$("[attribute]")：查找具有某属性的元素，如 $("[href]")。
$("[attribute='value']")：查找属性值等于指定值的元素，如 $("[type='text']")。

过滤方法

$("selector:first") 或 $("selector").first()：查找第一个匹配的元素。
$("selector:last") 或 $("selector").last()：查找最后一个匹配的元素。
$("selector:eq(index)") 或 $("selector").eq(index)：查找指定索引位置的元素。

遍历方法

.find("selector")：在当前元素的后代中查找匹配的元素。
.children("selector")：在当前元素的直接子元素中查找匹配的元素。
.parent() 或 .parents("selector")：查找父元素或匹配的祖先元素。

示例代码

jquery 查找

// 查找所有类名为 "item" 的元素
$(".item").css("color", "red");

// 查找 ID 为 "header" 的元素下的所有链接
$("#header a").addClass("active");

// 查找表格中第一行的单元格
$("tr:first td").text("First row");

jQuery 查找内容

jQuery 不仅可以查找 DOM 元素，还可以查找和操作元素的内容：

文本内容

.text()：获取或设置元素的文本内容。
.html()：获取或设置元素的 HTML 内容。

表单值

.val()：获取或设置表单元素的值（如 input、select）。

属性值

jquery 查找

.attr("attribute")：获取或设置元素的属性值。
.prop("property")：获取或设置元素的属性（如 checked、disabled）。

示例代码

// 获取段落的文本内容
var text = $("p").text();

// 设置输入框的值
$("input[type='text']").val("New value");

// 获取链接的 href 属性
var url = $("a").attr("href");

jQuery 查找事件

jQuery 提供了丰富的事件查找和绑定方法：

事件绑定

.on("event", handler)：绑定事件处理函数。
.click(handler)：绑定点击事件（其他事件如 .hover()、.keyup() 等）。

事件触发

.trigger("event")：手动触发事件。

示例代码

// 绑定点击事件
$("button").click(function() {
  alert("Button clicked!");
});

// 触发自定义事件
$("div").on("customEvent", function() {
  console.log("Custom event triggered");
});
$("div").trigger("customEvent");

通过灵活运用 jQuery 的选择器和方法，可以高效地查找和操作页面元素、内容及事件。

标签: jquery