选择元素作为 jQuery 中的角色 - JavaScript

在 jQuery 中选择元素是一个非常重要的角色。jQuery 通过选择器来定位 HTML 页面中的元素，提供了强大便捷的操作 DOM 的方式。

选择器

选择器是一种模式，用于匹配 HTML 元素。jQuery 支持多种选择器，以下是一些常用的选择器：

• ID 选择器：以 "#" 开头，选择指定 ID 的元素。
• 类选择器：以 "." 开头，选择指定类名的元素。
• 属性选择器：选择具有指定属性的元素，例如 "[href]"、"[href='http://www.example.com']" 等。
• 后代选择器：选择指定元素后代元素，例如 "div p" 选择所有属于 div 元素后代的 p 元素。
• 子元素选择器：选择指定元素的子元素，例如 "ul > li" 选择所有直接属于 ul 元素的 li 元素。
• 兄弟选择器：选择指定元素之后的同级元素，例如 "h2 + p" 选择紧随 h2 元素之后的第一个 p 元素。

选择元素

通过 jQuery，我们可以轻松地选择 HTML 页面中的元素，例如：

// 选择 ID 为 example 的元素
$("#example")
// 选择 class 为 example 的所有元素
$(".example")
// 选择所有 p 元素中包含"Hello"的元素
$("p:contains('Hello')")
// 选择所有包含标题的元素（h1 ~ h6）
$(":header")

操作元素

除了选择元素，jQuery 也提供了各种操作 DOM 元素的方法，例如：

// 获取元素的文本内容
$("#example").text()
// 设置元素的文本内容
$("#example").text("Hello World")
// 获取元素的 HTML 内容
$("#example").html()
// 设置元素的 HTML 内容
$("#example").html("<strong>Hello World</strong>")
// 获取元素的属性
$("#example").attr("href")
// 设置元素的属性
$("#example").attr("href", "http://www.example.com")
// 显示元素
$("#example").show()
// 隐藏元素
$("#example").hide()
// 添加样式
$("#example").addClass("active")
// 删除样式
$("#example").removeClass("active")

总结

选择元素是 jQuery 中的一个重要角色，它提供了便捷的定位和操作 DOM 元素的能力。通过了解选择器和各种操作元素的方法，开发者可以更加高效地编写 jQuery 代码，实现丰富多彩的交互效果。